"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Card, CardContent } from "@/components/ui/card";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { STATUT_CHAMBRE_LABELS, TYPE_CHAMBRE_LABELS, parseJsonField } from "@/lib/utils";
import { createChambre, updateChambre } from "@/actions/chambres";
import { Loader2, Save, X } from "lucide-react";

interface ChambreFormProps {
  chambre?: {
    id: string;
    numero: string;
    type: string;
    prix_nuit: number;
    capacite: number;
    description: string;
    statut: string;
    equipements: string;
    photos: string;
  };
}

export function ChambreForm({ chambre }: ChambreFormProps) {
  const router = useRouter();
  const [pending, startTransition] = useTransition();
  const [type, setType] = useState(chambre?.type || "SIMPLE");
  const [statut, setStatut] = useState(chambre?.statut || "DISPONIBLE");
  const [equipements, setEquipements] = useState<string[]>(
    parseJsonField<string[]>(chambre?.equipements, [])
  );
  const [equipInput, setEquipInput] = useState("");

  function addEquipement() {
    const v = equipInput.trim();
    if (v && !equipements.includes(v)) {
      setEquipements([...equipements, v]);
      setEquipInput("");
    }
  }
  function removeEquipement(item: string) {
    setEquipements(equipements.filter((e) => e !== item));
  }

  function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    formData.set("type", type);
    formData.set("statut", statut);
    formData.set("equipements", JSON.stringify(equipements));
    formData.set("photos", chambre?.photos || "[]");

    startTransition(async () => {
      const result = chambre
        ? await updateChambre(chambre.id, formData)
        : await createChambre(formData);

      if (result?.error) {
        toast.error(result.error);
      } else {
        toast.success(chambre ? "Chambre modifiée" : "Chambre créée");
      }
    });
  }

  return (
    <form onSubmit={onSubmit}>
      <Card>
        <CardContent className="p-6 space-y-5">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="numero">Numéro de chambre *</Label>
              <Input
                id="numero"
                name="numero"
                defaultValue={chambre?.numero}
                required
                placeholder="ex: 101"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="type">Type *</Label>
              <Select value={type} onValueChange={setType}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {Object.entries(TYPE_CHAMBRE_LABELS).map(([key, label]) => (
                    <SelectItem key={key} value={key}>
                      {label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label htmlFor="prix_nuit">Prix par nuit *</Label>
              <Input
                id="prix_nuit"
                name="prix_nuit"
                type="number"
                step="0.01"
                min="0"
                defaultValue={chambre?.prix_nuit}
                required
                placeholder="500.00"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="capacite">Capacité (personnes) *</Label>
              <Input
                id="capacite"
                name="capacite"
                type="number"
                min="1"
                max="20"
                defaultValue={chambre?.capacite || 2}
                required
              />
            </div>
            <div className="space-y-2 md:col-span-2">
              <Label htmlFor="statut">Statut</Label>
              <Select value={statut} onValueChange={setStatut}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {Object.entries(STATUT_CHAMBRE_LABELS).map(([key, label]) => (
                    <SelectItem key={key} value={key}>
                      {label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2 md:col-span-2">
              <Label htmlFor="description">Description</Label>
              <Textarea
                id="description"
                name="description"
                defaultValue={chambre?.description}
                placeholder="Description de la chambre, vue, ambiance…"
                rows={3}
              />
            </div>
            <div className="space-y-2 md:col-span-2">
              <Label>Équipements</Label>
              <div className="flex gap-2">
                <Input
                  value={equipInput}
                  onChange={(e) => setEquipInput(e.target.value)}
                  placeholder="Ex: Climatisation, Wi-Fi, TV..."
                  onKeyDown={(e) => {
                    if (e.key === "Enter") {
                      e.preventDefault();
                      addEquipement();
                    }
                  }}
                />
                <Button type="button" variant="outline" onClick={addEquipement}>
                  Ajouter
                </Button>
              </div>
              {equipements.length > 0 && (
                <div className="flex flex-wrap gap-2 mt-2">
                  {equipements.map((eq) => (
                    <span
                      key={eq}
                      className="inline-flex items-center gap-1 bg-secondary px-3 py-1 rounded-full text-xs"
                    >
                      {eq}
                      <button type="button" onClick={() => removeEquipement(eq)}>
                        <X className="w-3 h-3" />
                      </button>
                    </span>
                  ))}
                </div>
              )}
            </div>
          </div>

          <div className="flex gap-2 justify-end pt-2 border-t">
            <Button
              type="button"
              variant="outline"
              onClick={() => router.push("/chambres")}
              disabled={pending}
            >
              Annuler
            </Button>
            <Button type="submit" variant="accent" disabled={pending}>
              {pending ? (
                <Loader2 className="w-4 h-4 animate-spin" />
              ) : (
                <Save className="w-4 h-4" />
              )}
              {chambre ? "Enregistrer" : "Créer la chambre"}
            </Button>
          </div>
        </CardContent>
      </Card>
    </form>
  );
}