import { useEffect, useMemo, useState } from 'react';
import { CheckIcon, LoaderCircleIcon } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { toast } from 'sonner';

import { MODULE_COPY } from '../../components/seo/modules-grid';
import {
  ImageField,
  OptionRow,
  OptionSection,
} from '../../components/seo/option-row';
import { ROBOTS_PRESETS } from '../../components/seo/robots-crawlers';
import {
  SeoPage,
  SeoPageError,
  SeoPageHeader,
  SeoPageLoading,
} from '../../components/seo/seo-page';
import { Button } from '../../components/ui/button';
import { ErrorCallout } from '../../components/ui/callout';
import { Card, CardContent } from '../../components/ui/card';
import { Input } from '../../components/ui/input';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '../../components/ui/select';
import { Switch } from '../../components/ui/switch';
import { Textarea } from '../../components/ui/textarea';
import { useSeoBadges } from '../../context/seo-badges.context';
import { useQuietLauncher } from '../../lib/copilot/quiet-launcher';
import {
  matchingPreset,
  presetPolicy,
  type RobotsPreset,
} from '../../lib/seo/robots-policy';
import { withSuggestedModules } from '../../lib/seo/suggested-modules';
import { X_HANDLE_ERROR, xHandle } from '../../lib/seo/x-handle';
import { useSeoSettings } from '../../lib/seo/use-seo-settings';
import { classNames } from '../../lib/utils';
import type {
  ISeoFiles,
  ISeoImportSource,
  ISeoSettingsPatch,
  SeoImportPart,
} from '../../service/seo/seo.interface';
import {
  fetchSeoFiles,
  fetchSeoImportSources,
  runSeoImportBatch,
  saveSeoRobots,
  switchSeoPlugin,
  updateSeoSettings,
} from '../../service/seo/seo.service';

const STEPS = [
  {
    title: 'Bring your data over',
    description:
      'What another SEO plugin left in this database, copied into Recomaze before anything else.',
  },
  {
    title: 'What this site is',
    description:
      'The kind of site, and who search engines should credit: the organization or the person behind it, its logo and the picture its pages share with.',
  },
  {
    title: 'Where it is on social',
    description:
      'The profiles that belong to the site, for the knowledge graph and the social tags.',
  },
  {
    title: 'What may be indexed',
    description:
      'Which kinds of page and archive belong in search results, and whether the sitemap lists them.',
  },
  {
    title: 'What else to switch on',
    description:
      'The modules that write their own tables or watch the site, and how links to other sites behave; each can be changed later.',
  },
  {
    title: 'AI engines',
    description:
      'Which AI crawlers may read the site, and the one line llms.txt opens with, the way answer engines are told what the site is.',
  },
] as const;

/** The kinds of site the setup knows, and what each suggests for the steps after. */
const SITE_KINDS: {
  value: string;
  label: string;
  owner: 'organization' | 'person';
  modules: string[];
}[] = [
  {
    value: 'shop',
    label: 'An online shop',
    owner: 'organization',
    modules: ['redirects', 'monitor_404', 'image_seo'],
  },
  {
    value: 'business',
    label: 'A business or a service',
    owner: 'organization',
    modules: ['redirects', 'monitor_404', 'local_seo'],
  },
  {
    value: 'blog',
    label: 'A blog or a magazine',
    owner: 'organization',
    modules: ['redirects', 'image_seo'],
  },
  {
    value: 'personal',
    label: 'A personal site or portfolio',
    owner: 'person',
    modules: ['redirects'],
  },
];

const IMPORT_PARTS: SeoImportPart[] = [
  'settings',
  'posts',
  'terms',
  'users',
  'redirects',
  '404',
];

/** How each part reads in the line saying what an import brought over. */
const IMPORT_SUMMARY: { part: SeoImportPart; one: string; many: string }[] = [
  { part: 'posts', one: 'page with SEO fields', many: 'pages with SEO fields' },
  { part: 'terms', one: 'term', many: 'terms' },
  { part: 'users', one: 'author', many: 'authors' },
  { part: 'redirects', one: 'redirect', many: 'redirects' },
  { part: '404', one: '404 entry', many: '404 entries' },
];

