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

// ── Constants ─────────────────────────────────────────────────

const STEPS = ['Basic Information', 'Your Efforts', 'Conformance Status', 'Technical Specs', 'Feedback'];

const PREDEFINED_EFFORTS = [
  'Accessibility is part of our mission statement.',
  'Accessibility is part of our internal policies.',
  'Accessibility is integrated into our procurement practices.',
  'An accessibility officer or official has been appointed.',
  'Continual accessibility training is provided for employees.',
  'Clear accessibility targets and responsibilities exist within the organisation.',
  'Formal accessibility quality assurance methods exist within the organisation.',
];

const BROWSERS    = ['Chrome', 'Firefox', 'Safari', 'Edge', 'Internet Explorer'];
const OS_LIST     = ['Windows', 'macOS', 'iOS', 'Android', 'Linux'];
const AT_LIST     = ['JAWS', 'NVDA', 'VoiceOver', 'TalkBack', 'Dragon NaturallySpeaking'];
const TECH_LIST   = ['HTML', 'CSS', 'JavaScript', 'WAI-ARIA'];

const WCAG_STANDARDS = [
  { value: 'wcag22-aa',  label: 'WCAG 2.2 Level AA' },
  { value: 'wcag21-aaa', label: 'WCAG 2.1 Level AAA' },
  { value: 'wcag21-aa',  label: 'WCAG 2.1 Level AA' },
  { value: 'wcag21-a',   label: 'WCAG 2.1 Level A' },
  { value: 'wcag20-aaa', label: 'WCAG 2.0 Level AAA' },
  { value: 'wcag20-aa',  label: 'WCAG 2.0 Level AA' },
  { value: 'wcag20-a',   label: 'WCAG 2.0 Level A' },
  { value: 'section508', label: 'Section 508' },
  { value: 'other',      label: 'Other' },
];

const CONFORMANCE_LEVELS = [
  { value: 'fully-conformant',     label: 'Fully conformant',     desc: 'The content fully conforms to the accessibility standard without any exceptions.' },
  { value: 'partially-conformant', label: 'Partially conformant', desc: 'Some parts of the content do not fully conform to the accessibility standard.' },
  { value: 'non-conformant',       label: 'Non conformant',       desc: 'The content does not conform to the accessibility standard.' },
  { value: 'not-assessed',         label: 'Not assessed',         desc: 'The content has not been evaluated or the evaluation results are not available.' },
];

const EMPTY: StatementData = {
  status:     'none',
  page_id:    0,
  page_url:   '',
  edit_url:   '',
  updated_at: '',
  basic_info: { org_name: '', website: '', website_name: '' },
  efforts:    { selected: [], additional: [] },
  conformance:{ standard: 'wcag21-aa', custom_standard: '', level: 'partially-conformant', additional_notes: '' },
  tech_specs: { browsers: ['Chrome', 'Firefox', 'Safari', 'Edge'], operating_systems: ['Windows', 'macOS'], assistive_tech: [], technology_reliance: ['HTML', 'CSS', 'JavaScript'] },
  feedback:   { phone: '', email: '', address: '', response_duration: '2 business days' },
};

// ── Stepper ───────────────────────────────────────────────────

function Stepper({ step, total, labels }: { step: number; total: number; labels: string[] }) {
  return (
    <div className="aai-stepper" role="list">
      {Array.from({ length: total }, (_, i) => (
        <div key={i} className="aai-stepper__item" role="listitem">
          <div className={`aai-stepper__num${i < step ? ' aai-stepper__num--done' : i === step ? ' aai-stepper__num--active' : ''}`}>
            {i < step ? '✓' : i + 1}
          </div>
          {i === step && <span className="aai-stepper__label">{labels[i]}</span>}
          {i < total - 1 && <div className={`aai-stepper__line${i < step ? ' aai-stepper__line--done' : ''}`} />}
        </div>
      ))}
    </div>
  );
}

// ── CheckGroup ────────────────────────────────────────────────

