"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import {
  submitPartnerApplication,
  type PartnerApplicationInput,
} from "@/app/(partner)/partner/applications/actions";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { COUNTRIES } from "@/lib/constants";

const NONE = "__none__";

const textareaClass =
  "flex min-h-20 w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]";

export type PartnerCourseApplyDefaults = {
  courseId: string;
  courseTitle: string;
  instituteId: string | null;
  instituteName: string | null;
  campusId: string | null;
  campusName: string | null;
  country: string | null;
  level: string | null;
  intakeMonth: string;
  intakeYear: string;
  tuitionLabel: string | null;
};

export function PartnerCourseApplyForm({
  defaults,
}: {
  defaults: PartnerCourseApplyDefaults;
}) {
  const router = useRouter();
  const [pending, startTransition] = useTransition();

  const [applicantName, setApplicantName] = useState("");
  const [phone, setPhone] = useState("");
  const [country, setCountry] = useState(defaults.country ?? "");
  const [countrySearch, setCountrySearch] = useState("");
  const [remarks, setRemarks] = useState("");

  function buildPayload(status: "Draft" | "Submitted"): PartnerApplicationInput {
    return {
      applicant_name: applicantName,
      phone: phone || undefined,
      country: country || undefined,
      institute_id: defaults.instituteId ?? undefined,
      campus_id: defaults.campusId ?? undefined,
      course_id: defaults.courseId,
      intake_month: defaults.intakeMonth || undefined,
      intake_year: defaults.intakeYear || undefined,
      remarks: remarks || undefined,
      status,
    };
  }

  function onSubmit(status: "Draft" | "Submitted") {
    startTransition(async () => {
      const res = await submitPartnerApplication(buildPayload(status));
      if (res.error) {
        toast.error(res.error);
        return;
      }
      toast.success(
        status === "Draft"
          ? "Application saved as draft"
          : "Application submitted to EduAdvise",
      );
      router.push(
        res.id ? `/partner/applications/${res.id}` : "/partner/applications",
      );
    });
  }

  return (
    <div className="space-y-6">
      <Card className="border-brand-blue/20 bg-brand-blue/5">
        <CardHeader className="pb-3">
          <CardTitle className="text-base text-brand-navy">
            {defaults.courseTitle}
          </CardTitle>
          <CardDescription className="flex flex-wrap items-center gap-2">
            {defaults.instituteName && (
              <span>{defaults.instituteName}</span>
            )}
            {defaults.level && (
              <Badge variant="secondary">{defaults.level}</Badge>
            )}
            {defaults.campusName && (
              <Badge variant="outline">{defaults.campusName}</Badge>
            )}
          </CardDescription>
        </CardHeader>
        <CardContent className="grid gap-2 text-sm sm:grid-cols-2">
          {defaults.country && (
            <p>
              <span className="text-muted-foreground">Country: </span>
              {defaults.country}
            </p>
          )}
          {(defaults.intakeMonth || defaults.intakeYear) && (
            <p>
              <span className="text-muted-foreground">Intake: </span>
              {[defaults.intakeMonth, defaults.intakeYear]
                .filter(Boolean)
                .join(" ")}
            </p>
          )}
          {defaults.tuitionLabel && (
            <p className="sm:col-span-2">
              <span className="text-muted-foreground">Tuition: </span>
              {defaults.tuitionLabel}
            </p>
          )}
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="text-base">Student details</CardTitle>
          <CardDescription>
            EduAdvise will add the student email and invite them to complete
            their profile after review.
          </CardDescription>
        </CardHeader>
        <CardContent className="grid gap-4 sm:grid-cols-2">
          <div className="space-y-2 sm:col-span-2">
            <Label htmlFor="applicant_name">Student full name *</Label>
            <Input
              id="applicant_name"
              value={applicantName}
              onChange={(e) => setApplicantName(e.target.value)}
              required
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="phone">Phone</Label>
            <Input
              id="phone"
              value={phone}
              onChange={(e) => setPhone(e.target.value)}
            />
          </div>
          <div className="space-y-2">
            <Label>Country</Label>
            <Select value={country || NONE} onValueChange={(v) => setCountry(v === NONE ? "" : v)}>
              <SelectTrigger className="w-full">
                <SelectValue placeholder="Select country" />
              </SelectTrigger>
              <SelectContent position="popper">
                <div className="p-2 sticky top-0 bg-popover z-10 border-b">
                  <Input 
                    placeholder="Search country..." 
                    value={countrySearch} 
                    onChange={(e) => setCountrySearch(e.target.value)} 
                    onKeyDown={(e) => e.stopPropagation()}
                  />
                </div>
                <SelectItem value={NONE}>—</SelectItem>
                {COUNTRIES
                  .filter((c) => c.toLowerCase().includes(countrySearch.toLowerCase()))
                  .map((c) => (
                  <SelectItem key={c} value={c}>
                    {c}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-2 sm:col-span-2">
            <Label htmlFor="remarks">Notes for EduAdvise</Label>
            <textarea
              id="remarks"
              className={textareaClass}
              value={remarks}
              onChange={(e) => setRemarks(e.target.value)}
              placeholder="Any context for the counseling team…"
            />
          </div>
        </CardContent>
      </Card>

      <div className="flex flex-wrap gap-2">
        <Button
          type="button"
          variant="outline"
          disabled={pending}
          onClick={() => onSubmit("Draft")}
        >
          Save draft
        </Button>
        <Button
          type="button"
          className="bg-brand-orange hover:bg-brand-orange/90"
          disabled={pending || !applicantName.trim()}
          onClick={() => onSubmit("Submitted")}
        >
          {pending ? "Submitting…" : "Submit application to EduAdvise"}
        </Button>
      </div>
    </div>
  );
}