STP/front-end/src/app/pages/SmartSourcing.tsx

import { useState } from "react";
import { useNavigate, useParams } from "react-router";
import { ArrowLeft, Sparkles, Send, Eye, Check, Globe, Database, Boxes } from "lucide-react";
import { toast } from "sonner";
import { Button } from "../components/ui/button";
import { Card } from "../components/ui/card";
import { AiBadge } from "../components/shared/common";
import { sourcingRecords, projects } from "../data/mock";

type SourceKey = "all" | "internet" | "srm" | "pool";

const SOURCES: { key: SourceKey; label: string; icon: any; desc: string }[] = [
  { key: "all", label: "全部来源", icon: Sparkles, desc: "AI 综合多渠道寻源" },
  { key: "internet", label: "互联网寻源", icon: Globe, desc: "公共资源交易平台等" },
  { key: "srm", label: "SRM 库寻源", icon: Database, desc: "集团合格供方库" },
  { key: "pool", label: "临时供应商池", icon: Boxes, desc: "STP 平台临时池" },
];

// 依据记录派生来源（示例）：按序分配到三类来源
function sourceOf(index: number): Exclude<SourceKey, "all"> {
  return (["internet", "srm", "pool"] as const)[index % 3];
}
const SOURCE_LABEL: Record<Exclude<SourceKey, "all">, string> = {
  internet: "互联网",
  srm: "SRM 库",
  pool: "临时池",
};

export function SmartSourcing() {
  const navigate = useNavigate();
  const { id } = useParams();
  const project = projects.find((p) => p.id === id) ?? projects[0];
  const [tab, setTab] = useState<SourceKey>("all");

  const records = sourcingRecords.map((r, i) => ({ ...r, source: sourceOf(i) }));
  const filtered = tab === "all" ? records : records.filter((r) => r.source === tab);
  const viewed = filtered.filter((r) => r.viewed).length;
  const registered = filtered.filter((r) => r.registered).length;

  return (
    <div>
      <div className="mb-5 flex items-center gap-3">
        <Button variant="ghost" size="icon" onClick={() => navigate(-1)}>
          <ArrowLeft className="size-5" />
        </Button>
        <div className="flex-1">
          <div className="flex items-center gap-2">
            <h1 className="text-foreground">AI 智慧寻源结果</h1>
            <AiBadge label="AI 主动寻源" />
          </div>
          {/* 关联项目 */}
          <p className="mt-0.5 text-sm text-muted-foreground">
            关联项目：<span className="font-medium text-foreground">{project.name}</span> · {project.code}
          </p>
        </div>
      </div>

      {/* 三类寻源来源 */}
      <div className="mb-6 grid grid-cols-4 gap-4">
        {SOURCES.map((s) => {
          const Icon = s.icon;
          const active = tab === s.key;
          const count = s.key === "all" ? records.length : records.filter((r) => r.source === s.key).length;
          return (
            <button
              key={s.key}
              onClick={() => setTab(s.key)}
              className={`flex items-start gap-3 rounded-xl border p-4 text-left transition-all ${
                active ? "border-primary bg-secondary/60 shadow-sm" : "bg-card hover:border-primary/50"
              }`}
            >
              <div className={`flex size-10 shrink-0 items-center justify-center rounded-lg ${active ? "bg-primary text-white" : "bg-primary/8 text-primary"}`}>
                <Icon className="size-5" />
              </div>
              <div className="min-w-0">
                <div className="flex items-center gap-1.5">
                  <span className="font-medium text-foreground">{s.label}</span>
                  <span className="rounded-full bg-primary/10 px-1.5 text-xs text-primary">{count}</span>
                </div>
                <p className="mt-0.5 truncate text-xs text-muted-foreground">{s.desc}</p>
              </div>
            </button>
          );
        })}
      </div>

      <div className="mb-6 grid grid-cols-3 gap-4">
        {[
          { l: "AI 外发邀请", v: filtered.length, c: "var(--primary)" },
          { l: "已查看回执", v: viewed, c: "#f59e0b" },
          { l: "已报名", v: registered, c: "#14b8a6" },
        ].map((s) => (
          <Card key={s.l} className="gap-0 p-5">
            <div className="text-sm text-muted-foreground">{s.l}</div>
            <div className="mt-2 text-2xl font-semibold" style={{ color: s.c }}>{s.v}</div>
          </Card>
        ))}
      </div>

      <Card className="gap-0 p-0">
        <div className="flex items-center gap-2 border-b px-6 py-4">
          <Sparkles className="size-5 text-primary" />
          <h3 className="text-foreground">主动外发邀请记录</h3>
          <span className="rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground">
            {SOURCES.find((s) => s.key === tab)?.label}
          </span>
        </div>
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b bg-muted/40 text-left text-muted-foreground">
              <th className="px-6 py-3 font-medium">目标供应商</th>
              <th className="px-4 py-3 font-medium">寻源来源</th>
              <th className="px-4 py-3 font-medium">外发渠道</th>
              <th className="px-4 py-3 font-medium">外发时间</th>
              <th className="px-4 py-3 font-medium">查看回执</th>
              <th className="px-4 py-3 font-medium">是否报名</th>
              <th className="px-4 py-3 font-medium">操作</th>
            </tr>
          </thead>
          <tbody className="divide-y">
            {filtered.map((r) => (
              <tr key={r.id} className={`hover:bg-muted/20 ${!r.viewed ? "bg-amber-50/30" : ""}`}>
                <td className="px-6 py-3 font-medium text-foreground">{r.supplier}</td>
                <td className="px-4 py-3">
                  <span className="rounded bg-secondary px-1.5 py-0.5 text-xs text-primary">{SOURCE_LABEL[r.source]}</span>
                </td>
                <td className="px-4 py-3 text-muted-foreground">{r.channel}</td>
                <td className="px-4 py-3 text-muted-foreground">{r.sentAt}</td>
                <td className="px-4 py-3">
                  {r.viewed ? (
                    <span className="inline-flex items-center gap-1 text-emerald-600"><Eye className="size-4" /> 已查看</span>
                  ) : (
                    <span className="inline-flex items-center gap-1 text-amber-600"><Send className="size-4" /> 待查看</span>
                  )}
                </td>
                <td className="px-4 py-3">
                  {r.registered ? <span className="text-emerald-600">已报名</span> : <span className="text-muted-foreground">未报名</span>}
                </td>
                <td className="px-4 py-3">
                  <Button size="sm" variant="outline" className="h-7" onClick={() => toast.success("已确认回执")}>
                    <Check className="size-3.5" /> 确认回执
                  </Button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>

      <div className="mt-4 flex items-start gap-2 rounded-lg border border-primary/20 bg-secondary/40 p-3 text-sm text-muted-foreground">
        <Sparkles className="mt-0.5 size-4 shrink-0 text-primary" />
        小滨已结合本项目采购品类与历史成交，从互联网平台、集团 SRM 合格供方库与 STP 临时供应商池三类来源综合寻源并外发邀请，未查看回执的供应商已为您高亮提醒。
      </div>
    </div>
  );
}