/**
 * The "Extract it from your Claude / ChatGPT" modal: shows the prompt the
 * merchant copies into their own assistant, then imports the pasted export
 * back into the Company ID record as reviewable proposals.
 */

import React, { useEffect, useState } from 'react';
import { CheckIcon, CopyIcon, UploadIcon } from 'lucide-react';

import { Button } from '../ui/button';
import { Textarea } from '../ui/textarea';
import { ChatGptLogo } from '../icons/chatgpt-logo';
import { ClaudeLogo } from '../icons/claude-logo';
import { CompanyIdExtractImportResult } from '../../service/company-id/company-id.interface';
import {
  getCompanyIdExtractPrompt,
  importCompanyIdExtract,
} from '../../service/company-id/company-id.service';

import {
  MODAL_GHOST_BUTTON_CLASS,
  MODAL_PRIMARY_BUTTON_CLASS,
} from './modal-buttons';

/** The assistants the extract flow supports. */
export const EXTRACT_ASSISTANT = {
  CLAUDE: 'claude',
  CHATGPT: 'chatgpt',
} as const;
export type ExtractAssistant =
  (typeof EXTRACT_ASSISTANT)[keyof typeof EXTRACT_ASSISTANT];

const ASSISTANT_LABELS: Record<ExtractAssistant, string> = {
  [EXTRACT_ASSISTANT.CLAUDE]: 'Claude',
  [EXTRACT_ASSISTANT.CHATGPT]: 'ChatGPT',
};

const COPY_RESET_MS = 2000;

interface ExtractModalProps {
  assistant: ExtractAssistant;
  clientId: string;
  token: string;
  onClose: () => void;
  /** Fired after a successful import so the page can refresh the record. */
  onImported: (result: CompanyIdExtractImportResult) => void;
  onToast: (message: string) => void;
}

export function ExtractModal({
  assistant,
  clientId,
  token,
  onClose,
  onImported,
  onToast,
}: ExtractModalProps) {
  const [prompt, setPrompt] = useState('');
  const [promptLoading, setPromptLoading] = useState(true);
  const [copied, setCopied] = useState(false);
  const [pasteText, setPasteText] = useState('');
  const [importBusy, setImportBusy] = useState(false);

  const assistantLabel = ASSISTANT_LABELS[assistant];

  useEffect(() => {
    let cancelled = false;
    setPromptLoading(true);
    getCompanyIdExtractPrompt(clientId, token)
      .then(text => {
        if (!cancelled) setPrompt(text);
      })
      .catch((promptError: unknown) => {
        if (!cancelled) {
          onToast(
            promptError instanceof Error
              ? promptError.message
              : 'Could not load the prompt'
          );
        }
      })
      .finally(() => {
        if (!cancelled) setPromptLoading(false);
      });

    return () => {
      cancelled = true;
    };
    // One fetch per open; the prompt does not depend on modal-local state.
  }, [clientId, token]);

  const copyPrompt = async () => {
    try {
      await navigator.clipboard.writeText(prompt);
      setCopied(true);
      setTimeout(() => setCopied(false), COPY_RESET_MS);
    } catch {
      onToast('Copy failed. Select the prompt text and copy it manually.');
    }
  };

  const runImport = async () => {
    if (importBusy || !pasteText.trim()) return;
    setImportBusy(true);
    try {
      const result = await importCompanyIdExtract(
        clientId,
        token,
        pasteText.trim()
      );
      onImported(result);
    } catch (importError) {
      onToast(
        importError instanceof Error
          ? importError.message
          : 'Import failed. Paste the full export and try again.'
      );
    } finally {
      setImportBusy(false);
    }
  };

  return (
    <div
      role="dialog"
      aria-modal="true"
      onClick={() => !importBusy && onClose()}
      className="fixed inset-0 z-60 flex items-center justify-center bg-black/40 p-4"
    >
      <div
        onClick={event => event.stopPropagation()}
        className="flex max-h-[88vh] w-full max-w-[680px] flex-col gap-4 overflow-y-auto rounded-2xl border border-border bg-card p-7 shadow-[0_24px_60px_rgba(0,0,0,0.18)]"
      >
        <div className="flex items-center gap-2.5">
          {assistant === EXTRACT_ASSISTANT.CLAUDE ? (
            <ClaudeLogo size={18} />
          ) : (
            <ChatGptLogo size={18} />
          )}
          <div className="text-base font-semibold text-foreground">
            Extract it from your {assistantLabel}
          </div>
        </div>

        <div className="text-[13px] leading-relaxed text-muted-foreground">
          <span className="font-mono text-[11px] font-medium uppercase tracking-[.06em] text-muted-foreground">
            Step 1
          </span>{' '}
          Copy this prompt and run it in your {assistantLabel}. It answers from
          everything it already knows about your business and asks you for
          what&apos;s missing.
        </div>
        <div className="relative">
          <Textarea
            readOnly
            value={promptLoading ? 'Loading the prompt...' : prompt}
            rows={10}
            className="resize-none font-mono"
          />
          <Button
            onClick={copyPrompt}
            disabled={promptLoading || !prompt}
            variant="outline"
            size="xs"
            className="absolute right-2.5 top-2.5 whitespace-nowrap"
          >
            {copied ? (
              <CheckIcon size={12} color="#22c55e" />
            ) : (
              <CopyIcon size={12} />
            )}
            {copied ? 'Copied' : 'Copy prompt'}
          </Button>
        </div>

        <div className="text-[13px] leading-relaxed text-muted-foreground">
          <span className="font-mono text-[11px] font-medium uppercase tracking-[.06em] text-muted-foreground">
            Step 2
          </span>{' '}
          Paste its answer back here and import it. Everything arrives as
          proposals for you to review - fields you already saved are never
          overwritten.
        </div>
        <Textarea
          value={pasteText}
          onChange={event => setPasteText(event.target.value)}
          placeholder={`Paste the ${assistantLabel} export here`}
          rows={10}
          className="resize-y"
        />

        <div className="flex justify-end gap-2">
          <button
            onClick={onClose}
            disabled={importBusy}
            className={MODAL_GHOST_BUTTON_CLASS}
          >
            Cancel
          </button>
          <button
            onClick={runImport}
            disabled={importBusy || !pasteText.trim()}
            className={MODAL_PRIMARY_BUTTON_CLASS}
          >
            <UploadIcon
              size={14}
              className={
                importBusy ? 'animate-spin [animation-duration:900ms]' : ''
              }
            />
            {importBusy ? 'Importing...' : 'Import into Company ID'}
          </button>
        </div>
      </div>
    </div>
  );
}