import { employeeItems } from "../data/mockData";
import { openWindow } from "../utils/navigation";

export default function DistillPage() {
  return (
    <section className="space-y-5">
      <div className=" p-5 text-center">
        <h2 className="text-[24px] font-extrabold leading-tight">把销售冠军蒸馏成员工 skill</h2>
        <p className="mt-3 text-[13px] text-muted">导入聊天记录、话术和案例，沉淀可授权调用的员工能力。</p>
        <div className="mt-5 w-full flex flex-wrap gap-8">
          <button className="btn-secondary flex-1">蒸馏教程</button>
          <button className="btn-primary flex-1" onClick={() => openWindow("/window/distill-start")}>开始蒸馏</button>
        </div>
      </div>
      <div className="panel rounded-md p-3">
        <div className="flex items-center justify-between">
          <div>
            <h3 className="text-[15px] font-extrabold">销售冠军 Aileen 话术蒸馏</h3>
            <p className="mt-1 text-[12px] text-muted">
              <span className="text-primary">成功 248 条</span>
              <span className="mx-1 text-subtle">·</span>
              <span className="text-error">失败 7 条</span>
            </p>
          </div>
          <span className="text-[13px] font-black text-primary">72%</span>
        </div>
        <div className="mt-4 h-2 rounded-full bg-surface2">
          <div className="h-full w-[72%] rounded-full bg-primary" />
        </div>
      </div>
      <div className="space-y-3">
        {employeeItems.map((item) => (
          <article key={item.name} className="panel rounded-md p-3" onClick={() => openWindow("/window/employee-detail")}>
            <div className="flex items-center justify-between gap-3">
              <h3 className="min-w-0 truncate text-[15px] font-extrabold">{item.name}</h3>
              <div className="flex shrink-0 items-center gap-1.5 text-[12px] font-semibold text-muted">
                <span>{item.version}</span>
                <span className="text-subtle">·</span>
                <span className={item.enabled ? "skill-state-enabled" : "skill-state-disabled"}>{item.enabled ? "已启用" : "已关闭"}</span>
              </div>
            </div>
            <p className="mt-2 text-[13px] leading-6 text-muted">{item.traits}</p>
          </article>
        ))}
      </div>
    </section>
  );
}
