import { useState } from 'react';
import apiFetch from '@wordpress/api-fetch';
import {
  CheckIcon,
  Loader2Icon,
  MessageCircleQuestionIcon,
} from 'lucide-react';

import { Button } from '../../components/ui/button';
import { Callout } from '../../components/ui/callout';
import { Checkbox } from '../../components/ui/checkbox';
import type { AiGate } from '../hooks/use-ai-gate';
import { balanceNote, repeatQuestion } from '../lib/ai-runs';
import { addFaqToHtml, type FaqPair } from '../lib/faq-merge';

import {
  errorOf,
  FixErrorCallout,
  NoAiAccess,
  useRepeatGuard,
  type FixError,
} from './fix';

interface FaqAnswer {
  post_id: number;
  run_id: string;
  credits: number;
  faq: FaqPair[];
}

/**
 * Questions and answers written from this page's own text, added to the
 * content as the FAQ block: it prints the questions on the page and the
 * FAQPage schema with them: marked-up questions must be visible on the page.
 */
export const FaqGenerator = ({
  postId,
  credits,
  pricingUrl,
  content,
  page,
  ai,
  onAdd,
}: {
  postId: number;
  credits: number;
  pricingUrl: string;
  /** The content as the editor holds it; the FAQ is appended to it. */
  content: string;
  page: { title: string; keyword: string };
  ai: AiGate;
  onAdd: (content: string) => void;
}): JSX.Element => {
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<FixError | null>(null);
  const [faq, setFaq] = useState<FaqPair[] | null>(null);
  const [added, setAdded] = useState(false);
  /** The questions left out before adding, by their place in the list. */
  const [dropped, setDropped] = useState<Set<number>>(new Set());
  const kept = (faq ?? []).filter((_pair, index) => !dropped.has(index));
  const again = repeatQuestion('faq', ai.ranToday, credits, ai.kind);
  const repeat = useRepeatGuard(again);

  const generate = async (): Promise<void> => {
    setBusy(true);
    setError(null);
    try {
      const answer = await apiFetch<FaqAnswer>({
        path: '/recomaze/v1/seo/post-fix/faq',
        method: 'POST',
        data: {
          post_id: postId,
          title: page.title,
          content,
          keyword: page.keyword,
        },
      });
      setFaq(answer.faq);
      setDropped(new Set());
      setAdded(false);
      ai.onRan('faq');
    } catch (failure) {
      setError(errorOf(failure));
    } finally {
      setBusy(false);
    }
  };

  const add = (): void => {
    if (kept.length === 0) {
      return;
    }
    onAdd(addFaqToHtml(content, kept));
    setAdded(true);
  };

  return (
    <div className="flex flex-col gap-2">
      {error && <FixErrorCallout error={error} pricingUrl={pricingUrl} />}

      {faq !== null && faq.length === 0 && (
        <Callout tone="info" className="text-xs">
          The text does not answer enough distinct questions for a FAQ yet.
        </Callout>
      )}

      {faq !== null && faq.length > 0 && (
        <ul className="flex flex-col gap-2 rounded-lg border border-border p-3">
          {faq.map((pair, index) => (
            <li key={pair.question} className="flex items-start gap-2">
              <Checkbox
                className="mt-0.5"
                checked={!dropped.has(index)}
                disabled={added}
                aria-label={`Add “${pair.question}”`}
                onCheckedChange={checked =>
                  setDropped(current => {
                    const next = new Set(current);
                    if (checked) {
                      next.delete(index);
                    } else {
                      next.add(index);
                    }
                    return next;
                  })
                }
              />
              <span className="flex flex-col gap-0.5">
                <span className="text-sm font-semibold text-foreground">
                  {pair.question}
                </span>
                <span className="text-xs text-muted-foreground">
                  {pair.answer}
                </span>
              </span>
            </li>
          ))}
        </ul>
      )}

      {!ai.allowed && <NoAiAccess />}
      {repeat.asking && (
        <Callout tone="warning" className="text-xs">
          {again}
        </Callout>
      )}
      <div className="flex flex-wrap gap-2">
        <Button
          size="sm"
          variant="outline"
          disabled={busy || content.trim() === '' || !ai.allowed}
          onClick={() => repeat.press(() => void generate())}
        >
          {busy ? (
            <Loader2Icon className="animate-spin" />
          ) : (
            <MessageCircleQuestionIcon />
          )}
          {repeat.asking
            ? 'Run it again'
            : faq === null
              ? 'Write the FAQ'
              : 'Write it again'}
        </Button>
        {faq !== null && faq.length > 0 && (
          <Button size="sm" disabled={added || kept.length === 0} onClick={add}>
            <CheckIcon />{' '}
            {added
              ? 'Added to the content'
              : `Add ${kept.length === faq.length ? 'them' : kept.length} to the content`}
          </Button>
        )}
      </div>
      <p className="text-xs text-muted-foreground">
        {credits} credits a run.{balanceNote(ai.balance, credits)} The questions
        are answered from this page only; untick the ones to leave out. A page
        with a FAQ already gets them in it, the ones it asks left out, and the
        FAQ block prints the FAQPage schema with them.
      </p>
    </div>
  );
};