import { useEffect, useState } from 'react';
import { ReplaceIcon, SparklesIcon, WandSparklesIcon } from 'lucide-react';
import { toast } from 'sonner';

import { OptionRow } from '../../components/seo/option-row';
import { Button } from '../../components/ui/button';
import { Checkbox } from '../../components/ui/checkbox';
import ConfirmDialog from '../../components/ui/confirm-dialog';
import { Input } from '../../components/ui/input';
import { Label } from '../../components/ui/label';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '../../components/ui/select';
import { useAppStateContext } from '../../context/user.data.context';
import { recomaze_ai_personalization_env } from '../../env';
import { canUseAi, NO_AI_ACCESS } from '../../lib/seo/ai-access';
import { getCreditBalance } from '../../service/credits/credits.service';
import type { ISeoImageStats } from '../../service/seo/seo.interface';
import {
  fetchSeoImageStats,
  fillSeoImageAlt,
  replaceSeoImageText,
  writeSeoImageAltWithAi,
} from '../../service/seo/seo.service';

/** What one run takes, and what the agent charges per image. */
const AI_BATCH = 20;
const AI_CREDITS_PER_IMAGE = 2;

const FIELDS = [
  { value: 'alt', label: 'Alt text' },
  { value: 'title', label: 'Title' },
  { value: 'caption', label: 'Caption' },
];

