import Link from "next/link";
import { notFound } from "next/navigation";
import { createClient } from "@/lib/supabase/server";
import { PageHeader } from "@/components/layout/page-header";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import {
  Card,
  CardHeader,
  CardTitle,
  CardContent,
} from "@/components/ui/card";
import { APPLICATION_STATUS_STYLES } from "@/lib/applications/constants";
import { StatusChanger } from "./status-changer";
import { InviteButton } from "./invite-button";
import { AdminEmailForm } from "./admin-email-form";

function fmtDate(d: string | null): string {
  if (!d) return "—";
  return new Date(d).toLocaleDateString("en-IN", {
    day: "2-digit",
    month: "short",
    year: "numeric",
  });
}

function fmtDateTime(iso: string | null): string {
  if (!iso) return "—";
  return new Date(iso).toLocaleString("en-IN", {
    day: "2-digit",
    month: "short",
    year: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  });
}

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 oneField<T>(
  rel: T | T[] | null | undefined,
  key: keyof T,
): string {
  if (!rel) return "";
  const r = Array.isArray(rel) ? rel[0] : rel;
  const v = r?.[key];
  return v != null ? String(v) : "";
}

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 StudentApplicationDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const supabase = await createClient();

  const { data: app } = await supabase
    .from("student_applications")
    .select(
      "*, institute:institutes(name), campus:campuses(name), type:application_types(name), counselor:users!counselor_id(full_name), partner:users!partner_id(full_name, email)",
    )
    .eq("id", id)
    .single();

  if (!app) notFound();

  const { data: visa } = await supabase
    .from("visa_tracking")
    .select("*, status:visa_statuses(name)")
    .eq("student_application_id", id)
    .maybeSingle();

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

  return (
    <div>
      <PageHeader
        title={app.applicant_name}
        breadcrumb="Application / Student Application / Detail"
        action={
          <div className="flex flex-wrap items-center gap-2">
            <StatusChanger applicationId={app.id} current={app.status} />
            <InviteButton
              applicationId={app.id}
              alreadyInvited={!!app.student_user_id}
            />
            <Button asChild variant="outline">
              <Link href={`/applications/student/${app.id}/messages`}>
                Messages
              </Link>
            </Button>
            <Button asChild variant="outline">
              <Link href={`/applications/student/${app.id}/edit`}>Edit</Link>
            </Button>
            <Button asChild variant="outline">
              <Link href={`/applications/student/${app.id}/documents`}>
                Documents
              </Link>
            </Button>
            <Button asChild variant="outline">
              <Link href="/applications/visa">Visa Tracking</Link>
            </Button>
          </div>
        }
      />

      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
        {/* Applicant */}
        <Card>
          <CardHeader>
            <CardTitle>Applicant</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="mb-3 flex items-center justify-between">
              <span className="text-sm text-muted-foreground">Status</span>
              <Badge className={statusStyle}>{app.status}</Badge>
            </div>
            <Separator className="my-2" />
            <div className="py-2">
              <AdminEmailForm
                applicationId={app.id}
                currentEmail={app.email}
                studentInvited={!!app.student_user_id}
              />
            </div>
            <InfoRow label="Phone" value={app.phone} />
            <InfoRow label="Country" value={app.country} />
            <InfoRow
              label="Student profile"
              value={
                app.profile_completed_at
                  ? "Complete"
                  : app.invite_sent_at
                    ? "Pending"
                    : "Not invited"
              }
            />
          </CardContent>
        </Card>

        {/* Course / Institute */}
        <Card>
          <CardHeader>
            <CardTitle>Course &amp; Institute</CardTitle>
          </CardHeader>
          <CardContent>
            <InfoRow label="Institute" value={oneName(app.institute)} />
            <InfoRow label="Campus" value={oneName(app.campus)} />
            <InfoRow label="Intake month" value={app.intake_month} />
            <InfoRow label="Intake year" value={app.intake_year} />
          </CardContent>
        </Card>

        {/* Application meta */}
        <Card>
          <CardHeader>
            <CardTitle>Application</CardTitle>
          </CardHeader>
          <CardContent>
            <InfoRow label="Type" value={oneName(app.type)} />
            <InfoRow
              label="B2B partner"
              value={oneField(app.partner, "full_name")}
            />
            <InfoRow label="Counselor" value={oneField(app.counselor, "full_name")} />
            <InfoRow label="Created" value={fmtDateTime(app.created_at)} />
            <InfoRow label="Updated" value={fmtDateTime(app.updated_at)} />
          </CardContent>
        </Card>

        {/* Offer & Fees */}
        <Card>
          <CardHeader>
            <CardTitle>Offer &amp; Fees</CardTitle>
          </CardHeader>
          <CardContent>
            <InfoRow
              label="Offer received"
              value={app.offer_received ? "Yes" : "No"}
            />
            <InfoRow label="Offer date" value={fmtDate(app.offer_date)} />
            <InfoRow
              label="Tuition fee"
              value={
                app.tuition_fee != null
                  ? `${app.tuition_fee} ${app.currency ?? ""}`.trim()
                  : null
              }
            />
          </CardContent>
        </Card>

        {/* Visa status (read-only) */}
        <Card className="lg:col-span-2">
          <CardHeader>
            <CardTitle>Visa Status</CardTitle>
          </CardHeader>
          <CardContent>
            {visa ? (
              <>
                <InfoRow label="Visa status" value={oneName(visa.status)} />
                <InfoRow
                  label="Application date"
                  value={fmtDate(visa.application_date ?? null)}
                />
                <InfoRow label="Remarks" value={visa.remarks ?? null} />
              </>
            ) : (
              <p className="text-sm text-muted-foreground">
                No visa tracking record yet.{" "}
                <Link
                  href="/applications/visa"
                  className="text-brand-blue underline"
                >
                  Manage visa tracking
                </Link>
              </p>
            )}
          </CardContent>
        </Card>
      </div>

      {app.remarks && (
        <Card className="mt-6">
          <CardHeader>
            <CardTitle>Remarks</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-sm whitespace-pre-wrap">{app.remarks}</p>
          </CardContent>
        </Card>
      )}
    </div>
  );
}