import React from 'react';
import { FileTextIcon } from 'lucide-react';

import type {
  ArticleStatus,
  ArticleSummary,
} from '../../../service/visibility/visibility.interface';
import { Button } from '../../ui/button';
import { cn } from '../cn';

/** What each status looks like, in the vocabulary of the Contents page. */
const STATUS_STYLE: Record<ArticleStatus, { label: string; chip: string }> = {
  pending: { label: 'Queued', chip: 'bg-muted text-muted-foreground' },
  generating: { label: 'Writing', chip: 'bg-brand/10 text-brand' },
  ready: { label: 'Ready', chip: 'bg-emerald-500/15 text-emerald-600' },
  failed: { label: 'Failed', chip: 'bg-amber-400/20 text-amber-700' },
  published: { label: 'Live', chip: 'bg-emerald-500/15 text-emerald-600' },
};

/**
 * The content written for this brand, beside the conversation: what is ready
 * to read, what is still being written, and what is already live. Opening a
 * piece is the page's job - this is the shelf, not the reader.
 *
 * @param props - Component props.
 * @param props.articles - The brand's content, newest first.
 * @param props.onAsk - Put a question to the copilot.
 * @param props.onOpen - Open one piece.
 * @return The panel.
 */
export function ContentPanel({
  articles,
  onAsk,
  onOpen,
}: {
  articles: ArticleSummary[];
  onAsk: (prompt: string) => void;
  onOpen: (articleId: string) => void;
}): React.ReactElement {
  if (articles.length === 0) {
    return (
      <div className="flex flex-col items-start gap-3 p-4">
        <p className="text-sm text-foreground">
          Nothing written yet. Reco writes against the questions shoppers ask AI
          engines about your kind of store.
        </p>
        <Button
          size="sm"
          className="rounded-full"
          onClick={() =>
            onAsk('Write an article about my best-selling product')
          }
        >
          Ask for a first piece
        </Button>
      </div>
    );
  }

  return (
    <ul className="flex flex-col">
      {articles.map((article: ArticleSummary) => {
        const style = STATUS_STYLE[article.status] ?? STATUS_STYLE.pending;

        return (
          <li
            key={article.article_id}
            className="border-t border-border first:border-t-0"
          >
            <button
              type="button"
              onClick={() => onOpen(article.article_id)}
              className="flex w-full items-start gap-3 px-4 py-3 text-left transition hover:bg-muted"
            >
              <FileTextIcon className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
              <span className="min-w-0 flex-1">
                <span className="block truncate text-sm font-medium text-foreground">
                  {article.title}
                </span>
                <span className="mt-1 flex flex-wrap items-center gap-2 text-[11px]">
                  <span
                    className={cn(
                      'rounded-md px-1.5 py-0.5 font-semibold',
                      style.chip
                    )}
                  >
                    {style.label}
                  </span>
                  {article.word_count > 0 && (
                    <span className="text-muted-foreground">
                      {article.word_count} words
                    </span>
                  )}
                  {article.seo_score > 0 && (
                    <span className="text-muted-foreground tabular-nums">
                      SEO {Math.round(article.seo_score)}
                    </span>
                  )}
                </span>
              </span>
            </button>
          </li>
        );
      })}
    </ul>
  );
}