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

const BASE = "/partner/course-finder";

interface CourseDetail {
  id: string;
  title: string;
  country: string | null;
  state: string | null;
  level: string | null;
  application_fee: number | null;
  yearly_tuition_fee: number | null;
  currency: string | null;
  duration_months: number | null;
  duration_label: string | null;
  intake_months: string | null;
  intake_year: number | null;
  requirements: string | null;
  tags: string[] | null;
  institute: { name: string; logo_url: string | null } | null;
  campus: { name: string } | null;
}

function fmtMoney(amount: number | null, currency: string | null): string {
  if (amount == null) return "—";
  return `${currency ?? "GBP"} ${amount.toLocaleString()}`;
}

function Field({ label, value }: { label: string; value: React.ReactNode }) {
  return (
    <div className="space-y-1">
      <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
        {label}
      </p>
      <p className="text-sm">{value ?? "—"}</p>
    </div>
  );
}

export default async function PartnerCourseDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  await requirePermission("course_finder", "read");

  const { id } = await params;
  const supabase = await createClient();

  const { data: course } = await supabase
    .from("courses")
    .select("*, institute:institutes(name, logo_url), campus:campuses(name)")
    .eq("id", id)
    .eq("is_active", true)
    .single();

  if (!course) notFound();

  const c = course as unknown as CourseDetail;
  const duration =
    c.duration_label ??
    (c.duration_months != null ? `${c.duration_months} months` : null);
  const intake = [c.intake_months, c.intake_year]
    .filter((v) => v != null && v !== "")
    .join(" ");

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
        <div>
          <p className="text-sm text-muted-foreground">
            <Link href={BASE} className="text-brand-blue hover:underline">
              Course Finder
            </Link>
          </p>
          <h1 className="font-heading mt-1 text-2xl font-bold text-brand-navy">
            {c.title}
          </h1>
          <p className="mt-1 text-sm text-muted-foreground">
            {c.institute?.name ?? "Unknown institute"}
          </p>
        </div>
        <Button
          asChild
          className="bg-brand-orange shrink-0 hover:bg-brand-orange/90"
        >
          <Link href={`${BASE}/${id}/apply`}>Apply for student</Link>
        </Button>
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="text-base">Programme details</CardTitle>
        </CardHeader>
        <CardContent className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
          <Field label="Level" value={c.level} />
          <Field label="Campus" value={c.campus?.name} />
          <Field
            label="Location"
            value={[c.state, c.country].filter(Boolean).join(", ") || null}
          />
          <Field
            label="Application fee"
            value={fmtMoney(c.application_fee, c.currency)}
          />
          <Field
            label="Yearly tuition"
            value={fmtMoney(c.yearly_tuition_fee, c.currency)}
          />
          <Field label="Duration" value={duration} />
          <Field label="Intake" value={intake || null} />
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="text-base">Entry requirements</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="whitespace-pre-wrap text-sm">
            {c.requirements ?? "Contact EduAdvise for entry requirements."}
          </p>
        </CardContent>
      </Card>

      {c.tags && c.tags.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Tags</CardTitle>
          </CardHeader>
          <CardContent className="flex flex-wrap gap-2">
            {c.tags.map((t) => (
              <Badge key={t} variant="secondary">
                {t}
              </Badge>
            ))}
          </CardContent>
        </Card>
      )}

      <div className="flex gap-2">
        <Button asChild variant="outline">
          <Link href={BASE}>Back to search</Link>
        </Button>
        <Button asChild className="bg-brand-orange hover:bg-brand-orange/90">
          <Link href={`${BASE}/${id}/apply`}>Apply for student</Link>
        </Button>
      </div>
    </div>
  );
}