import Link from "next/link";
import { notFound } from "next/navigation";
import { requireUser } from "@/lib/auth/session";
import { createClient } from "@/lib/supabase/server";
import { APPLICATION_STATUS_STYLES } from "@/lib/applications/constants";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

function oneName(
  rel: { name: string } | { name: string }[] | null | undefined,
): string {
  if (!rel) return "";
  const r = Array.isArray(rel) ? rel[0] : rel;
  return r?.name ?? "";
}

function oneTitle(
  rel: { title: string } | { title: string }[] | null | undefined,
): string {
  if (!rel) return "";
  const r = Array.isArray(rel) ? rel[0] : rel;
  return r?.title ?? "";
}

function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
  return (
    <div className="flex items-start justify-between gap-4 py-1.5 text-sm">
      <span className="text-muted-foreground">{label}</span>
      <span className="text-right font-medium">{value || "—"}</span>
    </div>
  );
}

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

  const { data: app } = await supabase
    .from("student_applications")
    .select(
      "*, institute:institutes(name), campus:campuses(name), course:courses(title), type:application_types(name)",
    )
    .eq("id", id)
    .eq("partner_id", user.id)
    .single();

  if (!app) notFound();

  const { count: docCount } = await supabase
    .from("application_documents")
    .select("*", { count: "exact", head: true })
    .eq("student_application_id", id);

  const statusStyle =
    APPLICATION_STATUS_STYLES[app.status] ?? "bg-gray-100 text-gray-800";

  const studentProfile = app.profile_completed_at
    ? "Profile complete — student can track"
    : app.invite_sent_at
      ? "Invite sent — awaiting student profile"
      : app.email
        ? "Email added — invite pending"
        : "Awaiting student email from EduAdvise";

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="font-heading text-2xl font-bold text-brand-navy">
            {app.applicant_name}
          </h1>
          <div className="mt-2 flex flex-wrap items-center gap-2">
            <Badge className={statusStyle}>{app.status}</Badge>
            <span className="text-sm text-muted-foreground">{studentProfile}</span>
          </div>
        </div>
        <div className="flex flex-wrap gap-2">
          <Button asChild variant="outline">
            <Link href="/partner/applications">All applications</Link>
          </Button>
          <Button asChild className="bg-brand-orange hover:bg-brand-orange/90">
            <Link href={`/partner/applications/${id}/documents`}>
              Documents ({docCount ?? 0})
            </Link>
          </Button>
        </div>
      </div>

      <div className="grid gap-6 lg:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Student</CardTitle>
          </CardHeader>
          <CardContent>
            <InfoRow label="Phone" value={app.phone} />
            <InfoRow label="Country" value={app.country} />
            <InfoRow label="Student email" value="Added by EduAdvise" />
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="text-base">Course &amp; intake</CardTitle>
          </CardHeader>
          <CardContent>
            <InfoRow label="Institute" value={oneName(app.institute)} />
            <InfoRow label="Campus" value={oneName(app.campus)} />
            <InfoRow label="Course" value={oneTitle(app.course)} />
            <InfoRow
              label="Intake"
              value={[app.intake_month, app.intake_year].filter(Boolean).join(" ")}
            />
          </CardContent>
        </Card>

        <Card className="lg:col-span-2">
          <CardHeader>
            <CardTitle className="text-base">Application notes</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-sm whitespace-pre-wrap text-muted-foreground">
              {app.remarks || "No notes provided."}
            </p>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}