import { useCallback, useEffect, useRef, useState } from 'react';
import {
  ChevronDownIcon,
  ChevronRightIcon,
  CircleCheckIcon,
  CircleXIcon,
  ExternalLinkIcon,
  GaugeIcon,
  InfoIcon,
  RefreshCwIcon,
  SparklesIcon,
  TriangleAlertIcon,
  Undo2Icon,
  WrenchIcon,
} from 'lucide-react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { toast } from 'sonner';

import { SeoMedicPanel } from '../../components/seo/seo-medic';
import { SeoPage, SeoPageHeader } from '../../components/seo/seo-page';
import { Badge } from '../../components/ui/badge';
import { Button } from '../../components/ui/button';
import { Callout } from '../../components/ui/callout';
import { Card, CardContent } from '../../components/ui/card';
import ConfirmDialog from '../../components/ui/confirm-dialog';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '../../components/ui/table';
import { Tabs, TabsList, TabsTrigger } from '../../components/ui/tabs';
import { ScoreRunner } from '../../components/seo/score-runner';
import { useCopilot } from '../../context/copilot.context';
import { useSeoBadges } from '../../context/seo-badges.context';
import { recomaze_ai_personalization_env } from '../../env';
import { revertMessage } from '../../lib/seo/revert-message';
import { checkupGroup } from '../../lib/seo/checkup-groups';
import {
  changeExcerpt,
  fieldLabel,
  sourceLabel,
  valueLabel,
  type ChangePart,
} from '../../lib/seo/change-labels';
import { SEVERITY_MEANING } from '../../lib/seo/checkup-severity';
import { classNames } from '../../lib/utils';
import type {
  ISeoChange,
  ISeoChangesPayload,
  ISeoCheck,
  ISeoCheckup,
  SeoCheckSeverity,
} from '../../service/seo/seo.interface';
import {
  fetchSeoChanges,
  fetchSeoCheckup,
  fixSeoCheck,
  revertSeoChanges,
} from '../../service/seo/seo.service';

import { PAGES } from './settings.copy';

const SEVERITY: Record<
  SeoCheckSeverity,
  { label: string; icon: typeof CircleXIcon; tone: string; badge: string }
> = {
  error: {
    label: 'Problems',
    icon: CircleXIcon,
    tone: 'text-red-600 dark:text-red-400',
    badge: 'bg-red-500/10 text-red-700 dark:text-red-300',
  },
  warning: {
    label: 'Warnings',
    icon: TriangleAlertIcon,
    tone: 'text-amber-600 dark:text-amber-400',
    badge: 'bg-amber-500/10 text-amber-700 dark:text-amber-300',
  },
  info: {
    label: 'Suggestions',
    icon: InfoIcon,
    tone: 'text-sky-600 dark:text-sky-400',
    badge: 'bg-sky-500/10 text-sky-700 dark:text-sky-300',
  },
};

const ITEMS_IN_PROMPT = 10;

/**
 * The Copilot and the automation work through the Recomaze account, which a
 * role given the SEO pages alone does not get.
 */
const WITH_ACCOUNT = !recomaze_ai_personalization_env?.seo_only;

/** When a stored GMT time happened, in the reader's words. */
const when = (mysql: string): string => {
  const date = new Date(`${mysql.replace(' ', 'T')}Z`);
  return Number.isNaN(date.getTime()) ? mysql : date.toLocaleString();
};

const scoreTone = (score: number): string =>
  score >= 80
    ? 'text-emerald-600 dark:text-emerald-400'
    : score >= 50
      ? 'text-amber-600 dark:text-amber-400'
      : 'text-red-600 dark:text-red-400';

/** The Copilot's instruction for a check: what to do, then the items it found. */
const copilotPrompt = (check: ISeoCheck): string => {
  const lines = check.items
    .slice(0, ITEMS_IN_PROMPT)
    .map(item => `- ${item.title}${item.url ? ` (${item.url})` : ''}`);
  const more =
    check.count > ITEMS_IN_PROMPT
      ? `\n…and ${check.count - ITEMS_IN_PROMPT} more; ask the checkup for the full list.`
      : '';
  return `${check.fix?.prompt ?? `Fix this SEO checkup item: ${check.title}.`}\n${lines.join('\n')}${more}`;
};

