"use client";

import { useState, useTransition } from "react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { createCalendar } from "@/modules/calendar/server/actions";

const DEFAULT_COLOR = "#B85C3C";
const VISIBILITY_ITEMS = [
  { label: "Household", value: "household" },
  { label: "Private", value: "private" },
];

type Props = {
  open: boolean;
  onOpenChange: (open: boolean) => void;
};

export function CalendarCreateDialog({ open, onOpenChange }: Props) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md">
        {open ? <CalendarCreateForm onDone={() => onOpenChange(false)} /> : null}
      </DialogContent>
    </Dialog>
  );
}

function CalendarCreateForm({ onDone }: { onDone: () => void }) {
  const [name, setName] = useState("");
  const [color, setColor] = useState(DEFAULT_COLOR);
  const [visibility, setVisibility] = useState<"private" | "household">("household");
  const [isPending, startTransition] = useTransition();

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!name.trim()) return;
    startTransition(async () => {
      await createCalendar({ name: name.trim(), color, visibility });
      onDone();
    });
  }

  return (
    <>
      <DialogHeader>
        <DialogTitle>New calendar</DialogTitle>
      </DialogHeader>
      <form id="quick-add-calendar-form" onSubmit={handleSubmit} className="grid gap-3">
        <div className="space-y-1.5">
          <Label htmlFor="qa-calendar-name">Name</Label>
          <Input
            id="qa-calendar-name"
            value={name}
            onChange={(e) => setName(e.target.value)}
            required
          />
        </div>
        <div className="grid grid-cols-[1fr_1fr] gap-2">
          <Input
            aria-label="Calendar color"
            type="color"
            value={color}
            onChange={(e) => setColor(e.target.value)}
          />
          <Select
            items={VISIBILITY_ITEMS}
            value={visibility}
            onValueChange={(value) => setVisibility(value as "private" | "household")}
          >
            <SelectTrigger aria-label="Calendar visibility">
              <SelectValue>{visibility === "household" ? "Household" : "Private"}</SelectValue>
            </SelectTrigger>
            <SelectContent>
              <SelectGroup>
                {VISIBILITY_ITEMS.map((item) => (
                  <SelectItem key={item.value} value={item.value}>
                    {item.label}
                  </SelectItem>
                ))}
              </SelectGroup>
            </SelectContent>
          </Select>
        </div>
      </form>
      <DialogFooter>
        <Button type="submit" form="quick-add-calendar-form" disabled={!name.trim() || isPending}>
          Create calendar
        </Button>
      </DialogFooter>
    </>
  );
}