/** The modules this step offers, in the order a new site wants them. */
const SETUP_MODULES = ['redirects', 'monitor_404', 'image_seo', 'local_seo'];

const Stepper = ({
  step,
  saved,
  onStep,
}: {
  step: number;
  /** The steps written to the settings; only those get a tick. */
  saved: ReadonlySet<number>;
  onStep: (step: number) => void;
}): JSX.Element => (
  // One row: with room, every step is named; narrower (the Copilot open),
  // only the current one, the others by number with their name on hover.
  <div className="@container/steps">
    <ol className="flex flex-wrap items-center gap-1">
      {STEPS.map((entry, index) => (
        <li key={entry.title}>
          <button
            type="button"
            onClick={() => onStep(index)}
            title={entry.title}
            aria-label={`Step ${index + 1}: ${entry.title}`}
            aria-current={index === step ? 'step' : undefined}
            className={classNames(
              'flex items-center gap-1.5 rounded-full px-2 py-1 text-xs font-medium transition-colors',
              index === step
                ? 'bg-primary/10 text-primary'
                : 'text-muted-foreground hover:text-foreground'
            )}
          >
            <span
              className={classNames(
                'flex size-5 shrink-0 items-center justify-center rounded-full text-[11px]',
                saved.has(index) && index !== step
                  ? 'bg-primary text-primary-foreground'
                  : index === step
                    ? 'border border-primary text-primary'
                    : 'border border-border'
              )}
            >
              {saved.has(index) && index !== step ? (
                <CheckIcon className="size-3" />
              ) : (
                index + 1
              )}
            </span>
            <span
              className={classNames(
                'whitespace-nowrap',
                index === step ? '' : 'hidden @4xl/steps:inline'
              )}
            >
              {entry.title}
            </span>
          </button>
        </li>
      ))}
    </ol>
  </div>
);

/**
 * Copies everything one other plugin left behind, part by part, and says
 * how far it got.
 */
const ImportRow = ({
  source,
  onDone,
}: {
  source: ISeoImportSource;
  onDone: () => Promise<void>;
}): JSX.Element => {
  const [running, setRunning] = useState(false);
  const [done, setDone] = useState<'imported' | 'switched' | null>(null);
  const [brought, setBrought] = useState<
    Partial<Record<SeoImportPart, number>>
  >({});
  // A switch put back says why at length: it stays on the page.
  const [failure, setFailure] = useState<string | null>(null);

  const counts = IMPORT_PARTS.map(part =>
    part === 'settings'
      ? Number(source.counts.settings)
      : part === '404'
        ? source.counts.logs_404
        : source.counts[part]
  );
  const total = counts.reduce((sum, count) => sum + count, 0);

  const run = async (andSwitch: boolean): Promise<void> => {
    setRunning(true);
    setFailure(null);
    try {
      for (const part of IMPORT_PARTS) {
        let offset = 0;
        for (;;) {
          const batch = await runSeoImportBatch(source.slug, part, offset);
          setBrought(current => ({ ...current, [part]: batch.total }));
          if (batch.done) {
            break;
          }
          offset = batch.next;
        }
      }
      if (andSwitch) {
        await switchSeoPlugin(source.slug);
      }
      // The next steps start from the settings as the import left them.
      await onDone();
      setDone(andSwitch ? 'switched' : 'imported');
      toast.success(
        andSwitch
          ? `Everything from ${source.name} is in Recomaze, and ${source.name} is deactivated`
          : `Everything from ${source.name} is in Recomaze`
      );
    } catch (error) {
      setFailure((error as Error).message);
    } finally {
      setRunning(false);
    }
  };

  const summary = IMPORT_SUMMARY.map(({ part, one, many }) => {
    const count = brought[part] ?? 0;
    return count > 0 ? `${count} ${count === 1 ? one : many}` : '';
  })
    .filter(Boolean)
    .join(', ');
  const state =
    done === 'switched'
      ? ` ${source.name} is switched off now; its data stays in the database.`
      : source.active
        ? ` ${source.name} is active and prints the head until it is switched off: “Import & switch” deactivates it once everything is in (its data stays).`
        : '';

  return (
    <OptionRow
      copy={{
        label: source.name,
        description: `${total} item${total === 1 ? '' : 's'} found: settings, the SEO fields of posts and terms, redirects and the 404 log, whatever it holds. Nothing is deleted on either side. Run again, it puts ${source.name}'s values back over anything edited here since; each run can be undone under Checkup → Changes.${state}`,
      }}
    >
      <div className="flex flex-wrap items-center gap-2">
        {source.active && !done && (
          <Button type="button" disabled={running} onClick={() => run(true)}>
            {running && <LoaderCircleIcon className="animate-spin" />}
            Import & switch
          </Button>
        )}
        <Button
          type="button"
          variant={source.active && !done ? 'outline' : 'default'}
          disabled={running || done !== null}
          onClick={() => run(false)}
        >
          {running && !source.active && (
            <LoaderCircleIcon className="animate-spin" />
          )}
          {done === 'switched'
            ? `Imported, ${source.name} switched off`
            : done
              ? 'Imported'
              : source.active
                ? 'Import only'
                : `Import from ${source.name}`}
        </Button>
      </div>
      {summary && (
        <p className="mt-2 text-sm text-muted-foreground">
          Brought over: {summary}.
        </p>
      )}
      {failure && <ErrorCallout message={failure} className="mt-2" />}
    </OptionRow>
  );
};

