import { useEffect, useState } from 'react';
import {
  CopyIcon,
  ExternalLinkIcon,
  HistoryIcon,
  RotateCcwIcon,
} from 'lucide-react';
import { toast } from 'sonner';

import { OptionRow, OptionTip } from '../../components/seo/option-row';
import { SeoPageError, SeoPageLoading } from '../../components/seo/seo-page';
import { Button } from '../../components/ui/button';
import { Callout } from '../../components/ui/callout';
import { Checkbox } from '../../components/ui/checkbox';
import ConfirmDialog from '../../components/ui/confirm-dialog';
import { Textarea } from '../../components/ui/textarea';
import { RobotsCrawlers } from '../../components/seo/robots-crawlers';
import { samePolicy, shutOutSearchEngines } from '../../lib/seo/robots-policy';
import type {
  ISeoFiles,
  ISeoHtaccessCheck,
  ISeoRobotsPolicy,
  ISeoRobotsPreview,
} from '../../service/seo/seo.interface';
import {
  checkSeoHtaccess,
  fetchSeoFiles,
  previewSeoRobots,
  restoreSeoHtaccess,
  saveSeoHtaccess,
  saveSeoRobots,
} from '../../service/seo/seo.service';

const NO_POLICY: ISeoRobotsPolicy = { allow: [], block: [] };

export interface SeoFilesState {
  files: ISeoFiles | null;
  setFiles: (files: ISeoFiles) => void;
  error: string;
}

interface EditorProps extends SeoFilesState {
  /** Told when the editor starts or stops holding unsaved changes. */
  onDirtyChange?: (dirty: boolean) => void;
}

/**
 * Both files, read once for the page that holds the two editors, so each
 * stays mounted with its draft while another section is on screen.
 *
 * @returns {SeoFilesState} The files, their setter and the load error.
 */
export const useSeoFiles = (): SeoFilesState => {
  const [files, setFiles] = useState<ISeoFiles | null>(null);
  const [error, setError] = useState('');
  useEffect(() => {
    fetchSeoFiles()
      .then(setFiles)
      .catch(reason => setError((reason as Error).message));
  }, []);
  return { files, setFiles, error };
};

const formatDate = (iso: string): string =>
  new Date(iso).toLocaleString(undefined, {
    dateStyle: 'medium',
    timeStyle: 'short',
  });

/**
 * The robots.txt editor: which AI crawlers may read the site, the text of
 * the file (empty means the default one) and the file crawlers would get,
 * previewed from the unsaved changes before they are saved, with what a
 * file written by hand drops from the default one.
 */
