import Link from "next/link";
import { apiFetch } from "@/lib/api";
import { CreateBoardButton } from "@/components/create-board-button";

interface Board {
  id: string;
  name: string;
  slug: string;
  publicKey: string;
  createdAt: string;
  _count?: { feedback: number };
}

async function getBoards(): Promise<Board[]> {
  const res = await apiFetch("/v1/boards");
  if (!res.ok) return [];
  return res.json();
}

export default async function DashboardOverview() {
  const boards = await getBoards();
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold mb-1">Your boards</h1>
          <p className="text-white/50 text-sm">One board per product. Each gets its own widget + roadmap.</p>
        </div>
        <CreateBoardButton />
      </div>

      {boards.length === 0 ? (
        <div className="bg-ink-800/50 border border-white/10 rounded-xl p-10 text-center">
          <div className="text-4xl mb-3">📋</div>
          <h2 className="font-bold text-lg mb-2">No boards yet</h2>
          <p className="text-white/60 text-sm mb-5">Create your first board to start collecting feedback.</p>
          <CreateBoardButton />
        </div>
      ) : (
        <div className="grid md:grid-cols-2 gap-4">
          {boards.map((b) => (
            <Link key={b.id} href={`/dashboard/boards/${b.id}`}
              className="bg-ink-800/50 border border-white/10 rounded-xl p-5 hover:border-brand-500/40 transition">
              <div className="flex items-start justify-between mb-3">
                <div>
                  <h3 className="font-bold text-lg">{b.name}</h3>
                  <p className="text-xs text-white/40 font-mono">/{b.slug}</p>
                </div>
                <span className="text-xs px-2 py-1 rounded bg-brand-500/10 text-brand-400 font-mono">
                  {b._count?.feedback ?? 0} items
                </span>
              </div>
              <div className="text-xs text-white/40">
                Public roadmap: <span className="text-brand-400">inbox.mindie.dev/r/{b.publicKey}</span>
              </div>
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}