import { useEffect, useState } from 'react';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { apiFetch } from '../lib/api';
import { WidgetSkeleton } from './Skeleton';
import type { WidgetConfig, Position } from '../lib/types';

const ALL_FEATURES = [
  { id: 'font',          label: 'Font Size'        },
  { id: 'contrast',      label: 'High Contrast'    },
  { id: 'dyslexia',      label: 'Dyslexia Font'    },
  { id: 'grayscale',     label: 'Grayscale'        },
  { id: 'reading-guide', label: 'Reading Guide'    },
  { id: 'animations',    label: 'Pause Animations' },
  { id: 'line-height',   label: 'Line Height'      },
  { id: 'cursor',        label: 'Large Cursor'     },
  { id: 'links',         label: 'Highlight Links'  },
  { id: 'screen-mask',   label: 'Screen Mask'      },
];

const POSITIONS: { value: Position; label: string }[] = [
  { value: 'bottom-right', label: 'Bottom Right' },
  { value: 'bottom-left',  label: 'Bottom Left'  },
  { value: 'top-right',    label: 'Top Right'    },
  { value: 'top-left',     label: 'Top Left'     },
];

const DEFAULT_CONFIG: WidgetConfig = {
  enabled:         true,
  color:           '#3858e9',
  position:        'bottom-right',
  features:        ['font', 'contrast', 'dyslexia', 'reading-guide', 'animations', 'line-height'],
  hide_powered_by: false,
};

// ── Exact replica of the widget CSS, scoped to .wpr ──────────
const WIDGET_SCOPED_CSS = `
.wpr *,.wpr *::before,.wpr *::after{box-sizing:border-box;margin:0;padding:0}
.wpr{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px;line-height:1.4;color:#1e1e2e}
.wpr .fab{width:52px;height:52px;border-radius:50%;border:2px solid rgba(255,255,255,.25);cursor:default;display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;box-shadow:0 2px 14px rgba(0,0,0,.28)}
.wpr .panel{width:292px;background:#fff;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.18);overflow:hidden}
.wpr .ph{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 11px;border-bottom:1px solid #e5e7eb}
.wpr .pt{font-size:14px;font-weight:700}
.wpr .xb{background:none;border:none;cursor:default;font-size:17px;color:#6b7280;padding:4px 6px;border-radius:6px;line-height:1}
.wpr .fs{padding:6px 8px 8px;max-height:380px;overflow-y:auto}
.wpr .fr{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;border-radius:8px;transition:background .12s,box-shadow .12s}
.wpr .fr:hover{background:#f0f4ff;box-shadow:inset 0 0 0 2px var(--c)}

.wpr .fi{font-size:20px;width:28px;flex-shrink:0;display:flex;align-items:center;justify-content:center;line-height:1;opacity:.75}
.wpr .fl{font-size:13px;font-weight:500;flex:1}
.wpr .tb{width:44px;height:24px;border-radius:12px;border:none;cursor:default;position:relative;background:#d1d5db;flex-shrink:0}
.wpr .tb::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.wpr .sbs{display:flex;align-items:center;gap:4px}
.wpr .sb{padding:2px 9px;border:1px solid #d1d5db;border-radius:6px;background:#fff;cursor:default;font-size:12px;font-weight:700;color:#374151;line-height:1.8}
.wpr .sv{font-size:11px;color:#6b7280;min-width:26px;text-align:center}
.wpr .pf{padding:8px 14px;border-top:1px solid #e5e7eb;text-align:center;font-size:10px;color:#9ca3af;letter-spacing:.02em}
.wpr .pf a{color:#9ca3af;text-decoration:none;font-weight:600}
`;

const PREVIEW_ICONS: Record<string, string> = {
  font:            'Aa',
  contrast:        '◑',
  dyslexia:        '\u{1D4BB}',
  grayscale:       '◌',
  'reading-guide': '☰',
  animations:      '⏸',
  'line-height':   '↕',
  cursor:          '↖',
  links:           '⬡',
  'screen-mask':   '▤',
};

