import React, { useState } from 'react';
import {
  ArrowRightIcon,
  CornerDownRightIcon,
  RotateCcwIcon,
  ShieldCheckIcon,
} from 'lucide-react';
import { useNavigate } from 'react-router-dom';

import { Button } from '../../ui/button';
import {
  isActionDisabled,
  readCatalog,
  startedScan,
} from '../../../lib/copilot/thread-turns';
import type {
  ICopilotAction,
  ICopilotMessage,
} from '../../../service/copilot/copilot.interface';
import { cn } from '../cn';
import { CopilotMarkdown } from '../CopilotMarkdown';
import { CopilotSteps } from '../CopilotSteps';

import { GenerationCard, type ThreadArticleCard } from './GenerationCard';
import { KbDocumentCard } from './KbDocumentCard';
import { ScanCard } from './ScanCard';

export type { ThreadArticleCard };

/**
 * A turn a page sent for the merchant (Ask Copilot, a quest, the guided
 * setup): what was asked, quietly, so the reply under it does not answer
 * nothing. Long ones fold to three lines.
 *
 * @param props - Component props.
 * @param props.content - The words the page sent.
 * @return The line.
 */
function PageTurn({ content }: { content: string }): React.ReactElement {
  const [isOpen, setIsOpen] = useState<boolean>(false);
  const isLong: boolean = content.length > 160 || content.includes('\n');

  return (
    <div className="flex justify-end duration-300 animate-in fade-in slide-in-from-bottom-2">
      <div className="max-w-[85%] rounded-2xl border border-dashed border-border bg-muted/40 px-3 py-2 text-xs leading-relaxed text-muted-foreground">
        <span className="mb-0.5 flex items-center gap-1 font-medium text-foreground/70">
          <CornerDownRightIcon className="h-3 w-3" />
          Sent from the page
        </span>
        <p className={cn('whitespace-pre-line', !isOpen && 'line-clamp-3')}>
          {content}
        </p>
        {isLong && (
          <button
            type="button"
            onClick={() => setIsOpen(value => !value)}
            className="mt-1 font-medium text-brand hover:underline"
          >
            {isOpen ? 'Show less' : 'Show all'}
          </button>
        )}
      </div>
    </div>
  );
}

/**
 * The conversation itself: the merchant's bubbles, Reco's replies with their
 * steps and buttons, and the cards of whatever a turn set running. The docked
 * panel and the HQ page both render this, so a thread reads the same wherever
 * it is open.
 *
 * @param props - Component props.
 * @param props.messages - The turns, oldest first.
 * @param props.logo - The mark beside a reply; the plugin icon, when
 *   WordPress gave one.
 * @param props.isStreaming - A turn is still arriving, so a chip that would
 *   ask a question cannot be pressed yet.
 * @param props.onAction - A quick-action chip was pressed.
 * @param props.onLink - A link in a reply was followed, by its href and the
 *   words it was written as.
 * @param props.onOpenScan - Show a finished scan; the page decides whether
 *   that means opening a canvas or navigating.
 * @param props.onOpenCatalog - Show the catalog a turn just read.
 * @param props.onRetry - Ask the last question again, after its answer failed.
 * @param props.article - What can be done with a finished article.
 * @return The turns.
 */
