import { AppShell } from "@/components/AppShell";
import type { ProjectResponse, SkillView } from "@/lib/api/types";
import { groupByScope, scopeLabel, tierLabel } from "@/lib/skills/skills";

interface SkillsPageProps {
  project: ProjectResponse;
  skills: SkillView[];
}

// 技能库（UX §7）：只读注册表视图（name/scope/tier/reads/writes）。Server Component（纯读）。
export function SkillsPage({ project, skills }: SkillsPageProps) {
  const groups = groupByScope(skills);

  return (
    <AppShell
      title={`〈${project.title}〉`}
      subtitle="技能库"
      projectId={project.id}
      activeNav="skills"
    >
      <div className="mx-auto flex max-w-4xl flex-col gap-6 p-6">
        <h1 className="font-serif text-lg text-ink">技能库</h1>
        <p className="text-xs text-ink-soft">
          声明式 Skill 注册表：每个技能声明能力档位与可读/写的表（沙箱白名单，越权产出丢弃并审计）。
        </p>
        {groups.length === 0 ? (
          <p className="text-sm text-ink-soft">（暂无已注册技能）</p>
        ) : (
          groups.map((group) => (
            <section key={group.scope}>
              <h2 className="mb-2 font-serif text-sm text-ink">
                {scopeLabel(group.scope)}
                <span className="ml-2 text-xs text-ink-soft">
                  {group.skills.length}
                </span>
              </h2>
              <ul className="flex flex-col gap-2">
                {group.skills.map((skill) => (
                  <li
                    key={skill.name}
                    className="rounded border border-line bg-panel p-3 text-sm"
                  >
                    <div className="mb-1 flex flex-wrap items-center gap-2">
                      <span className="font-mono text-ink">{skill.name}</span>
                      <span className="rounded bg-bg px-2 py-0.5 text-xs text-ink-soft">
                        {tierLabel(skill.tier)}
                      </span>
                      {skill.genre ? (
                        <span className="rounded bg-bg px-2 py-0.5 text-xs text-ink-soft">
                          {skill.genre}
                        </span>
                      ) : null}
                    </div>
                    <div className="flex flex-wrap gap-4 text-xs text-ink-soft">
                      <span>
                        读：
                        {skill.reads && skill.reads.length > 0
                          ? skill.reads.join("、")
                          : "—"}
                      </span>
                      <span>
                        写：
                        {skill.writes && skill.writes.length > 0
                          ? skill.writes.join("、")
                          : "—"}
                      </span>
                    </div>
                  </li>
                ))}
              </ul>
            </section>
          ))
        )}
      </div>
    </AppShell>
  );
}