import { z } from "zod";

import { PageChrome } from "@/components/global/PageChrome";
import { apiFetch } from "@/lib/api/http";
import { Card } from "@/components/ui/Card";

const SkillSchema = z.object({
  id: z.string().uuid(),
  title: z.string(),
  author: z.string(),
  description: z.string(),
  installs: z.number(),
});

// The Skill Library (§8.1): catalog + workspace skills, two-column cards.
export default async function SkillsPage() {
  const skills = await apiFetch(z.array(SkillSchema), "/api/skills");
  return (
    <PageChrome
      title="Skill Library"
      description="Browse skills published by your team and the catalog. Install them on a claw from its Computer → Skills app."
    >
      {skills.length === 0 ? (
        <p className="text-sm text-muted-foreground">
          No skills published yet.
        </p>
      ) : (
        <ul className="grid grid-cols-1 gap-4 sm:grid-cols-2">
          {skills.map((skill) => (
            <li key={skill.id}>
              <Card className="h-full">
                <p className="text-lg font-semibold">{skill.title}</p>
                <p className="text-xxs text-muted-foreground">
                  by {skill.author}
                </p>
                <p className="pt-3 text-xs text-muted-foreground">
                  {skill.description}
                </p>
                <p className="pt-4 text-xxs text-muted-foreground">
                  {skill.installs}{" "}
                  {skill.installs === 1 ? "install" : "installs"} on your team
                </p>
              </Card>
            </li>
          ))}
        </ul>
      )}
    </PageChrome>
  );
}