import { useEffect, useState } from 'react';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { apiFetch, isPremium } from '../lib/api';
import { SettingsSkeleton } from './Skeleton';
import type { AIProvider, ScanSchedule, Settings as SettingsType } from '../lib/types';
import { labelsForRulesets, RULESET_PRESETS, presetValueForStandards, standardsForPresetValue, DEFAULT_RULESET_PRESET } from '../lib/rulesets';
import { PROVIDERS } from '../lib/providers';

const SCHEDULES: { value: ScanSchedule; label: string }[] = [
  { value: 'daily',   label: 'Daily'   },
  { value: 'weekly',  label: 'Weekly'  },
  { value: 'monthly', label: 'Monthly' },
];

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

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

  const [provider, setProvider]             = useState<AIProvider>('none');
  const [apiKey, setApiKey]                 = useState('');
  const [showKey, setShowKey]               = useState(false);
  const [model, setModel]                   = useState('');
  const [schedule, setSchedule]               = useState<ScanSchedule>('weekly');
  const [emailAlerts, setEmailAlerts]         = useState(true);
  const [defaultRulesets, setDefaultRulesets] = useState<string[]>(['wcag22aa']);
  const [saveOk, setSaveOk]                 = useState(false);
  const [saveAttempted, setSaveAttempted]   = useState(false);

  // Hydrate form from server once loaded.
  useEffect(() => {
    if (!saved) return;
    setProvider(saved.ai_provider);
    setSchedule(saved.scan_schedule);
    setEmailAlerts(saved.email_alerts ?? true);
    setModel(saved.ai_model || (PROVIDERS.find((p) => p.value === saved.ai_provider)?.models[0] ?? ''));
    setDefaultRulesets(saved.default_rulesets?.length ? saved.default_rulesets : [DEFAULT_RULESET_PRESET]);
  }, [saved]);

  const save = useMutation({
    mutationFn: () =>
      apiFetch<{ saved: boolean }>('/settings', {
        method: 'POST',
        body: JSON.stringify({ ai_provider: provider, ai_key: apiKey, ai_model: model, scan_schedule: schedule, default_rulesets: defaultRulesets, email_alerts: emailAlerts }),
      }),
    onSuccess: () => {
      setSaveOk(true);
      setSaveAttempted(false);
      setApiKey('');
      qc.invalidateQueries({ queryKey: ['settings'] });
      setTimeout(() => setSaveOk(false), 3000);
    },
  });

  const testConnection = useMutation({
    mutationFn: () =>
      apiFetch<{ text?: string; error?: string }>('/ai/test', {
        method: 'POST',
        body: JSON.stringify({ ai_provider: provider, ai_key: apiKey, ai_model: model }),
      }),
  });

  const removeKey = useMutation({
    mutationFn: () =>
      apiFetch<{ saved: boolean }>('/settings', {
        method: 'POST',
        body: JSON.stringify({ ai_provider: provider, ai_key: '', remove_key: true, ai_model: model, scan_schedule: schedule, default_rulesets: defaultRulesets, email_alerts: emailAlerts }),
      }),
    onSuccess: () => {
      setApiKey('');
      testConnection.reset();
      qc.invalidateQueries({ queryKey: ['settings'] });
    },
  });

  const providerDef  = PROVIDERS.find((p) => p.value === provider)!;
  // A saved key only belongs to the provider it was entered for — if the
  // dropdown has been switched to a different (unsaved) provider, the
  // previously-saved key doesn't apply here and must not be treated as usable.
  const hasUsableSavedKey = !!saved?.ai_key_set && saved?.ai_provider === provider;
  const keyRequired  = providerDef.needsKey && !apiKey && !hasUsableSavedKey;

  if (isLoading) return <SettingsSkeleton />;

  return (
    <div className="aai-settings">
      <h2>Settings</h2>

      {/* AI Provider */}
      <section className="aai-settings__section">
        <h3>AI Provider</h3>
        <p className="aai-muted">
          AI features are optional. The API key is stored encrypted in{' '}
          <code>wp_options</code> and never sent to the browser.
        </p>

        <fieldset className="aai-field aai-field--fieldset">
          <legend className="screen-reader-text">Select AI provider</legend>
          {PROVIDERS.map((p) => (
            <label key={p.value} className="aai-radio">
              <input
                type="radio"
                name="ai_provider"
                value={p.value}
                checked={provider === p.value}
                onChange={() => {
                  setProvider(p.value);
                  setModel(p.models[0] ?? '');
                  setApiKey('');
                  testConnection.reset();
                  setSaveAttempted(false);
                }}
              />
              {p.label}
            </label>
          ))}
        </fieldset>

        {providerDef.models.length > 0 && (
          <label className="aai-field">
            <span>Model</span>
            <select value={model} onChange={(e) => setModel(e.target.value)}>
              {providerDef.models.map((m) => (
                <option key={m} value={m}>{m}</option>
              ))}
            </select>
          </label>
        )}

        {provider !== 'none' && (
          <div className="aai-field aai-field--key">
            {providerDef.needsKey && (
              <>
                <label htmlFor="aai-api-key">
                  API Key <span aria-hidden="true" className="aai-required">*</span>
                  {hasUsableSavedKey && !apiKey && (
                    <span className="aai-key-set"> (key saved — enter a new one to replace)</span>
                  )}
                </label>
                <div className="aai-field__key-row">
                  <input
                    id="aai-api-key"
                    type={showKey ? 'text' : 'password'}
                    value={apiKey}
                    onChange={(e) => { setApiKey(e.target.value); testConnection.reset(); setSaveAttempted(false); }}
                    placeholder={hasUsableSavedKey ? '••••••••••••••••' : 'Paste your API key'}
                    autoComplete="off"
                    required
                    aria-required="true"
                    aria-describedby={keyRequired && saveAttempted ? 'aai-key-error' : undefined}
                  />
                  <button
                    type="button"
                    className="aai-btn aai-btn--ghost"
                    onClick={() => setShowKey((s) => !s)}
                    aria-label={showKey ? 'Hide API key' : 'Show API key'}
                  >
                    {showKey ? 'Hide' : 'Show'}
                  </button>
                  <button
                    type="button"
                    className="aai-btn aai-btn--ghost"
                    onClick={() => testConnection.mutate()}
                    disabled={testConnection.isPending || (!apiKey && !hasUsableSavedKey)}
                  >
                    {testConnection.isPending
                      ? <><span className="aai-spinner aai-spinner--dark" aria-hidden="true" /> Testing…</>
                      : 'Test connection'
                    }
                  </button>
                  {hasUsableSavedKey && !apiKey && (
                    <button
                      type="button"
                      className="aai-btn aai-btn--ghost"
                      onClick={() => removeKey.mutate()}
                      disabled={removeKey.isPending}
                    >
                      {removeKey.isPending ? 'Removing…' : 'Remove key'}
                    </button>
                  )}
                </div>

                {/* API key required validation */}
                {keyRequired && saveAttempted && (
                  <p id="aai-key-error" className="aai-error" role="alert">API key is required for the selected provider.</p>
                )}
                {removeKey.isSuccess && <p className="aai-success">Key removed.</p>}
              </>
            )}

            {/* A key-less provider (Ollama) still needs a way to verify the connection. */}
            {!providerDef.needsKey && (
              <button
                type="button"
                className="aai-btn aai-btn--ghost"
                onClick={() => testConnection.mutate()}
                disabled={testConnection.isPending}
              >
                {testConnection.isPending
                  ? <><span className="aai-spinner aai-spinner--dark" aria-hidden="true" /> Testing…</>
                  : 'Test connection'
                }
              </button>
            )}

            {/* Test connection feedback */}
            {testConnection.isSuccess && !testConnection.data?.error && (
              <p className="aai-success">Connection verified.</p>
            )}
            {(testConnection.isError || testConnection.data?.error) && (
              <p className="aai-error">
                {testConnection.data?.error ?? (testConnection.error as Error)?.message ?? 'Connection failed.'}
              </p>
            )}
          </div>
        )}
      </section>


      {/* Default Ruleset */}
      <section className="aai-settings__section">
        <h3>Default WCAG Standard</h3>
        <p className="aai-muted">
          This ruleset is used by default when scanning pages from the admin dashboard and the frontend overlay.
        </p>
        <label className="aai-field">
          <span>Default Ruleset</span>
          <select
            value={presetValueForStandards(defaultRulesets)}
            onChange={(e) => setDefaultRulesets(standardsForPresetValue(e.target.value))}
          >
            {RULESET_PRESETS.map((r) => (
              <option key={r.value} value={r.value}>{r.label}</option>
            ))}
          </select>
        </label>
      </section>

      {/* Scheduled Scans — Pro only; free users don't see a control for a feature that doesn't exist for them */}
      {isPremium && (
        <section className="aai-settings__section">
          <h3>Scheduled Scans</h3>
          <p className="aai-muted">
            AccessMate automatically re-scans your entire site on this schedule, keeping the Dashboard and Report up to date.
          </p>
          <label className="aai-field">
            <span>Scan Frequency</span>
            <select value={schedule} onChange={(e) => setSchedule(e.target.value as ScanSchedule)}>
              {SCHEDULES.map((s) => (
                <option key={s.value} value={s.value}>{s.label}</option>
              ))}
            </select>
          </label>

          <label className="aai-checkbox">
            <input
              type="checkbox"
              checked={emailAlerts}
              onChange={(e) => setEmailAlerts(e.target.checked)}
            />
            Email me a summary after each scheduled scan
          </label>
        </section>
      )}

      {/* Accessibility note */}
      <section className="aai-settings__section aai-settings__section--note">
        <p className="aai-muted">
          <strong>Accessibility note:</strong> AccessMate uses automated scanning to identify and help fix accessibility issues. Automated tools can detect only a subset of accessibility problems. For full {labelsForRulesets(defaultRulesets) || 'WCAG 2.2 AA'} compliance, manual testing — including testing with assistive technologies such as screen readers — is recommended.
        </p>
        <p className="aai-muted" style={{ marginTop: 8 }}>
          AccessMate helps you find and fix accessibility issues faster. It does not replace a full manual accessibility audit.
        </p>
      </section>

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