import Link from "next/link";
import { apiFetch } from "@/lib/api";

interface Board {
  id: string;
  name: string;
  slug: string;
  publicKey: string;
}

interface Feedback {
  id: string;
  title: string;
  body: string | null;
  upvoteCount: number;
  status: string;
  submitterEmail: string | null;
  createdAt: string;
}

async function load(id: string): Promise<{ board: Board | null; feedback: Feedback[] }> {
  const [bRes, fRes] = await Promise.all([
    apiFetch(`/v1/boards/${id}`),
    apiFetch(`/v1/feedback/board/${id}`),
  ]);
  if (!bRes.ok) return { board: null, feedback: [] };
  return { board: await bRes.json(), feedback: fRes.ok ? await fRes.json() : [] };
}

export default async function BoardPage({ params }: { params: { id: string } }) {
  const { board, feedback } = await load(params.id);
  if (!board) {
    return <div className="text-white/60">Board not found.</div>;
  }
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <Link href="/dashboard" className="text-xs text-white/40 hover:text-white">← all boards</Link>
          <h1 className="text-3xl font-bold mb-1 mt-1">{board.name}</h1>
          <p className="text-xs text-white/40 font-mono">/{board.slug}</p>
        </div>
        <Link href={`/dashboard/boards/${board.id}/embed`}
          className="bg-brand-500 hover:bg-brand-400 text-ink-950 font-bold px-4 py-2 rounded-lg text-sm">
          Get embed code →
        </Link>
      </div>

      <div className="bg-ink-800/50 border border-white/10 rounded-xl p-4 flex items-center justify-between">
        <div>
          <div className="text-xs uppercase text-white/40 font-mono mb-1">Public roadmap</div>
          <a href={`/r/${board.publicKey}`} target="_blank" rel="noreferrer"
            className="text-brand-400 hover:text-brand-300 underline">
            inbox.mindie.dev/r/{board.publicKey}
          </a>
        </div>
        <div className="text-2xl font-bold">{feedback.length} <span className="text-white/40 text-sm font-normal">items</span></div>
      </div>

      <div>
        <h2 className="font-bold text-lg mb-4">All feedback</h2>
        {feedback.length === 0 ? (
          <div className="bg-ink-800/30 border border-white/10 rounded-xl p-10 text-center text-white/50">
            <div className="text-3xl mb-3">💬</div>
            <p className="mb-1">No feedback yet.</p>
            <p className="text-xs text-white/40">Install the widget to start collecting.</p>
          </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-[44px]">
                  <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 line-clamp-2">{f.body}</p>}
                  <div className="text-xs text-white/40 flex items-center gap-3">
                    <span className={`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>
                    <span>·</span>
                    <span>{f.submitterEmail || "anonymous"}</span>
                    <span>·</span>
                    <span>{new Date(f.createdAt).toLocaleDateString()}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}