import { Sparkles } from 'lucide-react';

import type { ParsedIntent } from '../../types/ai-writing';
import type { ArticleType } from '../../api/ai-writing-article-types';

interface IntentResultCardProps {
  intent: ParsedIntent;
  articleTypes: ArticleType[];
  hideTargetAudience?: boolean;
  embedded?: boolean;
}

/**
 * 意图解析完成后的结构化卡片。展示 LLM 把用户原始意图理解成的四项：
 * 文章类型 / 目标读者 / 字数 / 精炼意图。在素材收集开始前作为"承上启下"的视觉锚点。
 */
export function IntentResultCard({
  intent,
  articleTypes,
  hideTargetAudience = false,
  embedded = false,
}: IntentResultCardProps) {
  // article_type 后端给的是 key（如 "analysis"），UI 展示用 label（如 "分析报道"）
  const typeLabel =
    articleTypes.find((t) => t.key === intent.articleType)?.label ?? intent.articleType;

  return (
    <div className={embedded ? 'mt-2' : 'px-4 pb-2'}>
      <div className="rounded-xl border border-blue-200 dark:border-blue-900 bg-blue-50/40 dark:bg-blue-950/20 overflow-hidden shadow-sm">
        <div className="flex items-center gap-2 px-3 py-2 border-b border-blue-200/60 dark:border-blue-900/60 bg-blue-100/40 dark:bg-blue-900/30">
          <Sparkles className="size-3.5 text-blue-500 shrink-0" />
          <span className="text-xs font-medium text-blue-600 dark:text-blue-400">
            意图解析完成
          </span>
        </div>
        <div className="px-3 py-2.5 space-y-1.5 text-xs">
          <Row label="文章类型" value={typeLabel} />
          {!hideTargetAudience && (
            <Row label="目标读者" value={intent.targetAudience} />
          )}
          <Row label="字数目标" value={`${intent.wordCountTarget} 字`} />
          {intent.refinedIntent && (
            <Row label="精炼意图" value={intent.refinedIntent} multiline />
          )}
        </div>
      </div>
    </div>
  );
}

function Row({ label, value, multiline }: { label: string; value: string; multiline?: boolean }) {
  return (
    <div className={multiline ? 'flex flex-col gap-0.5' : 'flex items-baseline gap-2'}>
      <span className="shrink-0 text-muted-foreground">{label}</span>
      <span className={multiline ? 'text-foreground leading-relaxed' : 'text-foreground truncate'}>
        {value}
      </span>
    </div>
  );
}