"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import {
  createCourse,
  updateCourse,
  type CourseFormInput,
} from "./actions";
import type { CourseFormOptions } from "@/lib/courses/queries";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

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 function CourseForm({
  options,
  defaults,
  courseId,
}: {
  options: CourseFormOptions;
  defaults?: Partial<Record<string, unknown>>;
  courseId?: string;
}) {
  const router = useRouter();
  const [pending, startTransition] = useTransition();

  const d = (defaults ?? {}) as Record<string, unknown>;
  const str = (k: string) => (d[k] != null ? String(d[k]) : "");

  // Course
  const [title, setTitle] = useState(str("title"));
  const [instituteId, setInstituteId] = useState(str("institute_id"));
  const [campusId, setCampusId] = useState(str("campus_id"));
  const [programLevelId, setProgramLevelId] = useState(str("program_level_id"));
  const [qualificationId, setQualificationId] = useState(str("qualification_id"));
  const [streamId, setStreamId] = useState(str("stream_id"));
  const [level, setLevel] = useState(str("level"));

  // Location
  const [country, setCountry] = useState(str("country"));
  const [state, setState] = useState(str("state"));

  // Fees & Duration
  const [applicationFee, setApplicationFee] = useState(str("application_fee"));
  const [yearlyTuitionFee, setYearlyTuitionFee] = useState(
    str("yearly_tuition_fee"),
  );
  const [currency, setCurrency] = useState(str("currency") || "GBP");
  const [durationMonths, setDurationMonths] = useState(str("duration_months"));
  const [durationLabel, setDurationLabel] = useState(str("duration_label"));

  // Intake & Requirements
  const [intakeMonths, setIntakeMonths] = useState(str("intake_months"));
  const [intakeYear, setIntakeYear] = useState(str("intake_year"));
  const [requirements, setRequirements] = useState(str("requirements"));
  const [tags, setTags] = useState<string[]>(
    Array.isArray(d.tags) ? (d.tags as string[]) : [],
  );
  const [isActive, setIsActive] = useState(
    d.is_active != null ? Boolean(d.is_active) : true,
  );

  function toggleTag(name: string, checked: boolean) {
    setTags((prev) =>
      checked ? [...new Set([...prev, name])] : prev.filter((x) => x !== name),
    );
  }

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!title.trim()) {
      toast.error("Title is required");
      return;
    }

    const payload: CourseFormInput = {
      title,
      institute_id: instituteId,
      campus_id: campusId,
      country,
      state,
      program_level_id: programLevelId,
      qualification_id: qualificationId,
      stream_id: streamId,
      level,
      application_fee: applicationFee,
      yearly_tuition_fee: yearlyTuitionFee,
      currency,
      duration_months: durationMonths,
      duration_label: durationLabel,
      intake_months: intakeMonths,
      intake_year: intakeYear,
      requirements,
      tags,
      is_active: isActive,
    };

    startTransition(async () => {
      const res = courseId
        ? await updateCourse(courseId, payload)
        : await createCourse(payload);
      if (res.error) {
        toast.error(res.error);
        return;
      }
      toast.success(courseId ? "Course updated" : "Course created");
      router.push(res.id ? `/course-finder/${res.id}` : "/course-finder");
    });
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      {/* Course */}
      <Card>
        <CardHeader>
          <CardTitle>Course</CardTitle>
        </CardHeader>
        <CardContent className="grid grid-cols-1 gap-4 sm:grid-cols-2">
          <div className="space-y-2 sm:col-span-2">
            <Label htmlFor="title">Title *</Label>
            <Input
              id="title"
              value={title}
              onChange={(e) => setTitle(e.target.value)}
              required
            />
          </div>
          <div className="space-y-2">
            <Label>Institute</Label>
            <Select
              value={instituteId || NONE}
              onValueChange={(v) => setInstituteId(v === NONE ? "" : v)}
            >
              <SelectTrigger className="w-full">
                <SelectValue placeholder="Select institute" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value={NONE}>—</SelectItem>
                {options.institutes.map((i) => (
                  <SelectItem key={i.id} value={i.id}>
                    {i.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-2">
            <Label>Campus</Label>
            <Select
              value={campusId || NONE}
              onValueChange={(v) => setCampusId(v === NONE ? "" : v)}
            >
              <SelectTrigger className="w-full">
                <SelectValue placeholder="Select campus" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value={NONE}>—</SelectItem>
                {options.campuses.map((c) => (
                  <SelectItem key={c.id} value={c.id}>
                    {c.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-2">
            <Label>Program level</Label>
            <Select
              value={programLevelId || NONE}
              onValueChange={(v) => setProgramLevelId(v === NONE ? "" : v)}
            >
              <SelectTrigger className="w-full">
                <SelectValue placeholder="Select program level" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value={NONE}>—</SelectItem>
                {options.programLevels.map((p) => (
                  <SelectItem key={p.id} value={p.id}>
                    {p.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-2">
            <Label>Qualification</Label>
            <Select
              value={qualificationId || NONE}
              onValueChange={(v) => setQualificationId(v === NONE ? "" : v)}
            >
              <SelectTrigger className="w-full">
                <SelectValue placeholder="Select qualification" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value={NONE}>—</SelectItem>
                {options.qualifications.map((q) => (
                  <SelectItem key={q.id} value={q.id}>
                    {q.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-2">
            <Label>Stream</Label>
            <Select
              value={streamId || NONE}
              onValueChange={(v) => setStreamId(v === NONE ? "" : v)}
            >
              <SelectTrigger className="w-full">
                <SelectValue placeholder="Select stream" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value={NONE}>—</SelectItem>
                {options.streams.map((s) => (
                  <SelectItem key={s.id} value={s.id}>
                    {s.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-2">
            <Label htmlFor="level">Level</Label>
            <Input
              id="level"
              value={level}
              onChange={(e) => setLevel(e.target.value)}
              placeholder="e.g. Undergraduate"
            />
          </div>
        </CardContent>
      </Card>

      {/* Location */}
      <Card>
        <CardHeader>
          <CardTitle>Location</CardTitle>
        </CardHeader>
        <CardContent className="grid grid-cols-1 gap-4 sm:grid-cols-2">
          <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>
                <SelectItem value={NONE}>—</SelectItem>
                {options.countries.map((c) => (
                  <SelectItem key={c.id} value={c.name}>
                    {c.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-2">
            <Label htmlFor="state">State</Label>
            <Input
              id="state"
              value={state}
              onChange={(e) => setState(e.target.value)}
            />
          </div>
        </CardContent>
      </Card>

      {/* Fees & Duration */}
      <Card>
        <CardHeader>
          <CardTitle>Fees &amp; Duration</CardTitle>
        </CardHeader>
        <CardContent className="grid grid-cols-1 gap-4 sm:grid-cols-2">
          <div className="space-y-2">
            <Label htmlFor="application_fee">Application fee</Label>
            <Input
              id="application_fee"
              type="number"
              min={0}
              step="0.01"
              value={applicationFee}
              onChange={(e) => setApplicationFee(e.target.value)}
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="yearly_tuition_fee">Yearly tuition fee</Label>
            <Input
              id="yearly_tuition_fee"
              type="number"
              min={0}
              step="0.01"
              value={yearlyTuitionFee}
              onChange={(e) => setYearlyTuitionFee(e.target.value)}
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="currency">Currency</Label>
            <Input
              id="currency"
              value={currency}
              onChange={(e) => setCurrency(e.target.value)}
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="duration_months">Duration (months)</Label>
            <Input
              id="duration_months"
              type="number"
              min={0}
              value={durationMonths}
              onChange={(e) => setDurationMonths(e.target.value)}
            />
          </div>
          <div className="space-y-2 sm:col-span-2">
            <Label htmlFor="duration_label">Duration label</Label>
            <Input
              id="duration_label"
              value={durationLabel}
              onChange={(e) => setDurationLabel(e.target.value)}
              placeholder="e.g. 3 years full-time"
            />
          </div>
        </CardContent>
      </Card>

      {/* Intake & Requirements */}
      <Card>
        <CardHeader>
          <CardTitle>Intake &amp; Requirements</CardTitle>
        </CardHeader>
        <CardContent className="grid grid-cols-1 gap-4 sm:grid-cols-2">
          <div className="space-y-2">
            <Label htmlFor="intake_months">Intake months</Label>
            <Input
              id="intake_months"
              value={intakeMonths}
              onChange={(e) => setIntakeMonths(e.target.value)}
              placeholder="e.g. Sep, Jan"
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="intake_year">Intake year</Label>
            <Input
              id="intake_year"
              type="number"
              min={0}
              value={intakeYear}
              onChange={(e) => setIntakeYear(e.target.value)}
            />
          </div>
          <div className="space-y-2 sm:col-span-2">
            <Label htmlFor="requirements">Requirements</Label>
            <textarea
              id="requirements"
              className={textareaClass}
              value={requirements}
              onChange={(e) => setRequirements(e.target.value)}
            />
          </div>
          <div className="space-y-2 sm:col-span-2">
            <Label>Tags</Label>
            {options.courseTags.length === 0 ? (
              <p className="text-sm text-muted-foreground">No tags available.</p>
            ) : (
              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
                {options.courseTags.map((t) => (
                  <label
                    key={t.id}
                    className="flex items-center gap-2 text-sm"
                  >
                    <Checkbox
                      checked={tags.includes(t.name)}
                      onCheckedChange={(c) => toggleTag(t.name, c === true)}
                    />
                    {t.name}
                  </label>
                ))}
              </div>
            )}
          </div>
          <div className="space-y-2 sm:col-span-2">
            <label className="flex items-center gap-2 text-sm">
              <Checkbox
                checked={isActive}
                onCheckedChange={(c) => setIsActive(c === true)}
              />
              Active
            </label>
          </div>
        </CardContent>
      </Card>

      <div className="flex justify-end gap-3">
        <Button
          type="button"
          variant="outline"
          onClick={() => router.push("/course-finder")}
          disabled={pending}
        >
          Cancel
        </Button>
        <Button type="submit" disabled={pending}>
          {pending ? "Saving…" : courseId ? "Update course" : "Create course"}
        </Button>
      </div>
    </form>
  );
}