import React from 'react';
import {
  ArrowRightIcon,
  CircleCheckIcon,
  LoaderCircleIcon,
} from 'lucide-react';

import {
  generationCard,
  type GenerationCardState,
} from '../../../lib/copilot/thread-turns';
import type { ICopilotMessage } from '../../../service/copilot/copilot.interface';
import { Button } from '../../ui/button';

import { StatusCard } from './StatusCard';

/** What a generation card can do about an article it is watching. */
export interface ThreadArticleCard {
  /** Open the finished article in the reader. */
  onOpen: (articleId: string) => void;
  /** Publish it to the blog. */
  onPublish: (articleId: string) => void;
  /** The article being published right now, if any. */
  publishing: string | null;
  /** Articles already published from a card. */
  published: ReadonlySet<string>;
  /** Articles whose last publish attempt failed. */
  failed: ReadonlySet<string>;
}

/** What a Company ID card says, by what it watches. */
const COMPANY_ID_COPY: Record<
  'push' | 'site' | 'engines',
  { working: string; ready: string; readyDetail: string }
> = {
  push: {
    working: 'Pushing to AI Visibility',
    ready: 'Sent to AI Visibility',
    readyDetail: 'Your brand now reads from your Company ID.',
  },
  site: {
    working: 'Reading your website',
    ready: 'Website read complete',
    readyDetail: 'Your Company ID has new answers to review.',
  },
  engines: {
    working: 'Asking ChatGPT and Gemini',
    ready: 'Engines read complete',
    readyDetail: 'Your Company ID has new answers to review.',
  },
};

/**
 * The status card under a turn that started something long-running: an
 * article, an emailed product-content job, or a Company ID read. A finished
 * article carries its own row of buttons, since publishing it to the blog is
 * something only this plugin can offer.
 *
 * @param props - Component props.
 * @param props.message - The assistant turn.
 * @param props.article - What can be done with a finished article.
 * @param props.onNavigate - Open a page of the plugin.
 * @return The card, or nothing when this turn started nothing worth tracking.
 */
export function GenerationCard({
  message,
  article,
  onNavigate,
}: {
  message: ICopilotMessage;
  article: ThreadArticleCard;
  onNavigate: (path: string) => void;
}): React.ReactElement | null {
  const card: GenerationCardState | null = generationCard(message);
  if (!card) return null;

  if (card.kind === 'content') {
    return card.status === 'ready' ? (
      <StatusCard
        tone="done"
        title="Sent to your email"
        detail="Your product content is on its way - check your inbox."
      />
    ) : (
      <StatusCard
        tone="working"
        title="Generating product content"
        detail="We'll email you the result when it's ready."
      />
    );
  }

  if (card.kind === 'company_id') {
    const copy = COMPANY_ID_COPY[card.watch ?? 'engines'];
    const openCompanyId = {
      label: 'Open Company ID',
      onClick: () => onNavigate('/company-id'),
    };
    if (card.status === 'stalled') {
      return (
        <StatusCard
          tone="quiet"
          title="Nothing new to show"
          detail="The read finished without anything to add, or is taking longer than usual. Open your Company ID to check."
          action={openCompanyId}
        />
      );
    }
    if (card.status === 'ready') {
      return (
        <StatusCard
          tone="done"
          title={copy.ready}
          detail={copy.readyDetail}
          action={
            card.watch === 'push'
              ? {
                  label: 'Open AI Visibility',
                  onClick: () => onNavigate('/ai-visibility'),
                }
              : openCompanyId
          }
        />
      );
    }
    return (
      <StatusCard
        tone="working"
        title={copy.working}
        detail="Running in the background - takes a few minutes."
      />
    );
  }

  if (card.status !== 'ready') {
    return (
      <StatusCard
        tone="working"
        title="Generating"
        detail="In progress - it will appear in the list shortly."
        action={{
          label: 'View in list',
          onClick: () => onNavigate('/ai-visibility'),
        }}
      />
    );
  }

  return <ArticleReady articleId={card.articleId} article={article} />;
}

/**
 * The finished article: read it, or put it on the blog. Publishing happens
 * here rather than on a page, because the merchant is standing in the
 * conversation that wrote it.
 *
 * @param props - Component props.
 * @param props.articleId - The article the turn produced, when known.
 * @param props.article - What can be done with it.
 * @return The card.
 */
function ArticleReady({
  articleId,
  article,
}: {
  articleId: string | undefined;
  article: ThreadArticleCard;
}): React.ReactElement {
  const id: string = articleId ?? '';
  const isPublished: boolean = article.published.has(id);

  return (
    <div className="mt-3 overflow-hidden rounded-2xl border border-brand/20 bg-brand/5 p-3.5">
      <div className="flex items-center gap-3">
        <CircleCheckIcon className="h-5 w-5 shrink-0 text-brand" />
        <div className="min-w-0 flex-1">
          <p className="text-sm font-semibold text-foreground">Ready</p>
          <p className="text-xs text-muted-foreground">
            Your content is ready to review.
          </p>
        </div>
      </div>
      <div className="mt-3 flex flex-wrap items-center gap-2">
        <Button
          onClick={() => article.onOpen(id)}
          disabled={!id}
          variant="outline"
          size="xs"
          className="rounded-full"
        >
          Open
          <ArrowRightIcon className="h-3 w-3" />
        </Button>
        {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" />
            Published to blog
          </span>
        ) : (
          <Button
            onClick={() => article.onPublish(id)}
            disabled={!id || article.publishing === id}
            size="xs"
            className="rounded-full"
          >
            {article.publishing === id ? (
              <>
                <LoaderCircleIcon className="h-3.5 w-3.5 animate-spin" />
                Publishing...
              </>
            ) : article.failed.has(id) ? (
              'Retry publish'
            ) : (
              'Publish to blog'
            )}
          </Button>
        )}
      </div>
    </div>
  );
}