function WidgetPreview({ config }: { config: WidgetConfig }) {
  const c      = config.color || '#3858e9';
  const isTop  = config.position.startsWith('top');
  const isLeft = config.position.endsWith('left');

  const fabStyle: React.CSSProperties = {
    background: c,
    position: 'absolute',
    ...(isTop  ? { top: 16 }    : { bottom: 16 }),
    ...(isLeft ? { left: 16 }   : { right: 16 }),
  };

  const panelStyle: React.CSSProperties = {
    position: 'absolute',
    ...(isTop  ? { top: 76 }    : { bottom: 76 }),
    ...(isLeft ? { left: 16 }   : { right: 16 }),
  };

  return (
    <>
      <style>{WIDGET_SCOPED_CSS}</style>
      {/* Mock page background */}
      <div style={{
        position: 'relative', height: 520, background: '#f3f4f6',
        borderRadius: 8, border: '1px solid #e5e7eb', overflow: 'hidden',
      }}>

        <div className="wpr" style={{ position: 'absolute', inset: 0 }}>
          {/* FAB */}
          <div className="fab" style={fabStyle} aria-hidden="true">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="26" height="26" fill="#fff"><circle cx="12" cy="3.5" r="2"/><path d="M17 7.5H7a1 1 0 0 0 0 2h3.5v3L8 17.5a1 1 0 0 0 1.8.9L12 14l2.2 4.4a1 1 0 0 0 1.8-.9L13.5 12.5v-3H17a1 1 0 0 0 0-2z"/></svg>
          </div>

          {/* Panel (always open in preview) */}
          <div className="panel" style={panelStyle}>
            <div className="ph">
              <span className="pt" style={{ color: c }}>Accessibility</span>
              <button className="xb" aria-hidden="true">✕</button>
            </div>
            <div className="fs">
              {ALL_FEATURES.filter((f) => config.features.includes(f.id)).length === 0 && (
                <p style={{ padding: '10px 8px', fontSize: 13, color: '#6b7280' }}>No features selected.</p>
              )}
              {ALL_FEATURES.filter((f) => config.features.includes(f.id)).map((f) => (
                <div key={f.id} className="fr">
                  <span className="fi" aria-hidden="true">{PREVIEW_ICONS[f.id] ?? '●'}</span>
                  <span className="fl">{f.label}</span>
                  {f.id === 'font' && (
                    <div className="sbs">
                      <button className="sb" aria-hidden="true">A−</button>
                      <span className="sv">—</span>
                      <button className="sb" aria-hidden="true">A+</button>
                    </div>
                  )}
                  {f.id === 'line-height' && (
                    <button className="sb" style={{ minWidth: 44 }} aria-hidden="true">Off</button>
                  )}
                  {f.id !== 'font' && f.id !== 'line-height' && (
                    <div className="tb" aria-hidden="true" />
                  )}
                </div>
              ))}
            </div>
            {!config.hide_powered_by && (
              <div className="pf">Powered by <a href="https://accessmate.ai/" target="_blank" rel="noopener noreferrer">AccessMate</a></div>
            )}
          </div>
        </div>
      </div>
    </>
  );
}

export default function WidgetConfigurator() {
  const qc = useQueryClient();

  const { data: saved, isLoading } = useQuery({
    queryKey: ['widget-config'],
    queryFn:  () => apiFetch<WidgetConfig>('/widget-config'),
    retry:    false,
  });

  const [config, setConfig] = useState<WidgetConfig>(DEFAULT_CONFIG);
  const [saveOk, setSaveOk] = useState(false);

  // Hydrate from server once loaded.
  useEffect(() => {
    if (saved) setConfig(saved);
  }, [saved]);

  const effective = config;

  const save = useMutation({
    mutationFn: () =>
      apiFetch<{ saved: boolean }>('/widget-config', {
        method: 'POST',
        body:   JSON.stringify(effective),
      }),
    onSuccess: () => {
      setSaveOk(true);
      qc.invalidateQueries({ queryKey: ['widget-config'] });
      setTimeout(() => setSaveOk(false), 3000);
    },
  });

  const toggleFeature = (featureId: string) => {
    const next = effective.features.includes(featureId)
      ? effective.features.filter((f) => f !== featureId)
      : [...effective.features, featureId];
    setConfig({ ...effective, features: next });
  };

  if (isLoading) return <WidgetSkeleton />;

  return (
    <div className="aai-widget-config">
      <h2>Widget Configurator</h2>
      <p className="aai-muted">Configure the public-facing accessibility toolbar.</p>

      <div className="aai-widget-config__body">
        {/* Controls */}
        <section className="aai-widget-config__controls">
          <label className="aai-field">
            <span>Widget enabled</span>
            <input
              type="checkbox"
              checked={effective.enabled}
              onChange={(e) => setConfig({ ...effective, enabled: e.target.checked })}
            />
          </label>

          <label className="aai-field">
            <span>Accent colour</span>
            <input
              type="color"
              value={effective.color}
              onChange={(e) => setConfig({ ...effective, color: e.target.value })}
            />
          </label>

          <label className="aai-field">
            <span>Position</span>
            <select
              value={effective.position}
              onChange={(e) => setConfig({ ...effective, position: e.target.value as Position })}
            >
              {POSITIONS.map((p) => (
                <option key={p.value} value={p.value}>{p.label}</option>
              ))}
            </select>
          </label>

          <fieldset className="aai-field aai-field--fieldset">
            <legend>Features</legend>
            {ALL_FEATURES.map((f) => (
              <label key={f.id} className="aai-checkbox">
                <input
                  type="checkbox"
                  checked={effective.features.includes(f.id)}
                  onChange={() => toggleFeature(f.id)}
                />
                {f.label}
              </label>
            ))}
          </fieldset>

          <label className="aai-field">
            <span>Hide "Powered by accessmate.ai"</span>
            <input
              type="checkbox"
              checked={effective.hide_powered_by ?? false}
              onChange={(e) => setConfig({ ...effective, hide_powered_by: e.target.checked })}
            />
          </label>

          <div className="aai-settings__save-row">
            <button
              className="aai-btn aai-btn--primary"
              onClick={() => save.mutate()}
              disabled={save.isPending}
            >
              {save.isPending
                ? <><span className="aai-spinner" aria-hidden="true" /> Saving…</>
                : 'Save Configuration'
              }
            </button>
            {saveOk && <span className="aai-success">Saved.</span>}
            {save.isError && (
              <span className="aai-error">{(save.error as Error).message}</span>
            )}
          </div>
        </section>

        {/* Live preview */}
        <section className="aai-widget-config__preview">
          <h3>Live Preview</h3>
          <WidgetPreview config={effective} />
        </section>
      </div>
    </div>
  );
}