import { skillItems, tagToneClasses } from "../data/mockData";
import DraggableFab from "../components/DraggableFab";
import Segmented from "../components/Segmented";
import { openWindow } from "../utils/navigation";

export default function SkillsPage({ active, setActive }) {
  const types = ["全部", "内置", "自定义"];
  const filtered = active === "全部" ? skillItems : skillItems.filter((item) => item.type === active);

  return (
    <section className="space-y-4 pb-20">
      <Segmented items={types} active={active} onChange={setActive} />
      <div className="space-y-3">
        {filtered.map((skill) => (
          <article key={skill.name} className="panel rounded-md p-3">
            <div className="flex items-start justify-between gap-3">
              <div className="flex min-w-0 flex-1 items-center gap-3">
                <div className="flex w-full min-w-0 items-center justify-between gap-4">
                  <h3 className="truncate text-[15px] font-extrabold">{skill.name}</h3>
                  <div className="flex shrink-0 items-center gap-1.5 text-[12px] font-semibold">
                    <span className="skill-type">{skill.type}</span>
                    <span className="text-subtle">·</span>
                    <span className={skill.enabled ? "skill-state-enabled" : "skill-state-disabled"}>{skill.enabled ? "已启用" : "已关闭"}</span>
                  </div>
                </div>
              </div>
            </div>
            <div className="mt-4 flex flex-wrap gap-2">
              {skill.tags.map((tag, index) => <span key={tag} className={`tag ${tagToneClasses[index % tagToneClasses.length]}`}>{tag}</span>)}
            </div>
          </article>
        ))}
      </div>
      <DraggableFab onClick={() => openWindow("/window/skill-create")} ariaLabel="新增 skill" />
    </section>
  );
}