/**
 * What Google asks of a logo, checked on the picture itself: at least
 * 112 pixels each way, and close to square, since it is shown in one.
 *
 * @param props - Component props.
 * @param props.url - The logo's address.
 * @return The finding, or nothing when the logo is fine or not read yet.
 */
const LogoCheck = ({ url }: { url: string }): JSX.Element | null => {
  const [size, setSize] = useState<{ width: number; height: number } | null>(
    null
  );
  const [broken, setBroken] = useState(false);

  useEffect(() => {
    setSize(null);
    setBroken(false);
    if (url.trim() === '') {
      return undefined;
    }
    const image = new Image();
    image.onload = () =>
      setSize({ width: image.naturalWidth, height: image.naturalHeight });
    image.onerror = () => setBroken(true);
    image.src = url;
    return () => {
      image.onload = null;
      image.onerror = null;
    };
  }, [url]);

  if (broken) {
    return (
      <p className="text-xs text-amber-700 dark:text-amber-400">
        The image could not be loaded from this address.
      </p>
    );
  }
  if (!size) {
    return null;
  }
  const small = size.width < 112 || size.height < 112;
  const ratio = size.width / size.height;
  const square = ratio > 0.8 && ratio < 1.25;
  if (!small && square) {
    return (
      <p className="text-xs text-muted-foreground">
        {size.width} × {size.height} pixels: fine for Google.
      </p>
    );
  }
  return (
    <p className="text-xs text-amber-700 dark:text-amber-400">
      {size.width} × {size.height} pixels:{' '}
      {small
        ? 'Google wants at least 112 × 112.'
        : 'Google shows logos in a square, so a wide one is shrunk to fit; a square version reads better.'}
    </p>
  );
};

/**
 * The six steps a site goes through once: what to bring over, who it
 * belongs to, where it is on social, what search engines may index,
 * which modules run and what AI engines may read. Everything is written through the settings the pages
 * use, so a step can be changed later in its own page.
 */