export const SeoRobotsEditor = ({
  files,
  setFiles,
  error,
  onDirtyChange,
}: EditorProps): JSX.Element => {
  const [draft, setDraft] = useState<string | null>(null);
  const [policyDraft, setPolicyDraft] = useState<ISeoRobotsPolicy | null>(null);
  const [preview, setPreview] = useState<ISeoRobotsPreview | null>(null);
  const [saving, setSaving] = useState(false);
  /** The search engines the draft would shut out, while that is asked. */
  const [shutOut, setShutOut] = useState<string[] | null>(null);

  const robots = files?.robots;
  const value = draft ?? robots?.content ?? '';
  const policy = policyDraft ?? robots?.policy ?? NO_POLICY;
  const dirty =
    !!robots &&
    ((draft !== null && draft !== robots.content) ||
      (policyDraft !== null && !samePolicy(policyDraft, robots.policy)));

  useEffect(() => {
    onDirtyChange?.(dirty);
  }, [dirty, onDirtyChange]);

  useEffect(() => {
    if (!dirty) {
      setPreview(null);
      return undefined;
    }
    const timer = window.setTimeout(() => {
      previewSeoRobots(value, policy)
        .then(setPreview)
        .catch(() => setPreview(null));
    }, 400);
    return () => window.clearTimeout(timer);
  }, [dirty, value, policy]);

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

  const shown = preview ?? {
    served: robots.served,
    crawlers: robots.crawlers,
    warnings: robots.warnings,
    lost: robots.lost,
  };

  const save = async (content: string, confirmed = false): Promise<void> => {
    setSaving(true);
    try {
      if (!confirmed) {
        const next = preview ?? (await previewSeoRobots(content, policy));
        const lost = shutOutSearchEngines(robots.crawlers, next.crawlers);
        if (lost.length > 0) {
          setShutOut(lost);
          return;
        }
      }
      setShutOut(null);
      setFiles(await saveSeoRobots(content, policy));
      setDraft(null);
      setPolicyDraft(null);
      toast.success(
        content.trim() === '' && draft !== null
          ? 'robots.txt back to the default text'
          : 'robots.txt saved'
      );
    } catch (reason) {
      toast.error((reason as Error).message);
    } finally {
      setSaving(false);
    }
  };

  const discard = (): void => {
    setDraft(null);
    setPolicyDraft(null);
  };

  return (
    <div className="flex flex-col gap-4">
      {(robots.rivals ?? []).length > 0 && (
        <Callout tone="warning">
          {(robots.rivals ?? []).join(', ')} writes robots.txt while it is
          active, so what is saved here reaches crawlers only once Recomaze
          takes over (SEO → Dashboard → Import & switch). Until then, change
          robots.txt in {(robots.rivals ?? []).join(', ')}.
        </Callout>
      )}
      {robots.physical && (
        <Callout tone="warning">
          A robots.txt file exists on the server and is served instead of this
          content, so neither the text nor the AI crawler choices reach
          crawlers. Copy what it needs here, then delete or rename the file.
        </Callout>
      )}
      {!robots.public && (
        <Callout tone="warning">
          Settings → Reading asks search engines not to index this site, so the
          default file blocks everything and the AI crawler choices are not
          applied. Change that setting first.
        </Callout>
      )}
      <OptionRow
        copy={{
          label: 'AI crawlers',
          description:
            'Who may read the site to answer questions and to train models. The choices are written into robots.txt over the text below, in groups of their own that keep the same folders out as for every crawler.',
          tip: 'GPTBot, OAI-SearchBot, ChatGPT-User, ClaudeBot, Claude-SearchBot, PerplexityBot, Amzn-SearchBot, Amazonbot, Google-Extended, Applebot-Extended, CCBot and the rest. robots.txt is a request the big AI companies obey; a few crawlers ignore it. A CDN or firewall can also turn AI crawlers away before they read it (Cloudflare: Security → Bots); the Checkup tests that.',
        }}
      >
        <RobotsCrawlers
          crawlers={shown.crawlers}
          policy={policy}
          onChange={setPolicyDraft}
          disabled={robots.physical || !robots.public || saving}
        />
      </OptionRow>
      <OptionRow
        copy={{
          label: 'robots.txt',
          description:
            'Empty, the site serves its default file, shown in grey: what WordPress keeps out (wp-admin), the rules plugins add (WooCommerce keeps its cart links and upload folders out) and the sitemap line. Text written here replaces the default completely, so start from it and change what you need.',
          tip: 'Each group starts with User-agent, then Allow and Disallow paths. A wrong Disallow can hide the whole site from Google, so check the file below before saving.',
        }}
        htmlFor="seo-robots"
      >
        <Textarea
          id="seo-robots"
          rows={10}
          spellCheck={false}
          className="font-mono text-xs"
          value={value}
          placeholder={
            'Empty: the default file is served, as What crawlers get shows below. Type rules here to replace it, or start from the default file.'
          }
          disabled={robots.physical}
          onChange={event => setDraft(event.target.value)}
        />
        {shown.lost.length > 0 && (
          <ul className="flex flex-col gap-0.5 text-xs text-amber-700 dark:text-amber-400">
            {shown.lost.map(loss => (
              <li key={loss.kind}>{loss.text}</li>
            ))}
          </ul>
        )}
        {shown.warnings.length > 0 && (
          <ul className="flex flex-col gap-0.5 text-xs text-amber-700 dark:text-amber-400">
            {shown.warnings.map(warning => (
              <li key={warning.line}>
                Line {warning.line} is a rule crawlers do not know, so they skip
                it: {warning.text}
              </li>
            ))}
          </ul>
        )}
      </OptionRow>
      <OptionRow
        copy={{
          label: 'What crawlers get',
          description: dirty
            ? 'The file your unsaved changes would serve.'
            : `The file served at ${robots.url.replace(/^https?:\/\//, '')} now.`,
        }}
      >
        <pre className="max-h-72 overflow-auto rounded-lg border border-border bg-muted/40 p-3 font-mono text-xs leading-relaxed whitespace-pre-wrap text-foreground">
          {shown.served}
        </pre>
      </OptionRow>
      <div className="flex flex-wrap items-center gap-2">
        <Button
          type="button"
          size="sm"
          disabled={!dirty || saving || robots.physical}
          onClick={() => save(value)}
        >
          Save robots.txt
        </Button>
        {dirty && (
          <Button
            type="button"
            variant="ghost"
            size="sm"
            disabled={saving}
            onClick={discard}
          >
            Discard changes
          </Button>
        )}
        {value === '' ? (
          <Button
            type="button"
            variant="outline"
            size="sm"
            disabled={saving || robots.physical}
            onClick={() => setDraft(robots.default)}
          >
            <CopyIcon />
            Start from the default file
          </Button>
        ) : (
          <Button
            type="button"
            variant="outline"
            size="sm"
            disabled={saving || robots.physical}
            onClick={() => setDraft('')}
          >
            <RotateCcwIcon />
            Back to the default file
          </Button>
        )}
        <Button
          nativeButton={false}
          type="button"
          variant="link"
          size="sm"
          className="ml-auto"
          render={<a href={robots.url} target="_blank" rel="noreferrer" />}
        >
          Open {robots.url.replace(/^https?:\/\//, '')}
          <ExternalLinkIcon />
        </Button>
      </div>
      {robots.versions.length > 0 && (
        <OptionRow
          copy={{
            label: 'Earlier versions',
            description:
              'The last five robots.txt saved before this one, with their AI crawler choices, newest first. Restore puts one in the editor; Save robots.txt makes it the file again.',
            tip: 'Every save keeps the file it replaces, so a change that shut crawlers out can be undone. What crawlers would get shows above before anything is saved.',
          }}
        >
          <ul className="flex flex-col divide-y divide-border rounded-lg border border-border">
            {robots.versions.map(version => (
              <li
                key={version.saved_at}
                className="flex flex-wrap items-center justify-between gap-2 px-3 py-2"
              >
                <span className="text-xs text-muted-foreground">
                  Replaced {formatDate(version.saved_at)}
                  {version.user ? ` by ${version.user}` : ''} ·{' '}
                  {version.content === ''
                    ? 'the default file'
                    : `${version.content.split('\n').length} lines`}
                </span>
                <Button
                  type="button"
                  variant="outline"
                  size="sm"
                  disabled={saving || robots.physical}
                  onClick={() => {
                    setDraft(version.content);
                    setPolicyDraft(version.policy);
                    toast.info(
                      'That version is in the editor; save robots.txt to put it back.'
                    );
                  }}
                >
                  <HistoryIcon />
                  Restore
                </Button>
              </li>
            ))}
          </ul>
        </OptionRow>
      )}
      <ConfirmDialog
        open={shutOut !== null}
        onOpenChange={open => !open && setShutOut(null)}
        title="Keep search engines out of the site?"
        description={`With this file ${(shutOut ?? []).join(', ')} may no longer read the site, and its pages drop out of their results. Save it only if that is what you want.`}
        confirmLabel="Save anyway"
        tone="destructive"
        busy={saving}
        onConfirm={() => save(value, true)}
      />
    </div>
  );
};

/**
 * The .htaccess editor: the file as it is on disk, read while it is typed
 * (what a save would refuse, directives Apache may not know), a backup of
 * the previous version on every write, the site asked after it (a 5xx
 * puts the previous file back) and the way back.
 */
export const SeoHtaccessEditor = ({
  files,
  setFiles,
  error,
  onDirtyChange,
}: EditorProps): JSX.Element => {
  const [draft, setDraft] = useState<string | null>(null);
  const [understood, setUnderstood] = useState(false);
  const [busy, setBusy] = useState(false);
  const [check, setCheck] = useState<ISeoHtaccessCheck | null>(null);
  const dirty = !!files && draft !== null && draft !== files.htaccess.content;

  useEffect(() => {
    onDirtyChange?.(dirty);
  }, [dirty, onDirtyChange]);

  useEffect(() => {
    if (!dirty || draft === null) {
      setCheck(null);
      return undefined;
    }
    const timer = window.setTimeout(() => {
      checkSeoHtaccess(draft)
        .then(setCheck)
        .catch(() => setCheck(null));
    }, 400);
    return () => window.clearTimeout(timer);
  }, [dirty, draft]);

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

  const { htaccess } = files;
  const value = draft ?? htaccess.content;
  const locked = !htaccess.allowed || !htaccess.writable;

  const run = async (
    action: () => Promise<ISeoFiles>,
    done: string
  ): Promise<void> => {
    setBusy(true);
    try {
      const next = await action();
      setFiles(next);
      setDraft(null);
      if (next.htaccess.notice) {
        toast.warning(next.htaccess.notice);
      } else {
        toast.success(done);
      }
    } catch (reason) {
      toast.error((reason as Error).message);
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="flex flex-col gap-4">
      {!htaccess.supported && (
        <Callout tone="info">
          This server does not look like Apache, so .htaccess is probably
          ignored. Nginx and others take their rules from their own
          configuration; the Redirects page prints those.
        </Callout>
      )}
      {!htaccess.allowed && (
        <Callout tone="warning">
          wp-config.php sets DISALLOW_FILE_EDIT or DISALLOW_FILE_MODS, so files
          cannot be edited from the dashboard. The content is shown read-only.
        </Callout>
      )}
      {htaccess.allowed && !htaccess.writable && (
        <Callout tone="warning">
          {htaccess.exists
            ? 'The web server cannot write to .htaccess. Change the file permissions to edit it here.'
            : 'There is no .htaccess and the site root is not writable, so one cannot be created here.'}
        </Callout>
      )}
      <OptionRow
        copy={{
          label: '.htaccess',
          description: `The Apache configuration at ${htaccess.path}. Before every save the current file is copied next to it and the new content is read for unclosed sections, lines that are not directives and PHP; directive names Apache may not know are flagged. After saving, the site is asked for its home page and admin-ajax.php, and a 5xx puts the previous file back.`,
          tip: 'A broken .htaccess takes the whole site down with a 500 error. Reading the file catches common slips, not every mistake (a wrong flag or pattern passes it); the request after saving is the safety net, and the backups below are the way back when the site cannot be asked.',
        }}
        htmlFor="seo-htaccess"
      >
        <Textarea
          id="seo-htaccess"
          rows={14}
          spellCheck={false}
          className="font-mono text-xs"
          value={value}
          readOnly={locked}
          onChange={event => setDraft(event.target.value)}
        />
        {check?.error && (
          <p className="text-xs text-destructive">
            Saving is refused: {check.error}
          </p>
        )}
        {(check?.warnings ?? (dirty ? [] : htaccess.warnings)).length > 0 && (
          <ul className="flex flex-col gap-0.5 text-xs text-amber-700">
            {(check?.warnings ?? htaccess.warnings).map(warning => (
              <li key={warning.line}>
                Line {warning.line} is a directive Apache may not know here: a
                typo takes every page down with a 500, a real one may need a
                module the server lacks: {warning.text}
              </li>
            ))}
          </ul>
        )}
        {!locked && (
          <label className="flex cursor-pointer items-center gap-2 text-sm">
            <Checkbox
              checked={understood}
              onCheckedChange={checked => setUnderstood(Boolean(checked))}
            />
            I understand a wrong .htaccess can take the site offline, and I know
            where the backups are.
            <OptionTip>
              Backups sit next to the file, named .htaccess.recomaze-date. The
              last five are kept; restore one below or copy it over by FTP.
            </OptionTip>
          </label>
        )}
        <div className="flex flex-wrap items-center gap-2">
          <Button
            type="button"
            size="sm"
            disabled={locked || !dirty || !understood || busy || !!check?.error}
            onClick={() =>
              run(
                () => saveSeoHtaccess(value),
                '.htaccess saved; the site still answers'
              )
            }
          >
            Save .htaccess
          </Button>
          {dirty && (
            <Button
              type="button"
              variant="ghost"
              size="sm"
              disabled={busy}
              onClick={() => setDraft(null)}
            >
              Discard changes
            </Button>
          )}
        </div>
      </OptionRow>
      {htaccess.backups.length > 0 && (
        <OptionRow
          copy={{
            label: 'Backups',
            description:
              'The previous versions, newest first. Restoring one backs up the current file too.',
          }}
        >
          <ul className="divide-y divide-border rounded-lg border border-border">
            {htaccess.backups.map(backup => (
              <li
                key={backup.name}
                className="flex flex-wrap items-center gap-x-4 gap-y-1 px-3 py-2 text-sm"
              >
                <HistoryIcon className="size-4 text-muted-foreground" />
                <span className="font-mono text-xs">{backup.name}</span>
                <span className="text-xs text-muted-foreground">
                  {formatDate(backup.date)} · {backup.size} bytes
                </span>
                <Button
                  type="button"
                  variant="outline"
                  size="xs"
                  className="ml-auto"
                  disabled={locked || busy}
                  onClick={() =>
                    run(
                      () => restoreSeoHtaccess(backup.name),
                      `${backup.name} restored`
                    )
                  }
                >
                  Restore
                </Button>
              </li>
            ))}
          </ul>
        </OptionRow>
      )}
    </div>
  );
};