import React, { useEffect, useState } from 'react';
import { BookOpenIcon, CircleCheckIcon, LoaderCircleIcon } from 'lucide-react';
import { useNavigate } from 'react-router-dom';

import { useCopilot } from '../../../context/copilot.context';
import {
  getTextEntryContent,
  pushTextEntry,
} from '../../../service/documentation/documentation.service';
import type { TextEntryContent } from '../../../types/documentation';
import { Button } from '../../ui/button';

/** Said when the draft itself could not be read. */
const LOAD_ERROR =
  "We couldn't load that document here. Open your Knowledge Base to review it there.";

/** Said when publishing did not land. Never carries a server message. */
const PUBLISH_ERROR =
  "We couldn't publish that document. Please try again, or open your Knowledge Base.";

/**
 * The knowledge-base draft the copilot just wrote, opened in the conversation
 * that asked for it. Nothing is live until the merchant says so: they read it
 * here and publish it with one button, and the draft stays saved either way,
 * so declining costs nothing.
 *
 * @param props - Component props.
 * @param props.fileName - The draft's stored file name.
 * @return The card.
 */
export function KbDocumentCard({
  fileName,
}: {
  fileName: string;
}): React.ReactElement {
  const copilot = useCopilot();
  const navigate = useNavigate();
  const token: string = copilot.token;
  const clientId: string = copilot.clientId;
  const [draft, setDraft] = useState<TextEntryContent | null>(null);
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [isPublishing, setIsPublishing] = useState<boolean>(false);
  const [isPublished, setIsPublished] = useState<boolean>(false);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);

  useEffect(() => {
    if (!token || !clientId) return undefined;
    let stale = false;
    setIsLoading(true);
    setErrorMessage(null);
    void (async () => {
      const response = await getTextEntryContent(fileName, clientId, token);
      if (stale) return;
      const loaded = response?.data ?? null;
      setDraft(loaded && typeof loaded.content === 'string' ? loaded : null);
      if (!loaded) setErrorMessage(LOAD_ERROR);
      setIsLoading(false);
      setIsPublished(Boolean(loaded?.pushed_to_rag));
    })();
    return () => {
      stale = true;
    };
  }, [fileName, token, clientId]);

  const publish = async (): Promise<void> => {
    setIsPublishing(true);
    setErrorMessage(null);
    const response = await pushTextEntry(fileName, clientId, token);
    setIsPublishing(false);
    if (response?.data?.pushed) {
      setIsPublished(true);
      return;
    }
    setErrorMessage(PUBLISH_ERROR);
  };

  return (
    <div className="mt-3 overflow-hidden rounded-2xl border border-brand/20 bg-brand/5">
      <div className="flex items-center gap-2.5 border-b border-brand/10 px-3.5 py-3">
        <BookOpenIcon className="h-4 w-4 shrink-0 text-brand" />
        <div className="min-w-0 flex-1">
          <p className="truncate text-sm font-semibold text-foreground">
            {draft?.title || 'Knowledge base document'}
          </p>
          <p className="text-xs text-muted-foreground">
            Read it, and add it when it is right. Your assistant answers
            shoppers from what is in here.
          </p>
        </div>
      </div>

      <div className="max-h-64 overflow-y-auto px-3.5 py-3">
        {isLoading ? (
          <span className="flex items-center gap-2 text-xs text-muted-foreground">
            <LoaderCircleIcon className="h-3.5 w-3.5 animate-spin text-brand" />
            Loading the document...
          </span>
        ) : (
          <p className="text-xs leading-relaxed whitespace-pre-wrap text-foreground">
            {draft?.content}
          </p>
        )}
      </div>

      <div className="flex flex-wrap items-center gap-2 border-t border-brand/10 px-3.5 py-3">
        {isPublished ? (
          <span className="flex items-center gap-1 rounded-full bg-brand/10 px-3 py-1.5 text-xs font-semibold text-brand">
            <CircleCheckIcon className="h-3.5 w-3.5" />
            In your Knowledge Base
          </span>
        ) : (
          <Button
            onClick={() => void publish()}
            disabled={isPublishing || isLoading || !draft}
            size="xs"
            className="rounded-full"
          >
            {isPublishing ? (
              <>
                <LoaderCircleIcon className="h-3.5 w-3.5 animate-spin" />
                Adding...
              </>
            ) : (
              'Add to Knowledge Base'
            )}
          </Button>
        )}
        <Button
          onClick={() => navigate('/knowledge-base')}
          variant="outline"
          size="xs"
          className="rounded-full"
        >
          Open Knowledge Base
        </Button>
        {errorMessage && (
          <span className="text-xs text-amber-600">{errorMessage}</span>
        )}
      </div>
    </div>
  );
}