const CheckCard = ({
  check,
  busy,
  onFix,
  onCopilot,
}: {
  check: ISeoCheck;
  busy: boolean;
  onFix: (check: ISeoCheck) => void;
  onCopilot: (check: ISeoCheck) => void;
}): JSX.Element => {
  const navigate = useNavigate();
  const [open, setOpen] = useState(false);
  const severity = SEVERITY[check.severity];
  const Icon = check.passed ? CircleCheckIcon : severity.icon;
  const fix = check.fix;

  return (
    <Card size="sm" className={classNames(check.passed && 'opacity-80')}>
      <CardContent className="flex flex-col gap-3">
        <div className="flex items-start gap-3">
          <Icon
            className={classNames(
              'mt-0.5 size-5 shrink-0',
              check.passed
                ? 'text-emerald-600 dark:text-emerald-400'
                : severity.tone
            )}
          />
          <div className="flex min-w-0 flex-1 flex-col gap-1">
            <div className="flex flex-wrap items-center gap-2">
              <h3 className="text-sm font-semibold text-foreground">
                {check.title}
              </h3>
              <span className="text-[11px] font-medium uppercase tracking-[0.04em] text-muted-foreground">
                {checkupGroup(check.group)?.label ?? check.group}
              </span>
              {!check.passed && (
                <span
                  className={classNames(
                    'rounded-md px-1.5 py-0.5 text-[11px] font-semibold',
                    severity.badge
                  )}
                >
                  {check.count.toLocaleString()}{' '}
                  {check.count === 1 ? 'item' : 'items'}
                </span>
              )}
              {check.passed && <Badge variant="outline">Passed</Badge>}
            </div>
            <p className="text-sm leading-relaxed text-muted-foreground">
              {check.description}
            </p>
          </div>
          {!check.passed && fix && (
            <div className="flex shrink-0 flex-wrap justify-end gap-2">
              {(fix.type === 'local' || fix.type === 'score') && (
                <Button size="sm" disabled={busy} onClick={() => onFix(check)}>
                  <WrenchIcon /> {fix.label ?? 'Fix'}
                </Button>
              )}
              {(fix.type === 'copilot' || fix.prompt) && WITH_ACCOUNT && (
                <Button
                  size="sm"
                  variant={fix.type === 'copilot' ? 'default' : 'outline'}
                  onClick={() => onCopilot(check)}
                >
                  <SparklesIcon /> Ask Copilot
                </Button>
              )}
              {fix.type === 'link' && fix.to && (
                <Button
                  size="sm"
                  variant="outline"
                  onClick={() => navigate(fix.to as string)}
                >
                  {fix.label ?? 'Open'}
                </Button>
              )}
              {fix.type === 'external' && fix.to && (
                <Button
                  size="sm"
                  variant="outline"
                  nativeButton={false}
                  render={<a href={fix.to} target="_blank" rel="noreferrer" />}
                >
                  {fix.label ?? 'Open'} <ExternalLinkIcon />
                </Button>
              )}
            </div>
          )}
        </div>

        {!check.passed && check.items.length > 0 && (
          <div className="ml-8">
            <button
              type="button"
              onClick={() => setOpen(current => !current)}
              className="inline-flex items-center gap-1 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground"
            >
              {open ? (
                <ChevronDownIcon className="size-3.5" />
              ) : (
                <ChevronRightIcon className="size-3.5" />
              )}
              {open ? 'Hide' : 'Show'}{' '}
              {Math.min(check.items.length, check.count)}
              {check.count > check.items.length ? ` of ${check.count}` : ''}
            </button>
            {open && (
              <ul className="mt-2 flex flex-col gap-1 text-sm">
                {check.items.map(item => (
                  <li
                    key={`${check.id}-${item.id}-${item.title}`}
                    className="flex flex-wrap items-baseline gap-x-2"
                  >
                    {item.edit ? (
                      <a
                        href={item.edit}
                        target="_blank"
                        rel="noreferrer"
                        className="font-medium text-foreground underline-offset-4 hover:underline"
                      >
                        {item.title}
                      </a>
                    ) : (
                      <span className="font-medium text-foreground">
                        {item.title}
                      </span>
                    )}
                    {item.url && (
                      <a
                        href={item.url}
                        target="_blank"
                        rel="noreferrer"
                        className="truncate text-xs text-muted-foreground hover:text-foreground"
                      >
                        {item.url.replace(/^https?:\/\/[^/]+/, '') || item.url}
                      </a>
                    )}
                  </li>
                ))}
              </ul>
            )}
          </div>
        )}
      </CardContent>
    </Card>
  );
};

