import { useState } from "react";
import { Search, Filter } from "lucide-react";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "../components/ui/select";
import { Card } from "../components/ui/card";
import { PageHeader } from "../components/shared/common";
import { experts } from "../data/mock";

// 说明（评审意见）：专家的随机抽取与回避校验属于"具体项目评标流程"，
// 不在专家总体管理页体现；本页仅做专家库信息维护与查询。
export function ExpertManagement() {
  const [q, setQ] = useState("");
  const [cat, setCat] = useState("all");

  const list = experts.filter(
    (e) => (cat === "all" || e.category === cat) && e.name.includes(q),
  );

  return (
    <div>
      <PageHeader
        title="专家管理"
        description="维护内外部评标专家库信息（随机抽取与回避校验在具体项目评标流程中进行）"
      />

      <Card className="mb-4 flex-row items-center gap-3 p-4">
        <div className="relative flex-1">
          <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
          <input
            value={q}
            onChange={(e) => setQ(e.target.value)}
            placeholder="搜索专家姓名"
            className="h-9 w-full rounded-lg border bg-input-background pl-9 pr-3 text-sm outline-none focus:border-primary"
          />
        </div>
        <Select value={cat} onValueChange={setCat}>
          <SelectTrigger className="w-40">
            <Filter className="size-4" />
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">全部专业</SelectItem>
            <SelectItem value="化工工艺">化工工艺</SelectItem>
            <SelectItem value="自动化控制">自动化控制</SelectItem>
            <SelectItem value="环保工程">环保工程</SelectItem>
            <SelectItem value="招标采购">招标采购</SelectItem>
            <SelectItem value="机械设备">机械设备</SelectItem>
          </SelectContent>
        </Select>
      </Card>

      <Card className="gap-0 overflow-hidden p-0">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b bg-muted/40 text-left text-muted-foreground">
              <th className="px-5 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">
            {list.map((e) => (
              <tr key={e.id} className="hover:bg-muted/30">
                <td className="px-5 py-4 font-medium text-foreground">{e.name}</td>
                <td className="px-4 py-4 text-muted-foreground">{e.title}</td>
                <td className="px-4 py-4 text-muted-foreground">{e.category}</td>
                <td className="px-4 py-4 text-muted-foreground">{e.region}</td>
                <td className="px-4 py-4 text-muted-foreground">{e.reviewCount}</td>
                <td className="px-4 py-4">
                  <span
                    className={`rounded px-2 py-0.5 text-xs ${
                      e.type === "内部" ? "bg-blue-50 text-blue-600" : "bg-sky-50 text-sky-600"
                    }`}
                  >
                    {e.type}
                  </span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </div>
  );
}