export function CopilotThread({
  messages,
  logo,
  isStreaming = false,
  onAction,
  onLink,
  onOpenScan,
  onOpenCatalog,
  onRetry,
  article,
}: {
  messages: ICopilotMessage[];
  logo: string;
  isStreaming?: boolean;
  onAction: (action: ICopilotAction, messageIndex: number) => void;
  onLink: (href: string, label: string) => void;
  onRetry?: () => void;
  onOpenScan?: (brandId: string) => void;
  onOpenCatalog?: () => void;
  article: ThreadArticleCard;
}): React.ReactElement {
  const navigate = useNavigate();
  const openScan = onOpenScan ?? (() => navigate('/ai-visibility'));
  const openCatalog = onOpenCatalog ?? (() => navigate('/catalog-quality'));

  return (
    <>
      {messages.map((message: ICopilotMessage, index: number) =>
        message.role === 'user' && message.hidden ? (
          <PageTurn key={index} content={message.content} />
        ) : message.role === 'user' ? (
          <div
            key={index}
            className="flex justify-end duration-300 animate-in fade-in slide-in-from-bottom-2"
          >
            <div className="max-w-[85%] rounded-2xl bg-linear-to-br from-pink-500 to-brand px-3.5 py-2 text-[13.5px] leading-relaxed text-white shadow-xs">
              {message.content}
            </div>
          </div>
        ) : (
          <div
            key={index}
            className="flex gap-2.5 duration-300 animate-in fade-in slide-in-from-bottom-2"
          >
            <span className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-border bg-card shadow-xs">
              {logo ? (
                <img
                  src={logo}
                  alt="Recomaze Co-pilot"
                  className="h-5 w-5 object-contain"
                />
              ) : (
                <span className="text-[11px] font-bold text-brand">R</span>
              )}
            </span>
            <div className="min-w-0 flex-1">
              <CopilotSteps
                steps={message.steps ?? []}
                streaming={isStreaming && index === messages.length - 1}
              />
              {message.failed ? (
                <p className="text-[13.5px] leading-relaxed text-red-700">
                  {message.content}
                </p>
              ) : message.content ? (
                <CopilotMarkdown content={message.content} onLink={onLink} />
              ) : (
                (message.steps?.length ?? 0) === 0 &&
                (isStreaming && index === messages.length - 1 ? (
                  <span className="text-muted-foreground/70">Thinking...</span>
                ) : (
                  <span className="text-muted-foreground/70">
                    No answer came back.
                  </span>
                ))
              )}
              {onRetry &&
                !isStreaming &&
                index === messages.length - 1 &&
                (message.failed ||
                  (!message.content && (message.steps?.length ?? 0) === 0)) && (
                  <Button
                    variant="outline"
                    size="sm"
                    className="mt-2"
                    onClick={onRetry}
                  >
                    <RotateCcwIcon /> Try again
                  </Button>
                )}
              {startedScan(message) && <ScanCard onOpenReport={openScan} />}
              {readCatalog(message) && (
                <button
                  type="button"
                  onClick={openCatalog}
                  className="mt-3 flex w-full items-center justify-between gap-3 rounded-2xl border border-border bg-card px-3.5 py-3 text-left transition hover:bg-muted"
                >
                  <span className="flex items-center gap-2.5">
                    <ShieldCheckIcon className="h-4 w-4 shrink-0 text-amber-600" />
                    <span className="text-sm font-semibold text-foreground">
                      Open your catalog
                    </span>
                  </span>
                  <span className="flex items-center gap-2 text-xs text-muted-foreground">
                    See every product it checked
                    <ArrowRightIcon className="h-3 w-3" />
                  </span>
                </button>
              )}
              {message.kbDocumentFileName && (
                <KbDocumentCard fileName={message.kbDocumentFileName} />
              )}
              <GenerationCard
                message={message}
                article={article}
                onNavigate={(path: string) => navigate(path)}
              />
              {(message.actions?.length ?? 0) > 0 && (
                <div className="mt-3 flex flex-wrap gap-2 duration-300 animate-in fade-in slide-in-from-bottom-1">
                  {message.actions?.map(
                    (action: ICopilotAction, actionIndex: number) => (
                      <button
                        key={actionIndex}
                        type="button"
                        disabled={isActionDisabled(action, isStreaming)}
                        onClick={() => onAction(action, index)}
                        className={cn(
                          'rounded-full px-3.5 py-1.5 text-xs font-semibold transition disabled:cursor-not-allowed disabled:opacity-50',
                          action.kind === 'primary'
                            ? 'bg-linear-to-r from-pink-500 to-brand text-white shadow-xs hover:opacity-90'
                            : 'border border-border bg-card text-muted-foreground hover:border-brand/40 hover:bg-brand/5 hover:text-brand'
                        )}
                      >
                        {action.label}
                      </button>
                    )
                  )}
                </div>
              )}
            </div>
          </div>
        )
      )}
    </>
  );
}