import { useState } from "react";
import { cn } from "../../components/ui/utils";
import { PortalShell } from "./PortalShell";

type Notice = { title: string; date: string };

const NOTICE_TABS = ["招标公告", "资格预审公告", "中标候选人公示", "结果公告", "终止公告"];

const NOTICE_DATA: Record<string, Notice[]> = {
  招标公告: [
    { title: "[公开招标] 扣电测试柜框架", date: "2026-07-13" },
    { title: "[公开招标] 2026年地脚螺栓、不锈钢及五金紧固件框架招标", date: "2026-07-13" },
    { title: "[公开招标] 莱州100MW分散式风电项目EPC工程总承包[变更公告]", date: "2026-07-13" },
    { title: "[公开招标] TPU掺混特种线项目FFS包装机[变更公告]", date: "2026-07-13" },
  ],
  资格预审公告: [
    { title: "滨州园区危化品运输服务资格预审公告", date: "2026-07-11" },
    { title: "公辅系统维保服务资格预审公告", date: "2026-07-10" },
    { title: "智慧园区网络安全服务资格预审公告", date: "2026-07-08" },
  ],
  中标候选人公示: [
    { title: "[公开招标] 牵引车租赁服务框架中标候选人公示", date: "2026-07-07" },
    { title: "[公开招标] 电池材料项目地质勘察工程中标候选人公示", date: "2026-07-06" },
    { title: "[公开招标] 四轮防爆巡检机器人系统中标候选人公示", date: "2026-06-26" },
  ],
  结果公告: [
    { title: "[公开招标] HDPE管道管件框架招标中标结果公告", date: "2026-07-07" },
    { title: "[公开招标] 起重框架招标包一 单梁起重机中标结果公告", date: "2026-07-02" },
    { title: "[公开招标] 海阳绿电直连光伏组件项目中标结果公告", date: "2026-06-30" },
  ],
  终止公告: [
    { title: "国标切断双偏心蝶阀框架招标废标公告", date: "2026-07-06" },
    { title: "TPU四期熟化料仓招标废标公告", date: "2026-07-01" },
    { title: "滨州碳酸锂项目冷却窑废标公告", date: "2026-06-24" },
  ],
};

export function TradingInfoPage() {
  const [activeTab, setActiveTab] = useState(NOTICE_TABS[0]);
  return (
    <PortalShell active="trading">
      <section className="border bg-white">
        <div className="border-b bg-[#f8fafc] px-4 py-3">
          <h1 className="text-base font-semibold">交易信息</h1>
        </div>
        <div className="border-b px-3">
          <div className="flex flex-wrap items-center">
            {NOTICE_TABS.map((tab) => (
              <button
                key={tab}
                onClick={() => setActiveTab(tab)}
                className={cn(
                  "relative px-4 py-3 text-sm",
                  activeTab === tab ? "font-semibold text-primary" : "text-[#4b5563] hover:text-primary",
                )}
              >
                {tab}
                {activeTab === tab && <span className="absolute inset-x-2 bottom-0 h-0.5 bg-primary" />}
              </button>
            ))}
          </div>
        </div>
        <ul className="space-y-1 p-4">
          {NOTICE_DATA[activeTab].map((n) => (
            <li key={n.title} className="flex items-center gap-3 border-b border-dashed py-2 text-sm">
              <span className="line-clamp-1 flex-1 hover:text-primary">{n.title}</span>
              <span className="text-xs text-muted-foreground">{n.date}</span>
            </li>
          ))}
        </ul>
      </section>
    </PortalShell>
  );
}