"use client";

import { useEffect, useState } 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 type { Venue } from "@/data/platform-mock";
import type { VenueInput } from "@/stores/platform/platform-store";

interface VenueFormDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  venue?: Venue | null;
  onSave: (input: VenueInput) => void;
  onUpdate?: (id: string, input: Partial<VenueInput>) => void;
}

const empty = (): VenueInput => ({
  name: "",
  address: "",
  contact: "",
  openingHours: "11:00 – 23:00",
  reservationDuration: 90,
  maxCapacity: 50,
});

export function VenueFormDialog({ open, onOpenChange, venue, onSave, onUpdate }: VenueFormDialogProps) {
  const [form, setForm] = useState<VenueInput>(empty());

  useEffect(() => {
    if (venue) {
      setForm({
        name: venue.name,
        address: venue.address,
        contact: venue.contact,
        openingHours: venue.openingHours,
        reservationDuration: venue.reservationDuration,
        maxCapacity: venue.maxCapacity,
        status: venue.status,
      });
    } else {
      setForm(empty());
    }
  }, [venue, open]);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (venue && onUpdate) {
      onUpdate(venue.id, form);
    } else {
      onSave(form);
    }
    onOpenChange(false);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle>{venue ? "Edit venue" : "Add venue"}</DialogTitle>
        </DialogHeader>
        <form onSubmit={handleSubmit} className="space-y-3">
          <div>
            <Label>Venue name</Label>
            <Input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} required />
          </div>
          <div>
            <Label>Address</Label>
            <Input value={form.address} onChange={(e) => setForm({ ...form, address: e.target.value })} required />
          </div>
          <div>
            <Label>Contact number</Label>
            <Input value={form.contact} onChange={(e) => setForm({ ...form, contact: e.target.value })} required />
          </div>
          <div>
            <Label>Opening hours</Label>
            <Input value={form.openingHours} onChange={(e) => setForm({ ...form, openingHours: e.target.value })} />
          </div>
          <div className="grid grid-cols-2 gap-3">
            <div>
              <Label>Reservation duration (min)</Label>
              <Input
                type="number"
                value={form.reservationDuration}
                onChange={(e) => setForm({ ...form, reservationDuration: Number(e.target.value) })}
              />
            </div>
            <div>
              <Label>Max capacity</Label>
              <Input
                type="number"
                value={form.maxCapacity}
                onChange={(e) => setForm({ ...form, maxCapacity: Number(e.target.value) })}
              />
            </div>
          </div>
          <DialogFooter>
            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
              Cancel
            </Button>
            <Button type="submit">{venue ? "Save" : "Add venue"}</Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}