/** The media library side of Image SEO: how it stands, fill the alts, find and replace. */
const SeoImagesTools = (): JSX.Element => {
  const [stats, setStats] = useState<ISeoImageStats | null>(null);
  const [field, setField] = useState<'alt' | 'title' | 'caption'>('alt');
  const [find, setFind] = useState('');
  const [replace, setReplace] = useState('');
  const [busy, setBusy] = useState(false);
  const [preview, setPreview] = useState<number | null>(null);
  const [matchCase, setMatchCase] = useState(false);
  const [samples, setSamples] = useState<
    { id: number; before: string; after: string }[]
  >([]);
  const [written, setWritten] = useState<
    { id: number; alt: string; source: string }[]
  >([]);
  const { token, clientId } = useAppStateContext();
  const mayUseAi = canUseAi(recomaze_ai_personalization_env?.seo_caps);
  /** The credits left while asking to spend them; undefined when unknown. */
  const [asking, setAsking] = useState<{ balance?: number } | null>(null);

  useEffect(() => {
    fetchSeoImageStats()
      .then(setStats)
      .catch(reason => toast.error((reason as Error).message));
  }, []);

  const fill = async (): Promise<void> => {
    setBusy(true);
    try {
      const result = await fillSeoImageAlt();
      setStats(result);
      toast.success(
        `${result.changed} image${result.changed === 1 ? '' : 's'} got alt text${
          result.missing_alt > 0
            ? `, ${result.missing_alt} left: run it again`
            : ''
        }`
      );
    } catch (reason) {
      toast.error((reason as Error).message);
    } finally {
      setBusy(false);
    }
  };

  // One click wrote twenty alt texts and spent their credits: the count,
  // the cost and what is left are said first.
  const askWithAi = async (): Promise<void> => {
    setBusy(true);
    const balance = token
      ? (await getCreditBalance(token, clientId)).balance
      : undefined;
    setBusy(false);
    setAsking({ balance });
  };

  const writeWithAi = async (): Promise<void> => {
    setAsking(null);
    setBusy(true);
    try {
      const result = await writeSeoImageAltWithAi(AI_BATCH);
      setStats(result);
      setWritten(result.items.slice(0, 3));
      toast.success(
        `${result.written} image${result.written === 1 ? '' : 's'} described` +
          (result.credits > 0 ? `, ${result.credits} credits` : '') +
          (result.missing_alt > 0
            ? `. ${result.missing_alt} left: run it again`
            : '')
      );
    } catch (reason) {
      toast.error((reason as Error).message);
    } finally {
      setBusy(false);
    }
  };

  const runReplace = async (dryRun: boolean): Promise<void> => {
    setBusy(true);
    try {
      const result = await replaceSeoImageText({
        field,
        find,
        replace,
        dry_run: dryRun,
        match_case: matchCase,
      });
      setStats(result);
      if (dryRun) {
        setPreview(result.matched);
        setSamples(result.samples);
      } else {
        setPreview(null);
        setSamples([]);
        toast.success(
          `${result.matched} image${result.matched === 1 ? '' : 's'} changed. SEO → Checkup → Changes gives it back.`
        );
      }
    } catch (reason) {
      toast.error((reason as Error).message);
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="flex flex-col divide-y divide-border px-6">
      <OptionRow
        copy={{
          label: 'Media library',
          description:
            'Images in the library, and how many still lack alt text or a title.',
          tip: 'The display-time options above patch what is printed; this writes to the library, so the alt text also travels to sitemaps, feeds and other plugins.',
        }}
      >
        {stats ? (
          <div className="flex flex-col gap-2">
            <p className="text-sm">
              <span className="font-semibold tabular-nums">{stats.images}</span>{' '}
              images ·{' '}
              <span className="font-semibold tabular-nums">
                {stats.missing_alt}
              </span>{' '}
              without alt text ·{' '}
              <span className="font-semibold tabular-nums">
                {stats.missing_title}
              </span>{' '}
              without a title
            </p>
            <div className="flex flex-wrap gap-2">
              <Button
                size="sm"
                variant="outline"
                disabled={busy || stats.missing_alt === 0}
                onClick={fill}
              >
                <WandSparklesIcon /> Fill missing alt text from the format
              </Button>
              <Button
                size="sm"
                disabled={busy || stats.missing_alt === 0 || !mayUseAi}
                title={mayUseAi ? undefined : NO_AI_ACCESS}
                onClick={() => void askWithAi()}
              >
                <SparklesIcon /> Describe
                {stats.missing_alt > 0
                  ? ` ${Math.min(AI_BATCH, stats.missing_alt)}`
                  : ''}{' '}
                with AI
              </Button>
            </div>
            {!mayUseAi && (
              <p className="text-xs text-amber-700">{NO_AI_ACCESS}</p>
            )}
            <p className="text-xs text-muted-foreground">
              The format fills up to 200 images per run from the pattern above.
              Recomaze looks at the picture itself and describes what it shows,{' '}
              {AI_BATCH} images per run at {AI_CREDITS_PER_IMAGE} credits each;
              every alt text it writes is journaled under SEO → Checkup →
              Changes.
            </p>
            {written.length > 0 && (
              <ul className="flex flex-col gap-1 rounded-lg bg-muted/40 p-3 text-xs text-muted-foreground">
                {written.map(item => (
                  <li key={item.id}>
                    <span className="font-medium text-foreground">
                      {item.alt}
                    </span>
                    {item.source === 'text' && ' (from the file name)'}
                  </li>
                ))}
              </ul>
            )}
          </div>
        ) : (
          <p className="text-sm text-muted-foreground">Loading…</p>
        )}
      </OptionRow>
      <OptionRow
        copy={{
          label: 'Find & replace',
          description:
            'Change a piece of text in the alt text, title or caption of every image that has it.',
          tip: 'Preview first: it counts the images whose text would change and shows a few before and after. Replace with nothing to remove the text. Every change is journaled, so Checkup → Changes can undo it.',
        }}
      >
        <div className="flex flex-col gap-2">
          <div className="grid gap-2 @lg:grid-cols-[150px_minmax(0,1fr)_minmax(0,1fr)]">
            <Select
              items={FIELDS}
              value={field}
              onValueChange={value => {
                setField(value as 'alt' | 'title' | 'caption');
                setPreview(null);
              }}
            >
              <SelectTrigger size="sm">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {FIELDS.map(item => (
                  <SelectItem key={item.value} value={item.value}>
                    {item.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <div className="flex flex-col gap-1">
              <Label className="text-xs">Find</Label>
              <Input
                value={find}
                onChange={event => {
                  setFind(event.target.value);
                  setPreview(null);
                }}
              />
            </div>
            <div className="flex flex-col gap-1">
              <Label className="text-xs">Replace with</Label>
              <Input
                value={replace}
                onChange={event => {
                  setReplace(event.target.value);
                  setPreview(null);
                }}
              />
            </div>
          </div>
          <label className="flex w-fit cursor-pointer items-center gap-2 text-xs text-muted-foreground">
            <Checkbox
              checked={matchCase}
              onCheckedChange={checked => {
                setMatchCase(Boolean(checked));
                setPreview(null);
              }}
            />
            Match case
          </label>
          <div className="flex flex-wrap items-center gap-2">
            <Button
              size="sm"
              variant="outline"
              disabled={busy || find.trim() === ''}
              onClick={() => runReplace(true)}
            >
              Preview
            </Button>
            <Button
              size="sm"
              disabled={
                busy || find.trim() === '' || preview === null || preview === 0
              }
              onClick={() => runReplace(false)}
            >
              <ReplaceIcon /> Replace
              {preview ? ` in ${preview} image${preview === 1 ? '' : 's'}` : ''}
            </Button>
            {preview !== null && (
              <span className="text-xs text-muted-foreground">
                {preview === 0
                  ? 'No image would change.'
                  : `${preview} image${preview === 1 ? '' : 's'} would change.`}
              </span>
            )}
          </div>
          {preview !== null && samples.length > 0 && (
            <ul className="flex flex-col gap-1 rounded-lg border border-border p-2 text-xs">
              {samples.map(sample => (
                <li key={sample.id} className="flex flex-wrap gap-x-2">
                  <span className="text-muted-foreground line-through">
                    {sample.before}
                  </span>
                  <span aria-hidden>→</span>
                  <span className="text-foreground">
                    {sample.after || '(empty)'}
                  </span>
                </li>
              ))}
            </ul>
          )}
        </div>
      </OptionRow>
      {stats && asking && (
        <ConfirmDialog
          open
          onOpenChange={open => !open && setAsking(null)}
          title={`Describe ${Math.min(AI_BATCH, stats.missing_alt)} images with AI?`}
          description={describeCost(
            Math.min(AI_BATCH, stats.missing_alt),
            asking.balance
          )}
          confirmLabel="Describe them"
          busy={busy}
          onConfirm={() => {
            if (
              asking.balance === undefined ||
              asking.balance >=
                Math.min(AI_BATCH, stats.missing_alt) * AI_CREDITS_PER_IMAGE
            ) {
              void writeWithAi();
            } else {
              setAsking(null);
              toast.error('Not enough credits for this run.');
            }
          }}
        />
      )}
    </div>
  );
};

/**
 * What a run costs and what is left, in the words of the confirmation.
 *
 * @param images  - Images this run describes.
 * @param balance - Credits left, when known.
 * @return The sentence.
 */
const describeCost = (images: number, balance?: number): string => {
  const cost = images * AI_CREDITS_PER_IMAGE;
  const left =
    balance === undefined
      ? ''
      : balance < cost
        ? ` You have ${balance}, not enough for this run.`
        : ` You have ${balance}.`;
  return `Recomaze looks at each picture and writes its alt text into the media library: up to ${cost} credits (${AI_CREDITS_PER_IMAGE} an image).${left} Each alt text is journaled under SEO → Checkup → Changes and can be undone.`;
};

export default SeoImagesTools;