function CheckGroup({
  options, selected, onChange,
}: { options: string[]; selected: string[]; onChange: (v: string[]) => void }) {
  const toggle = (v: string) =>
    onChange(selected.includes(v) ? selected.filter((x) => x !== v) : [...selected, v]);
  return (
    <div className="aai-check-group">
      {options.map((o) => (
        <label key={o} className="aai-check-item">
          <input type="checkbox" className="aai-check-input" checked={selected.includes(o)} onChange={() => toggle(o)} />
          <span className="aai-check-box" aria-hidden="true" />
          <span>{o}</span>
        </label>
      ))}
    </div>
  );
}

// ── Main component ────────────────────────────────────────────

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

  const { data: saved } = useQuery({
    queryKey: ['statement'],
    queryFn:  () => apiFetch<StatementData>('/statement'),
  });

  const [data, setData]       = useState<StatementData>(EMPTY);
  const [step, setStep]       = useState(0);
  const [addEffort, setAddEffort] = useState('');
  const [showAdd, setShowAdd] = useState(false);
  const [editing, setEditing] = useState(false);
  const [htmlStripped, setHtmlStripped] = useState(false);
  const [saveOk, setSaveOk] = useState(false);

  useEffect(() => {
    if (saved) {
      setData(saved);
      if (saved.status === 'none') setEditing(true);
    }
  }, [saved]);

  const save = useMutation({
    mutationFn: (publish: boolean) =>
      apiFetch<StatementData>('/statement', {
        method: 'POST',
        body:   JSON.stringify({ ...data, publish }),
      }),
    onSuccess: (result) => {
      // The server strips HTML tags from every text field for security. Detect
      // that here (rather than block it) so the user isn't left wondering why
      // their input silently disappeared.
      const submittedTextFields = [
        data.basic_info.org_name, data.basic_info.website_name,
        data.conformance.custom_standard, data.conformance.additional_notes,
        data.feedback.phone, data.feedback.address, data.feedback.response_duration,
      ];
      setHtmlStripped(submittedTextFields.some((v) => /[<>]/.test(v)));
      setData(result);
      setEditing(false);
      qc.invalidateQueries({ queryKey: ['statement'] });
      setSaveOk(true);
      setTimeout(() => setSaveOk(false), 3000);
    },
  });

  // ── helpers ──

  const setBasic       = (k: keyof StatementData['basic_info'],    v: string) => setData((d) => ({ ...d, basic_info:  { ...d.basic_info,  [k]: v } }));
  const setConformance = (k: keyof StatementData['conformance'],   v: string) => setData((d) => ({ ...d, conformance: { ...d.conformance, [k]: v } }));
  const setFeedback    = (k: keyof StatementData['feedback'],      v: string) => setData((d) => ({ ...d, feedback:    { ...d.feedback,    [k]: v } }));
  const setTechSpecs   = (k: keyof StatementData['tech_specs'],    v: string[]) => setData((d) => ({ ...d, tech_specs: { ...d.tech_specs,  [k]: v } }));
  const setEfforts     = (k: keyof StatementData['efforts'],       v: string[]) => setData((d) => ({ ...d, efforts:    { ...d.efforts,     [k]: v } }));

  const isValidEmail = (email: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim());

  const isValidUrl = (url: string) => {
    try {
      return ['http:', 'https:'].includes(new URL(url.trim()).protocol);
    } catch {
      return false;
    }
  };

  const canNext = () => {
    if (step === 0) return !!(data.basic_info.org_name.trim() && isValidUrl(data.basic_info.website) && data.basic_info.website_name.trim());
    return true;
  };

  // ── Success view ──

  if (!editing && data.status !== 'none') {
    return (
      <div className="aai-statement">
        <div className="aai-statement__header">
          <div>
            <h2 className="aai-pane-title">Accessibility Statement</h2>
            <p className="aai-muted">Generate and manage your website's accessibility statement.</p>
          </div>
        </div>

        {htmlStripped && (
          <p className="aai-stmt-warning" role="alert">
            ⚠ HTML tags aren't supported in statement fields and were removed from your input for security. Please review the fields below.
          </p>
        )}

        <div className="aai-stmt-card">
          <div className="aai-stmt-success">
            <span className="aai-stmt-success__icon" aria-hidden="true">✓</span>
            <div>
              <div className="aai-stmt-success__title">
                Statement generated{saveOk && <span className="aai-success" style={{ marginLeft: 8 }}>Saved.</span>}
              </div>
              {data.updated_at && (
                <div className="aai-stmt-success__date">Last updated: {data.updated_at}</div>
              )}
            </div>
            <div className="aai-stmt-success__actions">
              {data.page_url && (
                <a href={data.page_url} target="_blank" rel="noopener noreferrer" className="aai-btn aai-btn--ghost aai-btn--sm">
                  👁 Preview
                </a>
              )}
              {data.edit_url && (
                <a href={data.edit_url} target="_blank" rel="noopener noreferrer" className="aai-btn aai-btn--ghost aai-btn--sm">
                  ✏ Edit in WP
                </a>
              )}
              <button className="aai-btn aai-btn--ghost aai-btn--sm" onClick={() => { setStep(0); setEditing(true); setHtmlStripped(false); }}>
                ✎ Edit form
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  // ── Wizard ──

  return (
    <div className="aai-statement">
      <div className="aai-statement__header">
        <div>
          <h2 className="aai-pane-title">Accessibility Statement</h2>
          <p className="aai-muted">Generate and manage your website's accessibility statement.</p>
        </div>
      </div>

      <div className="aai-stmt-card">
        <h3 className="aai-stmt-card__title">Generate statement</h3>

        <Stepper step={step} total={STEPS.length} labels={STEPS} />

        {/* ── Step 1: Basic Information ── */}
        {step === 0 && (
          <div className="aai-stmt-step">
            <h4>{STEPS[0]}</h4>
            <p className="aai-muted" style={{ marginBottom: 20 }}>
              To get started, tell us about your business and website. Fields marked with * must be filled in.
            </p>

            <div className="aai-stmt-field">
              <label className="aai-stmt-field__label" htmlFor="aai-stmt-org-name">Organisation name *</label>
              <p className="aai-stmt-field__hint">Example: Example Inc.</p>
              <input id="aai-stmt-org-name" type="text" className="aai-stmt-input" value={data.basic_info.org_name}
                onChange={(e) => setBasic('org_name', e.target.value)} placeholder="Your organisation name" />
            </div>

            <div className="aai-stmt-field">
              <label className="aai-stmt-field__label" htmlFor="aai-stmt-website">Website *</label>
              <p className="aai-stmt-field__hint">Example: https://yourwebsite.com</p>
              <input id="aai-stmt-website" type="url" className="aai-stmt-input" value={data.basic_info.website} required
                onChange={(e) => setBasic('website', e.target.value)} placeholder="https://yourwebsite.com" />
              {!isValidUrl(data.basic_info.website) && (
                <p className="aai-error" style={{ padding: '4px 0 0', fontSize: 12 }}>
                  Enter a valid website URL, including https:// or http://.
                </p>
              )}
            </div>

            <div className="aai-stmt-field">
              <label className="aai-stmt-field__label" htmlFor="aai-stmt-website-name">Website name *</label>
              <p className="aai-stmt-field__hint">Example: Example Site</p>
              <input id="aai-stmt-website-name" type="text" className="aai-stmt-input" value={data.basic_info.website_name}
                onChange={(e) => setBasic('website_name', e.target.value)} placeholder="Your website name" />
            </div>
          </div>
        )}

        {/* ── Step 2: Your Efforts ── */}
        {step === 1 && (
          <div className="aai-stmt-step">
            <h4>{STEPS[1]}</h4>
            <p className="aai-muted" style={{ marginBottom: 20 }}>
              Select any current actions your organisation is taking to ensure web accessibility.
            </p>

            <CheckGroup
              options={PREDEFINED_EFFORTS}
              selected={data.efforts.selected}
              onChange={(v) => setEfforts('selected', v)}
            />

            {data.efforts.additional.map((eff, i) => (
              <div key={i} className="aai-stmt-add-row">
                <input type="text" className="aai-stmt-input" value={eff}
                  aria-label={`Additional effort ${i + 1}`}
                  onChange={(e) => {
                    const next = [...data.efforts.additional];
                    next[i] = e.target.value;
                    setEfforts('additional', next);
                  }} />
                <button className="aai-btn aai-btn--ghost aai-btn--sm"
                  aria-label={`Remove additional effort ${i + 1}`}
                  onClick={() => setEfforts('additional', data.efforts.additional.filter((_, j) => j !== i))}>
                  ✕
                </button>
              </div>
            ))}

            {showAdd ? (
              <div className="aai-stmt-add-row">
                <input type="text" className="aai-stmt-input" value={addEffort} autoFocus
                  aria-label="New additional effort"
                  onChange={(e) => setAddEffort(e.target.value)}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter' && addEffort.trim()) {
                      setEfforts('additional', [...data.efforts.additional, addEffort.trim()]);
                      setAddEffort(''); setShowAdd(false);
                    }
                  }}
                  placeholder="Describe your effort…" />
                <button className="aai-btn aai-btn--primary aai-btn--sm"
                  onClick={() => { if (addEffort.trim()) { setEfforts('additional', [...data.efforts.additional, addEffort.trim()]); setAddEffort(''); } setShowAdd(false); }}>
                  Add
                </button>
              </div>
            ) : (
              <button className="aai-stmt-add-btn" onClick={() => setShowAdd(true)}>
                + Additional efforts
              </button>
            )}
          </div>
        )}

        {/* ── Step 3: Conformance Status ── */}
        {step === 2 && (
          <div className="aai-stmt-step">
            <h4>{STEPS[2]}</h4>

            <fieldset className="aai-stmt-field" style={{ marginTop: 16 }}>
              <legend className="aai-stmt-field__label">Which accessibility standard have you been following? *</legend>
              <div className="aai-radio-group">
                {WCAG_STANDARDS.map((s) => (
                  <label key={s.value} className="aai-radio-item">
                    <input type="radio" name="standard" value={s.value}
                      checked={data.conformance.standard === s.value}
                      onChange={() => setConformance('standard', s.value)} />
                    <span>{s.label}</span>
                  </label>
                ))}
              </div>
              {data.conformance.standard === 'other' && (
                <>
                  <label className="aai-stmt-field__label" htmlFor="aai-stmt-custom-standard" style={{ marginTop: 8 }}>
                    Describe the standard
                  </label>
                  <input type="text" id="aai-stmt-custom-standard" className="aai-stmt-input"
                    value={data.conformance.custom_standard}
                    onChange={(e) => setConformance('custom_standard', e.target.value)}
                    placeholder="Describe the standard" />
                </>
              )}
            </fieldset>

            <fieldset className="aai-stmt-field">
              <legend className="aai-stmt-field__label">Current content conformance status? *</legend>
              <div className="aai-radio-group">
                {CONFORMANCE_LEVELS.map((l) => (
                  <label key={l.value} className="aai-radio-item aai-radio-item--desc">
                    <input type="radio" name="level" value={l.value}
                      checked={data.conformance.level === l.value}
                      onChange={() => setConformance('level', l.value)} />
                    <div>
                      <strong>{l.label}</strong>
                      <p>{l.desc}</p>
                    </div>
                  </label>
                ))}
              </div>
            </fieldset>

            <div className="aai-stmt-field">
              <label className="aai-stmt-field__label" htmlFor="aai-stmt-notes">Additional accessibility considerations</label>
              <p className="aai-stmt-field__hint">
                Example: While aiming for WCAG 2.1 Level AA conformance, we also implemented some Level AAA criteria.
              </p>
              <textarea id="aai-stmt-notes" className="aai-stmt-textarea" rows={4}
                value={data.conformance.additional_notes}
                onChange={(e) => setConformance('additional_notes', e.target.value)} />
            </div>

            <div className="aai-stmt-info-box">
              ℹ The statement will be generated based on the information you provide. Please ensure the details accurately reflect your website's accessibility status.
            </div>
          </div>
        )}

        {/* ── Step 4: Technical Specs ── */}
        {step === 3 && (
          <div className="aai-stmt-step">
            <h4>{STEPS[3]}</h4>
            <p className="aai-muted" style={{ marginBottom: 20 }}>
              Select the browsers, operating systems, and assistive technologies your site is compatible with.
            </p>

            <fieldset className="aai-stmt-field">
              <legend className="aai-stmt-field__label">Compatible browsers</legend>
              <CheckGroup options={BROWSERS} selected={data.tech_specs.browsers} onChange={(v) => setTechSpecs('browsers', v)} />
            </fieldset>

            <fieldset className="aai-stmt-field">
              <legend className="aai-stmt-field__label">Compatible operating systems</legend>
              <CheckGroup options={OS_LIST} selected={data.tech_specs.operating_systems} onChange={(v) => setTechSpecs('operating_systems', v)} />
            </fieldset>

            <fieldset className="aai-stmt-field">
              <legend className="aai-stmt-field__label">Compatible assistive technologies</legend>
              <CheckGroup options={AT_LIST} selected={data.tech_specs.assistive_tech} onChange={(v) => setTechSpecs('assistive_tech', v)} />
            </fieldset>

            <fieldset className="aai-stmt-field">
              <legend className="aai-stmt-field__label">Technology reliance</legend>
              <CheckGroup options={TECH_LIST} selected={data.tech_specs.technology_reliance} onChange={(v) => setTechSpecs('technology_reliance', v)} />
            </fieldset>
          </div>
        )}

        {/* ── Step 5: Feedback ── */}
        {step === 4 && (
          <div className="aai-stmt-step">
            <h4>{STEPS[4]}</h4>
            <p className="aai-muted" style={{ marginBottom: 20 }}>
              Provide contact details so users can report accessibility barriers.
            </p>

            <div className="aai-stmt-field">
              <label className="aai-stmt-field__label" htmlFor="aai-stmt-phone">Phone</label>
              <input id="aai-stmt-phone" type="tel" className="aai-stmt-input" value={data.feedback.phone} inputMode="tel"
                onChange={(e) => setFeedback('phone', e.target.value.replace(/[^0-9+\-() .]/g, ''))}
                placeholder="+1 555 000 0000" />
            </div>

            <div className="aai-stmt-field">
              <label className="aai-stmt-field__label" htmlFor="aai-stmt-email">E-mail *</label>
              <input id="aai-stmt-email" type="email" className="aai-stmt-input" value={data.feedback.email} required
                onChange={(e) => setFeedback('email', e.target.value)} placeholder="accessibility@yoursite.com" />
              {!isValidEmail(data.feedback.email) && (
                <p className="aai-error" style={{ padding: '4px 0 0', fontSize: 12 }}>
                  A valid e-mail address is required so visitors can report accessibility barriers.
                </p>
              )}
            </div>

            <div className="aai-stmt-field">
              <label className="aai-stmt-field__label" htmlFor="aai-stmt-address">Address</label>
              <textarea id="aai-stmt-address" className="aai-stmt-textarea" rows={3} value={data.feedback.address}
                onChange={(e) => setFeedback('address', e.target.value)} placeholder="123 Main St, City, Country" />
            </div>

            <div className="aai-stmt-field">
              <label className="aai-stmt-field__label" htmlFor="aai-stmt-response-duration">Typical response duration</label>
              <input id="aai-stmt-response-duration" type="text" className="aai-stmt-input" value={data.feedback.response_duration}
                onChange={(e) => setFeedback('response_duration', e.target.value)} placeholder="2 business days" />
            </div>
          </div>
        )}

        {/* ── Navigation ── */}
        <div className="aai-stmt-nav">
          {step > 0 ? (
            <button className="aai-btn aai-btn--ghost" onClick={() => setStep((s) => s - 1)}>
              ← Previous
            </button>
          ) : (
            <span />
          )}

          {step < STEPS.length - 1 ? (
            <button className="aai-btn aai-btn--primary" onClick={() => setStep((s) => s + 1)} disabled={!canNext()}>
              Next →
            </button>
          ) : (
            <button
              className="aai-btn aai-btn--primary"
              onClick={() => save.mutate(true)}
              disabled={save.isPending || !isValidEmail(data.feedback.email)}
            >
              {save.isPending ? 'Generating…' : 'Generate statement'}
            </button>
          )}
        </div>

        {save.isError && (
          <p className="aai-error" style={{ marginTop: 12 }}>{(save.error as Error).message}</p>
        )}
      </div>
    </div>
  );
}