"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import { upsertVisa, type VisaInput } from "./actions";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
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]";

interface StatusOption {
  id: string;
  name: string;
}

interface CurrentVisa {
  status_id?: string | null;
  applied_date?: string | null;
  interview_date?: string | null;
  decision?: string | null;
  decision_date?: string | null;
  notes?: string | null;
}

export function VisaClient({
  applicationId,
  statuses,
  current,
}: {
  applicationId: string;
  statuses: StatusOption[];
  current?: CurrentVisa | null;
}) {
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const [pending, startTransition] = useTransition();

  const c = current ?? {};
  const [statusId, setStatusId] = useState(c.status_id ?? "");
  const [appliedDate, setAppliedDate] = useState(c.applied_date ?? "");
  const [interviewDate, setInterviewDate] = useState(c.interview_date ?? "");
  const [decision, setDecision] = useState(c.decision ?? "");
  const [decisionDate, setDecisionDate] = useState(c.decision_date ?? "");
  const [notes, setNotes] = useState(c.notes ?? "");

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    const payload: VisaInput = {
      status_id: statusId,
      applied_date: appliedDate,
      interview_date: interviewDate,
      decision,
      decision_date: decisionDate,
      notes,
    };
    startTransition(async () => {
      const res = await upsertVisa(applicationId, payload);
      if (res.error) {
        toast.error(res.error);
        return;
      }
      toast.success("Visa tracking updated");
      setOpen(false);
      router.refresh();
    });
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant="outline" size="sm">
          Update Visa
        </Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Update Visa</DialogTitle>
        </DialogHeader>
        <form onSubmit={handleSubmit} className="grid grid-cols-2 gap-4">
          <div className="col-span-2 space-y-2">
            <Label>Status</Label>
            <Select
              value={statusId || NONE}
              onValueChange={(v) => setStatusId(v === NONE ? "" : v)}
            >
              <SelectTrigger>
                <SelectValue placeholder="Select status" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value={NONE}>None</SelectItem>
                {statuses.map((s) => (
                  <SelectItem key={s.id} value={s.id}>
                    {s.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-2">
            <Label htmlFor="applied_date">Applied date</Label>
            <Input
              id="applied_date"
              type="date"
              value={appliedDate}
              onChange={(e) => setAppliedDate(e.target.value)}
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="interview_date">Interview date</Label>
            <Input
              id="interview_date"
              type="date"
              value={interviewDate}
              onChange={(e) => setInterviewDate(e.target.value)}
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="decision">Decision</Label>
            <Input
              id="decision"
              value={decision}
              onChange={(e) => setDecision(e.target.value)}
              placeholder="e.g. Approved"
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="decision_date">Decision date</Label>
            <Input
              id="decision_date"
              type="date"
              value={decisionDate}
              onChange={(e) => setDecisionDate(e.target.value)}
            />
          </div>

          <div className="col-span-2 space-y-2">
            <Label htmlFor="notes">Notes</Label>
            <textarea
              id="notes"
              className={textareaClass}
              value={notes}
              onChange={(e) => setNotes(e.target.value)}
            />
          </div>

          <div className="col-span-2 flex justify-end gap-2">
            <Button
              type="button"
              variant="outline"
              onClick={() => setOpen(false)}
              disabled={pending}
            >
              Cancel
            </Button>
            <Button type="submit" disabled={pending}>
              {pending ? "Saving…" : "Save"}
            </Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  );
}