import { notFound } from "next/navigation";
import { AdminUserActions } from "@/components/AdminUserActions";
import { courses } from "@/lib/courses";
import { db, getUserById, unlockedCourses } from "@/lib/db";

export default async function AdminUserDetail({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const user = await getUserById(id);
  if (!user) notFound();
  const unlocked = await unlockedCourses(id);
  const payments = await db
    .prepare(
      `SELECT reference, kind, course_slug, amount, status, created_at FROM payments WHERE user_id = ? ORDER BY created_at DESC`
    )
    .all(id) as {
    reference: string;
    kind: string;
    course_slug: string | null;
    amount: number;
    status: string;
    created_at: string;
  }[];

  return (
    <div className="mx-auto max-w-3xl px-4 py-10">
      <a href="/admin/users" className="text-sm text-terra">
        ← All users
      </a>
      <h1 className="font-display mt-3 text-4xl text-forest">{user.name}</h1>
      <p className="mt-1 text-sm text-forest/70">
        {user.email} · {user.phone || "no phone"} · joined {new Date(user.created_at).toLocaleString()}
      </p>
      <div className="mt-6 grid gap-3 rounded-3xl bg-cream p-5 text-sm sm:grid-cols-2">
        <p>
          <strong>Role:</strong> {user.role}
        </p>
        <p>
          <strong>Status:</strong> {user.status}
        </p>
        <p>
          <strong>Trial ends:</strong> {new Date(user.trial_ends_at).toLocaleString()}
        </p>
        <p>
          <strong>Live coach until:</strong>{" "}
          {user.agent_until ? new Date(user.agent_until).toLocaleString() : "—"}
        </p>
        <p>
          <strong>Abandoned-order email:</strong>{" "}
          {user.abandoned_email_sent_at
            ? new Date(user.abandoned_email_sent_at).toLocaleString()
            : user.has_access
              ? "Not needed"
              : "Waiting (10 min after join)"}
        </p>
      </div>
      <div className="mt-8 rounded-3xl border border-forest/10 bg-cream p-5">
        <h2 className="font-display text-2xl text-forest">Actions</h2>
        <div className="mt-4">
          <AdminUserActions
            userId={user.id}
            role={user.role}
            status={user.status}
            unlocked={unlocked}
            courseList={courses.map((c) => ({ slug: c.slug, title: c.title }))}
          />
        </div>
      </div>
      <h2 className="font-display mt-10 text-2xl text-forest">Payments</h2>
      <ul className="mt-3 space-y-2 text-sm">
        {payments.length === 0 ? <li className="text-forest/50">None yet.</li> : null}
        {payments.map((p) => (
          <li key={p.reference} className="rounded-2xl bg-cream px-4 py-3">
            {p.status} · {p.kind}
            {p.course_slug ? ` · ${p.course_slug}` : ""} · ₵{p.amount / 100} · {p.reference}
          </li>
        ))}
      </ul>
    </div>
  );
}