"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 { NativeSelect, NativeSelectOption } from "@/components/ui/native-select";
import type { ReservationManager } from "@/data/platform-mock";
import type { ManagerInput } from "@/stores/platform/platform-store";
import { usePlatformStore } from "@/stores/platform/platform-store";

interface ManagerFormDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  manager?: ReservationManager | null;
  onSave: (input: ManagerInput) => void;
  onUpdate?: (id: string, input: Partial<ManagerInput>) => void;
}

export function ManagerFormDialog({ open, onOpenChange, manager, onSave, onUpdate }: ManagerFormDialogProps) {
  const venues = usePlatformStore((s) => s.venues);
  const [form, setForm] = useState<ManagerInput>({
    name: "",
    email: "",
    username: "",
    password: "",
    venueId: venues[0]?.id ?? "",
  });

  useEffect(() => {
    if (manager) {
      setForm({
        name: manager.name,
        email: manager.email,
        username: manager.username,
        password: "",
        venueId: manager.venueId,
        status: manager.status,
      });
    } else {
      setForm({
        name: "",
        email: "",
        username: "",
        password: "",
        venueId: venues[0]?.id ?? "",
        status: "active",
      });
    }
  }, [manager, open, venues]);

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

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle>{manager ? "Edit manager" : "Add manager"}</DialogTitle>
        </DialogHeader>
        <form onSubmit={handleSubmit} className="space-y-3">
          <div>
            <Label>Full name</Label>
            <Input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} required />
          </div>
          <div>
            <Label>Email</Label>
            <Input type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} required />
          </div>
          <div>
            <Label>Login username</Label>
            <Input
              value={form.username}
              onChange={(e) => setForm({ ...form, username: e.target.value })}
              required
              autoComplete="off"
            />
          </div>
          <div>
            <Label>{manager ? "New password (optional)" : "Login password"}</Label>
            <Input
              type="password"
              value={form.password}
              onChange={(e) => setForm({ ...form, password: e.target.value })}
              required={!manager}
              placeholder={manager ? "Leave blank to keep current" : ""}
              autoComplete="new-password"
            />
          </div>
          <div>
            <Label>Assign venue</Label>
            <NativeSelect value={form.venueId} onChange={(e) => setForm({ ...form, venueId: e.target.value })}>
              {venues.map((v) => (
                <NativeSelectOption key={v.id} value={v.id}>
                  {v.name}
                </NativeSelectOption>
              ))}
            </NativeSelect>
          </div>
          <DialogFooter>
            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
              Cancel
            </Button>
            <Button type="submit">{manager ? "Save" : "Add manager"}</Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}