const SeoSetup = (): JSX.Element => {
  const { settings, setSettings, error, reload } = useSeoSettings();
  const { refresh } = useSeoBadges();
  const navigate = useNavigate();
  const [step, setStep] = useState(0);
  const [saving, setSaving] = useState(false);
  const [sources, setSources] = useState<ISeoImportSource[] | null>(null);
  // Save and continue sits bottom-right, under the Copilot's bubble.
  useQuietLauncher();
  const [titles, setTitles] = useState<Record<string, unknown>>({});
  const [sitemapOn, setSitemapOn] = useState(true);
  const [modules, setModules] = useState<Record<string, boolean>>({});
  const [kind, setKind] = useState('');
  const [links, setLinks] = useState({
    nofollow_external: false,
    new_window_external: false,
  });
  const [llmsDescription, setLlmsDescription] = useState('');
  const [files, setFiles] = useState<ISeoFiles | null>(null);
  // Empty while the lists match no preset (set crawler by crawler).
  const [preset, setPreset] = useState<RobotsPreset | ''>('');
  const [presetPicked, setPresetPicked] = useState(false);
  const [saved, setSaved] = useState<ReadonlySet<number>>(new Set());
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    fetchSeoFiles()
      .then(read => {
        setFiles(read);
        setPreset(
          matchingPreset(read.robots.policy, read.robots.crawlers) ?? ''
        );
      })
      .catch(() => setFiles(null));
  }, []);

  useEffect(() => {
    fetchSeoImportSources()
      .then(data => setSources(data.sources.filter(source => source.available)))
      .catch(() => setSources([]));
  }, []);

  // The fields start from the settings once; a later save hands the
  // settings back, and reading them again would drop what was typed in
  // the steps not saved yet.
  useEffect(() => {
    if (!settings || loaded) {
      return;
    }
    setLoaded(true);
    setTitles(settings.titles as unknown as Record<string, unknown>);
    setSitemapOn(Boolean(settings.sitemap.enabled));
    setModules(
      Object.fromEntries(
        SETUP_MODULES.map(slug => [
          slug,
          Boolean(settings.modules[slug]?.active),
        ])
      )
    );
    setLinks({
      nofollow_external: Boolean(settings.general.nofollow_external),
      new_window_external: Boolean(settings.general.new_window_external),
    });
    setLlmsDescription(settings.llms.description ?? '');
  }, [settings, loaded]);

  const postTypes = useMemo(
    () => Object.entries(settings?.post_types ?? {}),
    [settings]
  );

  if (error) {
    return <SeoPageError message={error} />;
  }
  if (!settings) {
    return <SeoPageLoading />;
  }

  const text = (key: string): string => String(titles[key] ?? '');
  const flag = (key: string): boolean => Boolean(titles[key]);
  const set = (key: string, value: unknown): void =>
    setTitles(current => ({ ...current, [key]: value }));

  const patchOf = (index: number): ISeoSettingsPatch => {
    switch (index) {
      case 1:
        return {
          titles: {
            knowledge_graph_type: text('knowledge_graph_type'),
            knowledge_graph_name: text('knowledge_graph_name'),
            knowledge_graph_logo: text('knowledge_graph_logo'),
            og_default_image: text('og_default_image'),
          },
        };
      case 2:
        return {
          titles: {
            social_facebook_url: text('social_facebook_url'),
            social_twitter: text('social_twitter'),
            social_profiles: text('social_profiles'),
          },
        };
      case 3:
        return {
          titles: {
            ...Object.fromEntries(
              postTypes.map(([slug]) => [
                `pt_${slug}_noindex`,
                flag(`pt_${slug}_noindex`),
              ])
            ),
            ...Object.fromEntries(
              Object.keys(settings.taxonomies).map(slug => [
                `tax_${slug}_noindex`,
                flag(`tax_${slug}_noindex`),
              ])
            ),
            author_noindex: flag('author_noindex'),
            date_noindex: flag('date_noindex'),
            noindex_empty_archives: flag('noindex_empty_archives'),
          },
          sitemap: { enabled: sitemapOn },
          modules: { sitemap: sitemapOn },
        };
      case 4:
        return { modules, general: links };
      case 5:
        return { llms: { description: llmsDescription } };
      default:
        return {};
    }
  };

  const save = async (patch: ISeoSettingsPatch): Promise<boolean> => {
    setSaving(true);
    try {
      setSettings(await updateSeoSettings(patch));
      // The AI crawlers are the robots.txt editor's lists: written there,
      // with the text of the file as it is.
      if (patch.llms && files && presetPicked && preset !== '') {
        const policy = presetPolicy(preset, files.robots.crawlers);
        setFiles(await saveSeoRobots(files.robots.content, policy));
      }
      return true;
    } catch (reason) {
      toast.error((reason as Error).message);
      return false;
    } finally {
      setSaving(false);
    }
  };

  // A step is written before another is shown, whichever way the merchant
  // goes: Save and continue, Back, or a step of the bar. A step with nothing
  // to write (the import) is done once passed.
  const goTo = async (target: number): Promise<void> => {
    if (target === step) {
      return;
    }
    const patch = patchOf(step);
    if (Object.keys(patch).length > 0) {
      if (!(await save(patch))) {
        return;
      }
      setSaved(current => new Set(current).add(step));
    } else if (target > step) {
      setSaved(current => new Set(current).add(step));
    }
    setStep(target);
  };

  const next = (): Promise<void> => goTo(Math.min(STEPS.length - 1, step + 1));

  const finish = async (done: boolean): Promise<void> => {
    if (
      !(await save({ ...(done ? patchOf(step) : {}), setup: { done: true } }))
    ) {
      return;
    }
    refresh();
    toast.success(
      done
        ? 'SEO is set up. Every step lives in its own page now.'
        : 'Setup put aside'
    );
    navigate('/seo');
  };

  const body = (): JSX.Element => {
    switch (step) {
      case 0:
        return sources === null ? (
          <SeoPageLoading />
        ) : sources.length === 0 ? (
          <p className="py-5 text-sm text-muted-foreground">
            No Rank Math, Yoast, All in One SEO, SEOPress or Redirection data is
            in this database, so there is nothing to bring over. Straight on to
            the rest.
          </p>
        ) : (
          <OptionSection>
            {sources.map(source => (
              <ImportRow
                key={source.slug}
                source={source}
                onDone={async () => {
                  // The steps were filled from the settings before the
                  // import; filled again, so saving them keeps what it brought.
                  await reload();
                  setLoaded(false);
                  setSaved(current => new Set(current).add(0));
                }}
              />
            ))}
          </OptionSection>
        );

      case 1:
        return (
          <OptionSection>
            <OptionRow
              copy={{
                label: 'Kind of site',
                description:
                  'Picks who the site belongs to below and switches on the modules of step 5 that suit it; the ones already on stay on, and each can be changed.',
              }}
            >
              <Select
                items={SITE_KINDS.map(entry => ({
                  value: entry.value,
                  label: entry.label,
                }))}
                value={kind}
                onValueChange={value => {
                  const picked = SITE_KINDS.find(
                    entry => entry.value === String(value)
                  );
                  setKind(String(value));
                  if (picked) {
                    set('knowledge_graph_type', picked.owner);
                    setModules(current =>
                      withSuggestedModules(current, picked.modules)
                    );
                  }
                }}
              >
                <SelectTrigger
                  className="w-full max-w-xl"
                  aria-label="Kind of site"
                >
                  <SelectValue placeholder="Choose one" />
                </SelectTrigger>
                <SelectContent>
                  {SITE_KINDS.map(entry => (
                    <SelectItem key={entry.value} value={entry.value}>
                      {entry.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </OptionRow>
            <OptionRow
              copy={{
                label: 'This site belongs to',
                description:
                  'An organization gets an Organization in the schema graph, a person a Person. Google reads it to tell who is behind the site.',
              }}
            >
              <Select
                items={[
                  { value: 'organization', label: 'An organization' },
                  { value: 'person', label: 'A person' },
                ]}
                value={text('knowledge_graph_type') || 'organization'}
                onValueChange={value =>
                  set('knowledge_graph_type', String(value))
                }
              >
                <SelectTrigger className="w-full max-w-xl">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="organization">An organization</SelectItem>
                  <SelectItem value="person">A person</SelectItem>
                </SelectContent>
              </Select>
            </OptionRow>
            <OptionRow
              copy={{
                label: 'Name',
                description:
                  'The name to be known by. Empty, the site title is used.',
              }}
            >
              <Input
                value={text('knowledge_graph_name')}
                onChange={event =>
                  set('knowledge_graph_name', event.target.value)
                }
                className="max-w-xl"
              />
            </OptionRow>
            <OptionRow
              copy={{
                label: 'Logo',
                description:
                  'A square image of at least 112 × 112 pixels. It travels with every rich result.',
              }}
              htmlFor="setup-logo"
            >
              <ImageField
                id="setup-logo"
                title="Logo"
                value={text('knowledge_graph_logo')}
                onChange={url => set('knowledge_graph_logo', url)}
              />
              <LogoCheck url={text('knowledge_graph_logo')} />
            </OptionRow>
            <OptionRow
              copy={{
                label: 'Picture for shared links',
                description:
                  'What Facebook, LinkedIn and X show for a page that has no picture of its own: 1200 × 630 pixels reads well everywhere.',
              }}
              htmlFor="setup-share-image"
            >
              <ImageField
                id="setup-share-image"
                title="Picture for shared links"
                value={text('og_default_image')}
                onChange={url => set('og_default_image', url)}
              />
            </OptionRow>
          </OptionSection>
        );

      case 2:
        return (
          <OptionSection>
            <OptionRow
              copy={{
                label: 'Facebook page',
                description: 'The full URL of the page, not of a profile.',
              }}
            >
              <Input
                type="url"
                inputMode="url"
                placeholder="https://facebook.com/"
                value={text('social_facebook_url')}
                onChange={event =>
                  set('social_facebook_url', event.target.value)
                }
                className="max-w-xl"
              />
            </OptionRow>
            <OptionRow
              copy={{
                label: 'X (Twitter) handle',
                description:
                  'The username, or the address of the profile; it becomes the twitter:site tag of every page.',
              }}
            >
              <Input
                placeholder="e.g. yourstore"
                value={text('social_twitter')}
                onChange={event => set('social_twitter', event.target.value)}
                onBlur={() => {
                  const handle = xHandle(text('social_twitter'));
                  if (handle) {
                    set('social_twitter', handle);
                  }
                }}
                aria-invalid={xHandle(text('social_twitter')) === null}
                className="max-w-xl"
              />
              {xHandle(text('social_twitter')) === null && (
                <p className="mt-1 text-xs text-destructive">
                  {X_HANDLE_ERROR}
                </p>
              )}
            </OptionRow>
            <OptionRow
              copy={{
                label: 'Other profiles',
                description:
                  'One URL per line: LinkedIn, Instagram, YouTube, whatever else is really yours.',
              }}
            >
              <Textarea
                rows={4}
                value={text('social_profiles')}
                onChange={event => set('social_profiles', event.target.value)}
                className="max-w-xl"
              />
            </OptionRow>
          </OptionSection>
        );

      case 3:
        return (
          <OptionSection>
            {postTypes.map(([slug, type]) => (
              <OptionRow
                key={slug}
                copy={{
                  label: type.label,
                  description: `${type.count} published. Off, every one of them carries noindex and stays out of search results.`,
                }}
              >
                <div className="flex items-center gap-3">
                  <Switch
                    checked={!flag(`pt_${slug}_noindex`)}
                    onCheckedChange={value => set(`pt_${slug}_noindex`, !value)}
                  />
                  <span className="text-xs font-medium text-muted-foreground">
                    {flag(`pt_${slug}_noindex`) ? 'Not indexed' : 'Indexed'}
                  </span>
                </div>
              </OptionRow>
            ))}
            {Object.entries(settings.taxonomies).map(([slug, label]) => (
              <OptionRow
                key={slug}
                copy={{
                  label,
                  description: `The ${label.toLowerCase()} archive pages. Off, they carry noindex and stay out of search results.`,
                }}
              >
                <div className="flex items-center gap-3">
                  <Switch
                    checked={!flag(`tax_${slug}_noindex`)}
                    onCheckedChange={value =>
                      set(`tax_${slug}_noindex`, !value)
                    }
                    aria-label={label}
                  />
                  <span className="text-xs font-medium text-muted-foreground">
                    {flag(`tax_${slug}_noindex`) ? 'Not indexed' : 'Indexed'}
                  </span>
                </div>
              </OptionRow>
            ))}
            <OptionRow
              copy={{
                label: 'Empty archives',
                description:
                  'A category or tag with nothing in it yet. Keeping it out spares search engines an empty page.',
              }}
            >
              <div className="flex items-center gap-3">
                <Switch
                  checked={!flag('noindex_empty_archives')}
                  onCheckedChange={value =>
                    set('noindex_empty_archives', !value)
                  }
                  aria-label="Empty archives"
                />
                <span className="text-xs font-medium text-muted-foreground">
                  {flag('noindex_empty_archives') ? 'Not indexed' : 'Indexed'}
                </span>
              </div>
            </OptionRow>
            <OptionRow
              copy={{
                label: 'Author archives',
                description:
                  'On a site with one author they repeat the blog page, so keep them out; with several, each can rank for its author’s name.',
              }}
            >
              <div className="flex items-center gap-3">
                <Switch
                  checked={!flag('author_noindex')}
                  onCheckedChange={value => set('author_noindex', !value)}
                />
                <span className="text-xs font-medium text-muted-foreground">
                  {flag('author_noindex') ? 'Not indexed' : 'Indexed'}
                </span>
              </div>
            </OptionRow>
            <OptionRow
              copy={{
                label: 'Date archives',
                description:
                  'Pages listing everything published in a month rarely answer anything on their own.',
              }}
            >
              <div className="flex items-center gap-3">
                <Switch
                  checked={!flag('date_noindex')}
                  onCheckedChange={value => set('date_noindex', !value)}
                />
                <span className="text-xs font-medium text-muted-foreground">
                  {flag('date_noindex') ? 'Not indexed' : 'Indexed'}
                </span>
              </div>
            </OptionRow>
            <OptionRow
              copy={{
                label: 'XML sitemap',
                description:
                  'The list of addresses search engines read first, at /sitemap_index.xml. What is not indexed is left out of it.',
              }}
            >
              <div className="flex items-center gap-3">
                <Switch checked={sitemapOn} onCheckedChange={setSitemapOn} />
                <span className="text-xs font-medium text-muted-foreground">
                  {sitemapOn ? 'On' : 'Off'}
                </span>
              </div>
            </OptionRow>
          </OptionSection>
        );

      case 5:
        return (
          <OptionSection>
            <OptionRow
              copy={{
                label: 'AI crawlers',
                description: !files
                  ? 'Reading robots.txt…'
                  : preset === ''
                    ? 'Set crawler by crawler in the robots.txt editor. Picking one here replaces those choices.'
                    : preset === 'text'
                      ? 'No AI crawler is named by the settings; each follows the rules written in robots.txt.'
                      : (ROBOTS_PRESETS.find(item => item.value === preset)
                          ?.hint ?? ''),
                tip: 'Written into robots.txt, where General settings → Edit robots.txt lets each crawler be set on its own.',
              }}
            >
              <Select
                items={ROBOTS_PRESETS.map(item => ({
                  value: item.value,
                  label: item.label,
                }))}
                value={preset}
                disabled={!files}
                onValueChange={value => {
                  setPreset(value as RobotsPreset);
                  setPresetPicked(true);
                }}
              >
                <SelectTrigger
                  className="w-full max-w-xl"
                  aria-label="AI crawlers"
                >
                  <SelectValue placeholder="Crawler by crawler" />
                </SelectTrigger>
                <SelectContent>
                  {ROBOTS_PRESETS.map(item => (
                    <SelectItem key={item.value} value={item.value}>
                      {item.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </OptionRow>
            <OptionRow
              copy={{
                label: 'What the site is, in one line',
                description:
                  'The summary llms.txt opens with. Empty, it takes the description of the organization or the site’s tagline.',
              }}
            >
              <Textarea
                rows={2}
                value={llmsDescription}
                placeholder="e.g. Handmade hoodies and the stories behind them."
                onChange={event => setLlmsDescription(event.target.value)}
                className="max-w-xl"
              />
            </OptionRow>
          </OptionSection>
        );

      default:
        return (
          <OptionSection>
            {[
              {
                key: 'nofollow_external' as const,
                label: 'Nofollow links to other sites',
                description:
                  'Tells search engines not to pass this site’s standing to the sites it links to. Most sites leave it off.',
              },
              {
                key: 'new_window_external' as const,
                label: 'Open links to other sites in a new tab',
                description:
                  'Readers keep this site open behind the one they follow a link to.',
              },
            ].map(tweak => (
              <OptionRow
                key={tweak.key}
                copy={{ label: tweak.label, description: tweak.description }}
              >
                <div className="flex items-center gap-3">
                  <Switch
                    checked={links[tweak.key]}
                    onCheckedChange={value =>
                      setLinks(current => ({ ...current, [tweak.key]: value }))
                    }
                    aria-label={tweak.label}
                  />
                  <span className="text-xs font-medium text-muted-foreground">
                    {links[tweak.key] ? 'On' : 'Off'}
                  </span>
                </div>
              </OptionRow>
            ))}
            {SETUP_MODULES.filter(slug => settings.modules[slug]).map(slug => (
              <OptionRow
                key={slug}
                copy={{
                  label: settings.modules[slug].label,
                  description: MODULE_COPY[slug] ?? '',
                }}
              >
                <div className="flex items-center gap-3">
                  <Switch
                    checked={Boolean(modules[slug])}
                    onCheckedChange={value =>
                      setModules(current => ({ ...current, [slug]: value }))
                    }
                  />
                  <span className="text-xs font-medium text-muted-foreground">
                    {modules[slug] ? 'On' : 'Off'}
                  </span>
                </div>
              </OptionRow>
            ))}
          </OptionSection>
        );
    }
  };

  const last = step === STEPS.length - 1;

  return (
    <SeoPage>
      <SeoPageHeader
        title="Set SEO up"
        description="Six steps over what a site has to say once. Everything here is a setting of its own page, so nothing is locked in."
        actions={
          <Button
            type="button"
            variant="ghost"
            size="sm"
            disabled={saving}
            onClick={() => finish(false)}
          >
            Skip for now
          </Button>
        }
      />

      <Stepper step={step} saved={saved} onStep={index => goTo(index)} />

      <Card>
        <CardContent className="@container/section flex flex-col gap-1 pt-5">
          <div className="flex flex-col gap-1">
            <h2 className="text-base font-semibold text-foreground">
              {STEPS[step].title}
            </h2>
            <p className="text-sm text-muted-foreground">
              {STEPS[step].description}
            </p>
          </div>
          {body()}
          <div className="flex items-center justify-between gap-3 border-t border-border pt-4">
            <Button
              type="button"
              variant="outline"
              disabled={step === 0 || saving}
              onClick={() => goTo(Math.max(0, step - 1))}
            >
              Back
            </Button>
            <Button
              type="button"
              disabled={saving}
              onClick={() => (last ? finish(true) : next())}
            >
              {saving && <LoaderCircleIcon className="animate-spin" />}
              {last ? 'Finish' : 'Save and continue'}
            </Button>
          </div>
        </CardContent>
      </Card>
    </SeoPage>
  );
};

export default SeoSetup;