import Link from "next/link";
import { apiFetch } from "@/lib/api";
import { CopyableSnippet } from "@/components/copyable-snippet";

async function load(id: string) {
  const res = await apiFetch(`/v1/boards/${id}`);
  if (!res.ok) return null;
  return res.json();
}

export default async function EmbedPage({ params }: { params: { id: string } }) {
  const board = await load(params.id);
  if (!board) return <div className="text-white/60">Board not found.</div>;
  const snippet = `<script\n  src="https://inbox.mindie.dev/widget.js"\n  data-board="${board.publicKey}"\n  async></script>`;
  return (
    <div className="space-y-6 max-w-3xl">
      <div>
        <Link href={`/dashboard/boards/${board.id}`} className="text-xs text-white/40 hover:text-white">← {board.name}</Link>
        <h1 className="text-3xl font-bold mb-1 mt-1">Embed widget</h1>
        <p className="text-white/50 text-sm">Drop these 3 lines anywhere in your site's HTML.</p>
      </div>
      <CopyableSnippet snippet={snippet} />
      <div className="bg-ink-800/50 border border-white/10 rounded-xl p-5">
        <h3 className="font-bold mb-2">What you get:</h3>
        <ul className="text-sm text-white/70 space-y-1.5">
          <li className="flex gap-2"><span className="text-brand-400">•</span>A floating 💬 button bottom-right of every page</li>
          <li className="flex gap-2"><span className="text-brand-400">•</span>Feedback form opens in modal; users can submit anonymously or leave email</li>
          <li className="flex gap-2"><span className="text-brand-400">•</span>All submissions land in this dashboard, plus public roadmap at <span className="font-mono">inbox.mindie.dev/r/{board.publicKey}</span></li>
          <li className="flex gap-2"><span className="text-brand-400">•</span>Bundle is 1.75 KB gzipped, zero dependencies</li>
        </ul>
      </div>
      <div className="text-sm text-white/50">
        Test the widget right now: open browser devtools → console → paste the snippet there to inject it on this page.
      </div>
    </div>
  );
}