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

import { Button } from '../../components/ui/button';
import { Callout } from '../../components/ui/callout';
import type { AiGate } from '../hooks/use-ai-gate';
import { balanceNote, repeatQuestion } from '../lib/ai-runs';
import { linkAnchor } from '../lib/anchor';

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

/** One page of the site this one should link to, and the words to link. */
export interface LinkSuggestion {
  url: string;
  title: string;
  anchor: string;
  sentence: string;
  reason: string;
}

interface LinkSuggestionsAnswer {
  post_id: number;
  run_id: string;
  credits: number;
  links: LinkSuggestion[];
}

/**
 * Internal links for the post being written: the agent reads the text and
 * the site's other published pages and says which to link to and with what
 * words; Insert wraps those words where they already stand in the content.
 * The analysis' internal-link test passes on the first one.
 */
export const LinkSuggestions = ({
  postId,
  credits,
  pricingUrl,
  content,
  page,
  ai,
  onInsert,
}: {
  postId: number;
  credits: number;
  pricingUrl: string;
  /** The content as the editor holds it, where the link is inserted. */
  content: string;
  page: { title: string; keyword: string };
  ai: AiGate;
  onInsert: (content: string) => void;
}): JSX.Element => {
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<FixError | null>(null);
  const [links, setLinks] = useState<LinkSuggestion[] | null>(null);
  const [inserted, setInserted] = useState<string[]>([]);
  const [missing, setMissing] = useState<string[]>([]);
  const again = repeatQuestion('links', ai.ranToday, credits, ai.kind);
  const repeat = useRepeatGuard(again);

  const suggest = async (): Promise<void> => {
    setBusy(true);
    setError(null);
    setMissing([]);
    try {
      const answer = await apiFetch<LinkSuggestionsAnswer>({
        path: '/recomaze/v1/seo/post-fix/links',
        method: 'POST',
        data: {
          post_id: postId,
          title: page.title,
          content,
          keyword: page.keyword,
        },
      });
      setLinks(answer.links);
      setInserted([]);
      ai.onRan('links');
    } catch (failure) {
      setError(errorOf(failure));
    } finally {
      setBusy(false);
    }
  };

  const insert = (link: LinkSuggestion): void => {
    const next = linkAnchor(content, link.anchor, link.url);
    if (next === null) {
      setMissing(state => [...state, link.url]);
      return;
    }
    onInsert(next);
    setInserted(state => [...state, link.url]);
  };

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

      {links !== null && links.length === 0 && (
        <Callout tone="info" className="text-xs">
          Nothing to link yet: the other pages of the site do not answer what
          this one is about.
        </Callout>
      )}

      {links !== null &&
        links.map(link => {
          const done = inserted.includes(link.url);
          const notFound = missing.includes(link.url);
          return (
            <div
              key={link.url}
              className="flex flex-col gap-1.5 rounded-lg border border-border p-3"
            >
              <div className="flex items-start gap-2">
                <div className="flex min-w-0 flex-col">
                  <a
                    href={link.url}
                    target="_blank"
                    rel="noreferrer"
                    className="inline-flex items-center gap-1 text-sm font-semibold text-foreground underline-offset-4 hover:underline"
                  >
                    <span className="truncate">{link.title || link.url}</span>
                    <ExternalLinkIcon className="size-3 shrink-0" />
                  </a>
                  <span className="text-xs text-muted-foreground">
                    {link.reason}
                  </span>
                </div>
                <Button
                  size="sm"
                  variant={done ? 'outline' : 'default'}
                  className="ml-auto shrink-0"
                  disabled={done}
                  onClick={() => insert(link)}
                >
                  <LinkIcon /> {done ? 'Inserted' : 'Insert'}
                </Button>
              </div>
              <p className="text-xs text-muted-foreground">
                Links the words{' '}
                <span className="font-medium text-foreground">
                  “{link.anchor}”
                </span>
                {link.sentence !== '' && <> in “{link.sentence}”</>}
              </p>
              {notFound && (
                <p className="text-xs text-red-600">
                  Those words are no longer in the content; edit the post and
                  ask again.
                </p>
              )}
            </div>
          );
        })}

      {!ai.allowed && <NoAiAccess />}
      {repeat.asking && (
        <Callout tone="warning" className="text-xs">
          {again}
        </Callout>
      )}
      <div>
        <Button
          size="sm"
          variant="outline"
          disabled={busy || content.trim() === '' || !ai.allowed}
          onClick={() => repeat.press(() => void suggest())}
        >
          {busy ? <Loader2Icon className="animate-spin" /> : <LinkIcon />}
          {repeat.asking
            ? 'Run it again'
            : links === null
              ? 'Suggest internal links'
              : 'Suggest again'}
        </Button>
      </div>
      <p className="text-xs text-muted-foreground">
        {credits} credits a run.{balanceNote(ai.balance, credits)} Recomaze
        reads this post and the site&rsquo;s other published pages, then links
        words that already stand in the text.
      </p>
    </div>
  );
};