/**
 * Agent Ready page entry (agent-readiness-spec F1 + F4.5, Phase E Lane E3).
 *
 * Audit score hero, per-domain findings accordion with one-click fixes,
 * and agent-readiness feature toggles.
 * Loaded lazily by admin-shell-main.tsx for the
 * `llmagnet-ai-seo-agent-ready` submenu page.
 */
import { useCallback, useEffect, useState } from 'react';
import { Loader2, Radar } from 'lucide-react';
import { initEntry } from './hooks/use-bootstrap';
import { Button } from '@/components/ui/button';
import { ScoreHero } from '@/components/agent-ready/score-hero';
import { FindingsAccordion } from '@/components/agent-ready/findings-accordion';
import { FeatureToggles } from '@/components/agent-ready/feature-toggles';
import {
  applyFix,
  fetchResult,
  fetchSettings,
  runAudit,
  saveSettings,
} from '@/components/agent-ready/api';
import type { AgentReadySettings, AuditResult } from '@/components/agent-ready/types';
import { __ } from './lib/i18n';
import './index.css';

initEntry('llmagnetAgentReadyData', 'Agent Ready');

function EmptyState({ running, onRun }: { running: boolean; onRun: () => void }) {
  return (
    <div className="bg-white border border-gray-200 rounded-lg shadow-sm p-10 text-center">
      <Radar className="h-10 w-10 text-purple-400 mx-auto" />
      <h2 className="mt-3 text-lg font-semibold text-gray-900">
        {__('Run your first Agent-Ready audit', 'llmagnet-llm-txt-generator')}
      </h2>
      <p className="mt-1 text-sm text-gray-500 max-w-lg mx-auto">
        {__(
          'A sampled audit (homepage + a few representative pages) scores your site across 7 domains of agent-readiness standards and shows exactly what to fix — much of it with one click.',
          'llmagnet-llm-txt-generator',
        )}
      </p>
      <Button variant="default" className="mt-4" disabled={running} onClick={onRun}>
        {running ? (
          <>
            <Loader2 className="h-4 w-4 mr-2 animate-spin" />{' '}
            {__('Auditing your site…', 'llmagnet-llm-txt-generator')}
          </>
        ) : (
          __('Run audit', 'llmagnet-llm-txt-generator')
        )}
      </Button>
    </div>
  );
}

export function AgentReadyApp() {
  const [result, setResult] = useState<AuditResult | null>(null);
  const [settings, setSettings] = useState<AgentReadySettings | null>(null);
  const [loading, setLoading] = useState(true);
  const [running, setRunning] = useState(false);
  const [saving, setSaving] = useState(false);
  const [fixingId, setFixingId] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;
    Promise.all([fetchResult().catch(() => null), fetchSettings().catch(() => null)])
      .then(([resultData, settingsData]) => {
        if (cancelled) {
          return;
        }
        if (resultData && resultData.has_result) {
          setResult(resultData);
        }
        if (settingsData) {
          setSettings(settingsData);
        }
      })
      .finally(() => {
        if (!cancelled) {
          setLoading(false);
        }
      });
    return () => {
      cancelled = true;
    };
  }, []);

  const handleRun = useCallback(() => {
    setRunning(true);
    setError(null);
    runAudit()
      .then(setResult)
      .catch((err: Error) => setError(err.message))
      .finally(() => setRunning(false));
  }, []);

  const handleFix = useCallback((checkId: string) => {
    setFixingId(checkId);
    setError(null);
    applyFix(checkId)
      .then((response) => {
        setResult((prev) => {
          if (!prev) {
            return prev;
          }
          const findings = prev.findings.map((finding) =>
            finding.id === response.finding.id ? response.finding : finding,
          );
          return response.summary
            ? { ...prev, ...response.summary, findings }
            : { ...prev, findings };
        });
        // Toggles may have flipped as part of the fix.
        return fetchSettings().then(setSettings);
      })
      .catch((err: Error) => setError(err.message))
      .finally(() => setFixingId(null));
  }, []);

  const persistSettings = useCallback(
    (payload: Parameters<typeof saveSettings>[0]) => {
      setSaving(true);
      setError(null);
      saveSettings(payload)
        .then(setSettings)
        .catch((err: Error) => setError(err.message))
        .finally(() => setSaving(false));
    },
    [],
  );

  return (
    <div
      className="llms-agent-ready-react-app"
      style={{ position: 'relative', backgroundColor: '#F0F0F1' }}
    >
      <div className="wrap" style={{ maxWidth: '1200px', margin: 'auto' }}>
        <div className="p-6 space-y-4">
          <div>
            <h1 className="text-xl font-semibold text-gray-900">
              {__('Agent Ready', 'llmagnet-llm-txt-generator')}
            </h1>
            <p className="mt-1 text-sm text-gray-500">
              {__(
                'Audit your site against current agent-readiness standards and fix the gaps — discovery files, machine-readable content, WebMCP, and security headers.',
                'llmagnet-llm-txt-generator',
              )}
            </p>
          </div>

          {error && (
            <div className="rounded-md bg-red-50 border border-red-200 px-4 py-2 text-sm text-red-700">
              {error}
            </div>
          )}

          {loading ? (
            <div className="bg-white border border-gray-200 rounded-lg shadow-sm p-10 flex items-center justify-center text-gray-400">
              <Loader2 className="h-5 w-5 animate-spin mr-2" />{' '}
              {__('Loading…', 'llmagnet-llm-txt-generator')}
            </div>
          ) : (
            <>
              {result ? (
                <ScoreHero result={result} running={running} onRun={handleRun} />
              ) : (
                <EmptyState running={running} onRun={handleRun} />
              )}

              {result && (
                <FindingsAccordion
                  domains={result.domains}
                  findings={result.findings}
                  fixingId={fixingId}
                  onFix={handleFix}
                />
              )}

              {settings && (
                <FeatureToggles
                  settings={settings}
                  saving={saving}
                  onToggle={(key, value) => persistSettings({ toggles: { [key]: value } })}
                  onContentSignal={(key, value) =>
                    persistSettings({ content_signal: { [key]: value } })
                  }
                  onSubOption={(key, value) => persistSettings({ [key]: value })}
                  onSecurityHeader={(key, value) =>
                    persistSettings({ security_headers: { [key]: value } })
                  }
                />
              )}
            </>
          )}
        </div>
      </div>
    </div>
  );
}