const PART_TONE: Record<ChangePart['type'], string> = {
  same: 'text-muted-foreground',
  del: 'rounded-sm bg-red-500/10 text-red-700 line-through decoration-red-400',
  add: 'rounded-sm bg-emerald-500/10 text-emerald-700',
};

/**
 * The part of a long text a change touched: on the before side what it
 * removed, on the after side what it wrote, or both where one column shows.
 */
const ChangeText = ({
  parts,
  side,
}: {
  parts: ChangePart[];
  side: 'before' | 'after' | 'both';
}): JSX.Element => (
  <span className="line-clamp-4 whitespace-normal break-words font-mono text-xs">
    {parts
      .filter(part =>
        side === 'before'
          ? part.type !== 'add'
          : side === 'after'
            ? part.type !== 'del'
            : true
      )
      .map((part, index, shown) => (
        <span key={`${part.type}-${index}`}>
          {part.type === 'add' && shown[index - 1]?.type === 'del' ? ' ' : ''}
          <span className={PART_TONE[part.type]}>{part.text}</span>
        </span>
      ))}
  </span>
);

const ChangesPanel = ({
  onReverted,
}: {
  onReverted: () => void;
}): JSX.Element => {
  const [data, setData] = useState<ISeoChangesPayload | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [showReverted, setShowReverted] = useState(false);
  const [busy, setBusy] = useState(false);
  const [confirm, setConfirm] = useState<
    { kind: 'all' } | { kind: 'run'; runId: string } | null
  >(null);

  const load = useCallback(async (): Promise<void> => {
    try {
      setData(
        await fetchSeoChanges({ per_page: 50, include_reverted: showReverted })
      );
      setError(null);
    } catch (reason) {
      setError((reason as Error).message);
    }
  }, [showReverted]);

  useEffect(() => {
    void load();
  }, [load]);

  const revert = async (target: {
    ids?: number[];
    run_id?: string;
    all?: boolean;
  }): Promise<void> => {
    setBusy(true);
    try {
      const result = await revertSeoChanges(target);
      toast.success(
        revertMessage(result.reverted, result.skipped, result.gone)
      );
      await load();
      onReverted();
    } catch (reason) {
      toast.error((reason as Error).message);
    } finally {
      setBusy(false);
      setConfirm(null);
    }
  };

  const open = data?.runs.reduce(
    (sum, run) => sum + (run.changes - run.reverted - run.gone),
    0
  );

  return (
    <div className="flex flex-col gap-4">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <p className="text-sm text-muted-foreground">
          {data
            ? open === 0
              ? 'Nothing the automation wrote is left standing; every change was either never made or put back.'
              : `${open} ${open === 1 ? 'change written by the automation still stands' : 'changes written by the automation still stand'}. Put any of them back here.`
            : 'Loading…'}
        </p>
        <div className="flex flex-wrap gap-2">
          <Button
            variant="outline"
            size="sm"
            onClick={() => setShowReverted(current => !current)}
          >
            {showReverted ? 'Hide reverted' : 'Show reverted'}
          </Button>
          <Button
            variant="destructive"
            size="sm"
            disabled={busy || !open}
            onClick={() => setConfirm({ kind: 'all' })}
          >
            <Undo2Icon /> Undo all
          </Button>
        </div>
      </div>

      {error && <Callout tone="danger">{error}</Callout>}

      {data && data.runs.length > 0 && (
        <div className="overflow-x-auto rounded-2xl border border-border bg-card">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Run</TableHead>
                <TableHead>When</TableHead>
                <TableHead className="text-right">Changes</TableHead>
                <TableHead className="text-right">Put back</TableHead>
                <TableHead className="text-right" />
              </TableRow>
            </TableHeader>
            <TableBody>
              {data.runs.map(run => (
                <TableRow key={run.run_id}>
                  <TableCell title={run.run_id}>
                    <span className="font-medium text-foreground">
                      {sourceLabel(run.source)}
                    </span>
                    <span className="block text-xs text-muted-foreground">
                      {run.changes} {run.changes === 1 ? 'change' : 'changes'}
                    </span>
                  </TableCell>
                  <TableCell className="text-muted-foreground">
                    {when(run.ended_at)}
                  </TableCell>
                  <TableCell className="text-right tabular-nums">
                    {run.changes}
                  </TableCell>
                  <TableCell className="text-right tabular-nums">
                    {run.reverted}
                  </TableCell>
                  <TableCell className="text-right">
                    <Button
                      variant="ghost"
                      size="sm"
                      disabled={busy || run.reverted + run.gone >= run.changes}
                      onClick={() =>
                        setConfirm({ kind: 'run', runId: run.run_id })
                      }
                    >
                      <Undo2Icon /> Undo run
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      )}

      {data && data.items.length === 0 ? (
        <div className="rounded-xl border border-dashed border-border p-10 text-center text-sm text-muted-foreground">
          {showReverted
            ? 'The journal is empty.'
            : 'No change is waiting to be put back.'}
        </div>
      ) : (
        data && (
          <div className="overflow-x-auto rounded-2xl border border-border bg-card">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="hidden @5xl:table-cell">When</TableHead>
                  <TableHead className="hidden @4xl:table-cell">By</TableHead>
                  <TableHead>What</TableHead>
                  <TableHead>Field</TableHead>
                  <TableHead className="hidden @5xl:table-cell">
                    Before
                  </TableHead>
                  <TableHead>After</TableHead>
                  <TableHead className="text-right" />
                </TableRow>
              </TableHeader>
              <TableBody>
                {data.items.map((change: ISeoChange) => {
                  const excerpt = changeExcerpt(change.before, change.after);
                  return (
                    <TableRow
                      key={change.id}
                      className={classNames(change.reverted_at && 'opacity-60')}
                    >
                      <TableCell className="hidden whitespace-nowrap text-muted-foreground @5xl:table-cell">
                        {when(change.created_at)}
                      </TableCell>
                      <TableCell className="hidden @4xl:table-cell">
                        <Badge variant="secondary">
                          {sourceLabel(change.source)}
                        </Badge>
                      </TableCell>
                      <TableCell className="max-w-48 truncate">
                        {change.edit_link ? (
                          <a
                            href={change.edit_link}
                            target="_blank"
                            rel="noreferrer"
                            className="underline-offset-4 hover:underline"
                            title={change.object}
                          >
                            {change.object ||
                              `${change.object_type} #${change.object_id}`}
                          </a>
                        ) : (
                          change.object ||
                          `${change.object_type} #${change.object_id}`
                        )}
                      </TableCell>
                      <TableCell title={change.field}>
                        {fieldLabel(change.object_type, change.field)}
                      </TableCell>
                      {excerpt ? (
                        <>
                          <TableCell className="hidden max-w-80 @5xl:table-cell">
                            <ChangeText parts={excerpt} side="before" />
                          </TableCell>
                          <TableCell className="max-w-80">
                            <span className="@5xl:hidden">
                              <ChangeText parts={excerpt} side="both" />
                            </span>
                            <span className="hidden @5xl:inline">
                              <ChangeText parts={excerpt} side="after" />
                            </span>
                          </TableCell>
                        </>
                      ) : (
                        <>
                          <TableCell
                            className="hidden max-w-56 truncate text-muted-foreground @5xl:table-cell"
                            title={valueLabel(change.before)}
                          >
                            {valueLabel(change.before)}
                          </TableCell>
                          <TableCell
                            className="max-w-56 truncate"
                            title={valueLabel(change.after)}
                          >
                            {valueLabel(change.after)}
                          </TableCell>
                        </>
                      )}
                      <TableCell className="text-right">
                        {change.reverted_at ? (
                          <span className="text-xs text-muted-foreground">
                            Put back {when(change.reverted_at)}
                          </span>
                        ) : change.gone ? (
                          <span
                            className="text-xs text-muted-foreground"
                            title="The page was deleted after this change, so there is nothing to put back."
                          >
                            Deleted since
                          </span>
                        ) : (
                          <Button
                            variant="ghost"
                            size="sm"
                            disabled={busy}
                            onClick={() => revert({ ids: [change.id] })}
                          >
                            <Undo2Icon /> Undo
                          </Button>
                        )}
                      </TableCell>
                    </TableRow>
                  );
                })}
              </TableBody>
            </Table>
          </div>
        )
      )}

      <ConfirmDialog
        open={confirm !== null}
        onOpenChange={next => {
          if (!next) setConfirm(null);
        }}
        title={
          confirm?.kind === 'run'
            ? 'Undo this run?'
            : 'Undo everything the automation wrote?'
        }
        description={
          confirm?.kind === 'run'
            ? 'Every SEO field, image text, redirect and setting this run changed goes back to what it was before. A field someone edited since keeps that edit. The journal keeps the rows, marked as put back.'
            : 'Every change the automation wrote and that still stands goes back to what it was before: SEO fields, image texts, redirects it created, settings the checkup switched. A field someone edited after the automation keeps that edit.'
        }
        confirmLabel={confirm?.kind === 'run' ? 'Undo the run' : 'Undo all'}
        tone="destructive"
        busy={busy}
        onConfirm={() =>
          confirm?.kind === 'run'
            ? revert({ run_id: confirm.runId })
            : revert({ all: true })
        }
      />
    </div>
  );
};

/**
 * The site-wide checkup: what the plugin found across the site, grouped by
 * how much it matters, with the way to fix each item; and the journal of
 * what the automation wrote, with the way back.
 */
/** The local fixes that ask before they run, and what they say. */
const FIXES_TO_CONFIRM: Record<
  string,
  { title: string; description: string; confirm: string }
> = {
  blog_public: {
    title: 'Let search engines index the whole site?',
    description:
      'This unticks "Discourage search engines" in Settings → Reading, so Google and the others may crawl and index every page. Do it on the live site only: a staging or test copy indexed next to it competes with it as duplicate content. The Changes tab can put it back.',
    confirm: 'Yes, this is the live site',
  },
};

const SeoCheckup = (): JSX.Element => {
  const [params, setParams] = useSearchParams();
  const navigatePage = useNavigate();
  const tabParam = params.get('tab');
  const tab =
    tabParam === 'changes' || (tabParam === 'automation' && WITH_ACCOUNT)
      ? tabParam
      : 'checks';
  const group = params.get('group') ?? '';
  const [checkup, setCheckup] = useState<ISeoCheckup | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [running, setRunning] = useState(false);
  const [fixing, setFixing] = useState<string | null>(null);
  const [asking, setAsking] = useState<ISeoCheck | null>(null);
  const [scoring, setScoring] = useState(false);
  const [showPassed, setShowPassed] = useState(false);
  const copilot = useCopilot();
  const badges = useSeoBadges();

  const load = useCallback(
    async (refresh: boolean): Promise<void> => {
      setRunning(true);
      try {
        setCheckup(await fetchSeoCheckup(refresh));
        setError(null);
        if (refresh) badges.refresh();
      } catch (reason) {
        setError((reason as Error).message);
      } finally {
        setRunning(false);
      }
    },
    [badges]
  );

  const loadRef = useRef(load);
  loadRef.current = load;
  useEffect(() => {
    void loadRef.current(false);
  }, []);

  // A notice after a Bulk Edit links here with ?score=1: open the scoring
  // of the pages whose score went out of date, once.
  useEffect(() => {
    if (params.get('score') === '1') {
      setScoring(true);
      params.delete('score');
      setParams(params, { replace: true });
    }
  }, [params, setParams]);

  const fix = async (check: ISeoCheck, confirmed = false): Promise<void> => {
    // Scoring runs the editor's analysis here, page by page.
    if (check.fix?.type === 'score') {
      setScoring(true);
      return;
    }
    // A fix that opens the whole site to search engines is asked about
    // first: on a copy of the site it would get the copy indexed.
    if (!confirmed && FIXES_TO_CONFIRM[check.id]) {
      setAsking(check);
      return;
    }
    setFixing(check.id);
    try {
      const result = await fixSeoCheck(check.id);
      (result.fixed ? toast.success : toast.info)(result.message);
      setCheckup(result.checkup);
      badges.refresh();
    } catch (reason) {
      toast.error((reason as Error).message);
    } finally {
      setFixing(null);
    }
  };

  const setGroup = (next: string): void => {
    const query: Record<string, string> = {};
    if (tab === 'changes') query.tab = 'changes';
    if (next) query.group = next;
    setParams(query, { replace: true });
  };

  const askCopilot = (check: ISeoCheck): void => {
    copilot.requestCopilotTurn(copilotPrompt(check));
    toast.info('Handed to the Copilot; watch the panel on the right.');
  };

  const inGroup = (check: ISeoCheck): boolean =>
    group === '' || check.group === group;
  const failed = (checkup?.checks ?? []).filter(
    check => !check.passed && inGroup(check)
  );
  const passed = (checkup?.checks ?? []).filter(
    check => check.passed && inGroup(check)
  );
  const bySeverity = (severity: SeoCheckSeverity): ISeoCheck[] =>
    failed.filter(check => check.severity === severity);

  return (
    <SeoPage>
      <SeoPageHeader
        title={PAGES.checkup.title}
        description={PAGES.checkup.description}
        actions={
          <div className="flex flex-wrap gap-2">
            <Button
              variant="outline"
              size="sm"
              onClick={() => setScoring(true)}
            >
              <GaugeIcon /> Score pages
            </Button>
            <Button
              variant="outline"
              size="sm"
              disabled={running}
              onClick={() => load(true)}
            >
              <RefreshCwIcon className={running ? 'animate-spin' : undefined} />{' '}
              Run again
            </Button>
          </div>
        }
      />

      <Tabs
        value={tab}
        onValueChange={next => {
          const query: Record<string, string> = {};
          if (next === 'changes' || next === 'automation')
            query.tab = String(next);
          if (group) query.group = group;
          setParams(query, { replace: true });
        }}
      >
        <TabsList aria-label="Checkup">
          <TabsTrigger value="checks" className="px-3">
            Checks
          </TabsTrigger>
          {WITH_ACCOUNT && (
            <TabsTrigger value="automation" className="px-3">
              Automation
            </TabsTrigger>
          )}
          <TabsTrigger value="changes" className="px-3">
            Changes
          </TabsTrigger>
        </TabsList>
      </Tabs>

      {error && <Callout tone="danger">{error}</Callout>}

      {(checkup?.rivals ?? []).length > 0 && (
        <Callout tone="warning">
          <span>
            {checkup?.rivals?.join(', ')} prints this site&apos;s titles,
            descriptions, schema, sitemap and robots.txt. The checks read
            Recomaze&apos;s own fields, which stay empty until its data is
            imported: <strong>Import only</strong> copies it and keeps{' '}
            {checkup?.rivals?.join(', ')} in charge,{' '}
            <strong>Import &amp; switch</strong> hands the site to Recomaze.{' '}
            <button
              type="button"
              className="font-medium underline underline-offset-2"
              onClick={() => navigatePage('/seo?tab=import')}
            >
              Open Import &amp; export
            </button>
          </span>
        </Callout>
      )}

      {tab === 'automation' ? (
        <SeoMedicPanel
          checks={checkup?.checks ?? []}
          onWritten={() => {
            void load(true);
          }}
        />
      ) : tab === 'changes' ? (
        <ChangesPanel onReverted={() => void load(true)} />
      ) : (
        <>
          {checkup && (
            <div className="@container">
              <div className="grid gap-3 @lg:grid-cols-2 @2xl:grid-cols-4">
                <Card size="sm">
                  <CardContent>
                    <div className="text-xs font-medium text-muted-foreground">
                      Checkup score
                    </div>
                    <div className="mt-1 flex items-baseline gap-1">
                      <span
                        className={classNames(
                          'text-3xl font-semibold tabular-nums',
                          scoreTone(checkup.score)
                        )}
                      >
                        {checkup.score}
                      </span>
                      <span className="text-xs text-muted-foreground">
                        /100
                      </span>
                    </div>
                    <p className="mt-1 text-xs text-muted-foreground">
                      Last run {new Date(checkup.generated_at).toLocaleString()}
                      . Refreshed daily; the Recomaze agent reads it on every
                      run.
                    </p>
                  </CardContent>
                </Card>
                {(['error', 'warning', 'info'] as SeoCheckSeverity[]).map(
                  severity => {
                    const Icon = SEVERITY[severity].icon;
                    return (
                      <Card key={severity} size="sm">
                        <CardContent>
                          <div className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
                            <Icon
                              className={classNames(
                                'size-3.5',
                                SEVERITY[severity].tone
                              )}
                            />
                            {SEVERITY[severity].label}
                          </div>
                          <div className="mt-1 text-3xl font-semibold tabular-nums">
                            {checkup.counts[severity]}
                          </div>
                          <p className="mt-1 text-xs text-muted-foreground">
                            {SEVERITY_MEANING[severity]}
                          </p>
                        </CardContent>
                      </Card>
                    );
                  }
                )}
              </div>
            </div>
          )}

          {checkup && group && (
            <p className="text-sm text-muted-foreground">
              Showing the {checkupGroup(group)?.label ?? group} checks.{' '}
              <button
                type="button"
                onClick={() => setGroup('')}
                className="font-medium text-foreground underline-offset-4 hover:underline"
              >
                Show all
              </button>
            </p>
          )}

          {checkup && failed.length === 0 && (
            <Callout tone="success">
              {group
                ? `Every ${checkupGroup(group)?.label ?? group} check passes.`
                : 'Every check passes. The checkup runs again daily and after anything the agent writes.'}
            </Callout>
          )}

          {(['error', 'warning', 'info'] as SeoCheckSeverity[]).map(severity =>
            bySeverity(severity).length === 0 ? null : (
              <section key={severity} className="flex flex-col gap-3">
                <h2 className="text-base font-semibold text-foreground">
                  {SEVERITY[severity].label}{' '}
                  <span className="text-sm font-normal text-muted-foreground">
                    {bySeverity(severity).length}
                  </span>
                </h2>
                {bySeverity(severity).map(check => (
                  <CheckCard
                    key={check.id}
                    check={check}
                    busy={fixing === check.id}
                    onFix={fix}
                    onCopilot={askCopilot}
                  />
                ))}
              </section>
            )
          )}

          {passed.length > 0 && (
            <section className="flex flex-col gap-3">
              <button
                type="button"
                onClick={() => setShowPassed(current => !current)}
                className="inline-flex items-center gap-1.5 text-base font-semibold text-foreground"
              >
                {showPassed ? (
                  <ChevronDownIcon className="size-4" />
                ) : (
                  <ChevronRightIcon className="size-4" />
                )}
                Passed{' '}
                <span className="text-sm font-normal text-muted-foreground">
                  {passed.length}
                </span>
              </button>
              {showPassed &&
                passed.map(check => (
                  <CheckCard
                    key={check.id}
                    check={check}
                    busy={false}
                    onFix={fix}
                    onCopilot={askCopilot}
                  />
                ))}
            </section>
          )}

          {!checkup && !error && (
            <p className="text-sm text-muted-foreground">Running the checks…</p>
          )}
        </>
      )}
      <ScoreRunner
        open={scoring}
        onClose={() => setScoring(false)}
        onDone={() => void load(true)}
      />
      <ConfirmDialog
        open={asking !== null}
        onOpenChange={next => {
          if (!next) setAsking(null);
        }}
        title={asking ? (FIXES_TO_CONFIRM[asking.id]?.title ?? '') : ''}
        description={
          asking ? (FIXES_TO_CONFIRM[asking.id]?.description ?? '') : ''
        }
        confirmLabel={
          asking ? (FIXES_TO_CONFIRM[asking.id]?.confirm ?? 'Go on') : 'Go on'
        }
        onConfirm={() => {
          const check = asking;
          setAsking(null);
          if (check) void fix(check, true);
        }}
      />
    </SeoPage>
  );
};

export default SeoCheckup;