import { useRef, useState } from 'react';
import { GaugeIcon, LoaderCircleIcon } from 'lucide-react';

import { analyze } from '../../editor/analysis/analyzer';
import {
  fetchSeoScoreQueue,
  storeSeoScores,
} from '../../service/seo/seo.service';
import { Button } from '../ui/button';
import { Checkbox } from '../ui/checkbox';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '../ui/dialog';
import { Progress } from '../ui/progress';

interface Tally {
  scored: number;
  total: number;
  low: number;
  sum: number;
}

const EMPTY: Tally = { scored: 0, total: 0, low: 0, sum: 0 };

/**
 * Scores every page with the editor's own analysis, twenty at a time:
 * the site hands over what the analyzer reads of each page, the scores go
 * back and land in the post lists. The pages without a current score by
 * default, every page on request. It runs while the dialog is open and
 * can be stopped; what was scored stays.
 */
export const ScoreRunner = ({
  open,
  onClose,
  onDone,
}: {
  open: boolean;
  onClose: () => void;
  onDone?: () => void;
}): JSX.Element => {
  const [all, setAll] = useState(false);
  const [running, setRunning] = useState(false);
  const [finished, setFinished] = useState(false);
  const [tally, setTally] = useState<Tally>(EMPTY);
  const [error, setError] = useState('');
  const stop = useRef(false);

  const run = async (): Promise<void> => {
    stop.current = false;
    setRunning(true);
    setFinished(false);
    setError('');
    let current = { ...EMPTY };
    setTally(current);
    try {
      let after = 0;
      const siteHost = window.location.host;
      for (;;) {
        const queue = await fetchSeoScoreQueue(all, after);
        if (queue.counts) {
          current = {
            ...current,
            total: all ? queue.counts.total : queue.counts.needed,
          };
          setTally(current);
        }
        if (queue.items.length === 0 || stop.current) {
          break;
        }
        const scores: Record<number, number> = {};
        for (const item of queue.items) {
          const { score } = analyze({
            ...item.input,
            siteHost,
            scope: 'post',
          });
          scores[item.id] = score;
          current = {
            ...current,
            low: current.low + (score < 51 ? 1 : 0),
            sum: current.sum + score,
          };
        }
        await storeSeoScores(scores);
        current = {
          ...current,
          scored: current.scored + queue.items.length,
        };
        setTally(current);
        after = queue.items[queue.items.length - 1].id;
      }
      setFinished(true);
      onDone?.();
    } catch (reason) {
      setError((reason as Error).message);
    } finally {
      setRunning(false);
    }
  };

  const percent =
    tally.total > 0 ? Math.round((tally.scored / tally.total) * 100) : 0;
  const average = tally.scored > 0 ? Math.round(tally.sum / tally.scored) : 0;

  return (
    <Dialog
      open={open}
      onOpenChange={next => {
        if (!next && !running) {
          onClose();
        }
      }}
    >
      <DialogContent className="max-w-lg">
        <DialogHeader>
          <DialogTitle>Score every page</DialogTitle>
          <DialogDescription>
            The same analysis the editor runs when a page is opened, for every
            published page at once: title, description, keyword, content, links
            and images. It spends no credits and changes nothing but the score.
            Keep this window open while it runs.
          </DialogDescription>
        </DialogHeader>

        <div className="flex flex-col gap-4">
          <label className="flex cursor-pointer items-start gap-2 text-sm">
            <Checkbox
              checked={all}
              disabled={running}
              onCheckedChange={checked => setAll(Boolean(checked))}
            />
            <span>
              Score every page again, not only the ones without a current score.
              <span className="block text-xs text-muted-foreground">
                For after a change to the titles templates or the keywords of
                many pages.
              </span>
            </span>
          </label>

          {(running || finished) && (
            <div className="flex flex-col gap-2">
              <Progress value={percent} />
              <p className="text-sm text-muted-foreground">
                {tally.total === 0 && finished
                  ? 'Every page already has a current score.'
                  : `${tally.scored.toLocaleString()} of ${tally.total.toLocaleString()} pages scored`}
                {tally.scored > 0 &&
                  ` · average ${average} · ${tally.low.toLocaleString()} below 51`}
              </p>
            </div>
          )}
          {error && <p className="text-sm text-destructive">{error}</p>}
        </div>

        <DialogFooter>
          {running ? (
            <Button
              type="button"
              variant="outline"
              onClick={() => {
                stop.current = true;
              }}
            >
              Stop
            </Button>
          ) : (
            <Button type="button" variant="ghost" onClick={onClose}>
              {finished ? 'Close' : 'Cancel'}
            </Button>
          )}
          <Button type="button" disabled={running} onClick={() => void run()}>
            {running ? (
              <LoaderCircleIcon className="animate-spin" />
            ) : (
              <GaugeIcon />
            )}
            {finished ? 'Score again' : 'Start scoring'}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};