import { notFound } from "next/navigation";
import { PageHeader } from "@/components/layout/page-header";
import { Badge } from "@/components/ui/badge";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { createClient } from "@/lib/supabase/server";
import { ApplyClient, type ApplyLead } from "./apply-client";

interface ShortlistedRow {
  lead_id: string;
  lead: { full_name: string } | { full_name: string }[] | null;
}

export default async function ApplyPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const supabase = await createClient();

  const { data: course } = await supabase
    .from("courses")
    .select("title, level, country")
    .eq("id", id)
    .single();

  if (!course) notFound();

  const { data: leadsData } = await supabase
    .from("leads")
    .select("id, full_name, phone")
    .order("created_at", { ascending: false })
    .limit(200);

  const leads: ApplyLead[] = (leadsData ?? []) as ApplyLead[];

  const { data: shortlistData } = await supabase
    .from("course_shortlist")
    .select("lead_id, lead:leads(full_name)")
    .eq("course_id", id);

  const shortlisted = (shortlistData ?? []) as ShortlistedRow[];

  return (
    <div>
      <PageHeader
        title={`Apply: ${course.title}`}
        breadcrumb="Course Finder / Apply"
      />

      <div className="space-y-6">
        <Card>
          <CardHeader>
            <CardTitle>{course.title}</CardTitle>
            <CardDescription className="flex flex-wrap items-center gap-2">
              {course.level && <Badge variant="secondary">{course.level}</Badge>}
              {course.country && <Badge variant="outline">{course.country}</Badge>}
            </CardDescription>
          </CardHeader>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Shortlist this course</CardTitle>
            <CardDescription>
              Pick an existing lead to add this course to their shortlist.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <ApplyClient courseId={id} leads={leads} />
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Leads already shortlisted</CardTitle>
            <CardDescription>
              {shortlisted.length} lead(s) have shortlisted this course.
            </CardDescription>
          </CardHeader>
          <CardContent>
            {shortlisted.length === 0 ? (
              <p className="text-sm text-muted-foreground">
                No leads have shortlisted this course yet.
              </p>
            ) : (
              <ul className="space-y-2">
                {shortlisted.map((row) => {
                  const lead = Array.isArray(row.lead) ? row.lead[0] : row.lead;
                  return (
                    <li
                      key={row.lead_id}
                      className="rounded-md border px-3 py-2 text-sm"
                    >
                      {lead?.full_name ?? "Unknown lead"}
                    </li>
                  );
                })}
              </ul>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  );
}