interface Board { id: string; name: string; slug: string; publicKey: string; }
interface Feedback { id: string; title: string; body: string | null; upvoteCount: number; status: string; createdAt: string; }

async function load(publicKey: string): Promise<{ board: Board | null; feedback: Feedback[] }> {
  const apiBase = process.env.API_INTERNAL_URL || "http://api:3000";
  const [bRes, fRes] = await Promise.all([
    fetch(`${apiBase}/v1/boards/public/${publicKey}`, { cache: "no-store" }),
    fetch(`${apiBase}/v1/feedback/board/${publicKey}?public=true`, { cache: "no-store" }),
  ]);
  if (!bRes.ok) return { board: null, feedback: [] };
  const board = await bRes.json();
  // feedback endpoint takes boardId, not publicKey; fetch by board.id instead
  const fRes2 = await fetch(`${apiBase}/v1/feedback/board/${board.id}?public=true`, { cache: "no-store" });
  return { board, feedback: fRes2.ok ? await fRes2.json() : [] };
}

export default async function PublicRoadmap({ params }: { params: { publicKey: string } }) {
  const { board, feedback } = await load(params.publicKey);
  if (!board) return <main className="min-h-screen flex items-center justify-center bg-ink-950 text-white/60">Board not found.</main>;
  return (
    <main className="min-h-screen bg-ink-950 text-white">
      <header className="border-b border-white/5 backdrop-blur sticky top-0 z-50 bg-ink-950/80">
        <div className="max-w-3xl mx-auto px-6 h-14 flex items-center justify-between">
          <h1 className="font-bold tracking-tight">{board.name} · roadmap</h1>
          <a href="https://inbox.mindie.dev" target="_blank" rel="noreferrer" className="text-xs text-white/40 hover:text-white">
            Powered by InboxKit
          </a>
        </div>
      </header>
      <div className="max-w-3xl mx-auto px-6 py-8">
        <p className="text-white/50 text-sm mb-6">Public feature requests, vote on what matters to you.</p>
        {feedback.length === 0 ? (
          <div className="bg-ink-800/40 border border-white/10 rounded-xl p-10 text-center text-white/50">
            No public items yet.
          </div>
        ) : (
          <div className="space-y-2">
            {feedback.map((f) => (
              <div key={f.id} className="bg-ink-800/50 border border-white/10 rounded-lg p-4 flex items-start gap-4">
                <div className="text-center min-w-[48px]">
                  <div className="text-2xl font-bold">{f.upvoteCount}</div>
                  <div className="text-xs text-white/40 uppercase">votes</div>
                </div>
                <div className="flex-1 min-w-0">
                  <h3 className="font-semibold mb-1">{f.title}</h3>
                  {f.body && <p className="text-sm text-white/60 mb-2">{f.body}</p>}
                  <span className={`text-xs px-2 py-0.5 rounded font-mono ${
                    f.status === "open" ? "bg-blue-500/10 text-blue-400" :
                    f.status === "in_progress" ? "bg-yellow-500/10 text-yellow-400" :
                    f.status === "done" ? "bg-emerald-500/10 text-emerald-400" :
                    "bg-white/5 text-white/40"
                  }`}>{f.status}</span>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </main>
  );
}