"use client";

import { useState, useTransition, useMemo } 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 {
  formatMoney,
  toInputDate,
  calculateNights,
  TYPE_CHAMBRE_LABELS,
  STATUT_RESERVATION_LABELS,
} from "@/lib/utils";
import { createReservation, updateReservation } from "@/actions/reservations";
import { Loader2, Save, CheckCircle2 } from "lucide-react";

interface Client {
  id: string;
  nom_complet: string;
  telephone: string;
}
interface Chambre {
  id: string;
  numero: string;
  type: string;
  prix_nuit: number;
  capacite: number;
}

interface ReservationFormProps {
  clients: Client[];
  chambres: Chambre[];
  devise: string;
  reservation?: {
    id: string;
    client_id: string;
    chambre_id: string;
    date_arrivee: Date;
    date_depart: Date;
    nb_personnes: number;
    statut: string;
    notes: string;
  };
}

export function ReservationForm({
  clients,
  chambres,
  devise,
  reservation,
}: ReservationFormProps) {
  const router = useRouter();
  const [pending, startTransition] = useTransition();

  const isEdit = !!reservation;
  const tomorrow = new Date();
  tomorrow.setDate(tomorrow.getDate() + 1);

  const [clientId, setClientId] = useState(reservation?.client_id || "");
  const [chambreId, setChambreId] = useState(reservation?.chambre_id || "");
  const [dateArrivee, setDateArrivee] = useState(
    reservation ? toInputDate(reservation.date_arrivee) : toInputDate(new Date())
  );
  const [dateDepart, setDateDepart] = useState(
    reservation ? toInputDate(reservation.date_depart) : toInputDate(tomorrow)
  );
  const [nbPersonnes, setNbPersonnes] = useState(reservation?.nb_personnes || 1);
  const [statut, setStatut] = useState(reservation?.statut || "CONFIRMEE");
  const [notes, setNotes] = useState(reservation?.notes || "");

  const chambreSelected = chambres.find((c) => c.id === chambreId);

  // Calcul automatique nuits + prix total
  const { nbNuits, prixTotal } = useMemo(() => {
    if (!dateArrivee || !dateDepart) return { nbNuits: 0, prixTotal: 0 };
    const n = calculateNights(dateArrivee, dateDepart);
    const p = chambreSelected ? n * chambreSelected.prix_nuit : 0;
    return { nbNuits: n, prixTotal: p };
  }, [dateArrivee, dateDepart, chambreSelected]);

  function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    if (!clientId || !chambreId) {
      toast.error("Veuillez sélectionner un client et une chambre");
      return;
    }

    const formData = new FormData();
    formData.set("client_id", clientId);
    formData.set("chambre_id", chambreId);
    formData.set("date_arrivee", dateArrivee);
    formData.set("date_depart", dateDepart);
    formData.set("nb_personnes", String(nbPersonnes));
    formData.set("statut", statut);
    formData.set("notes", notes);

    startTransition(async () => {
      const result = isEdit
        ? await updateReservation(reservation!.id, formData)
        : await createReservation(formData);
      if (result?.error) {
        toast.error(result.error);
      } else {
        toast.success(isEdit ? "Réservation modifiée" : "Réservation créée");
      }
    });
  }

  return (
    <form onSubmit={onSubmit}>
      <Card>
        <CardContent className="p-6 space-y-6">
          {/* Étape 1 : Client + dates */}
          <section>
            <h3 className="text-sm font-semibold mb-3 flex items-center gap-2">
              <span className="w-6 h-6 rounded-full bg-accent text-white text-xs flex items-center justify-center">
                1
              </span>
              Client et dates
            </h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2 md:col-span-2">
                <Label htmlFor="client">Client *</Label>
                <Select value={clientId} onValueChange={setClientId}>
                  <SelectTrigger>
                    <SelectValue placeholder="Sélectionnez un client..." />
                  </SelectTrigger>
                  <SelectContent>
                    {clients.map((c) => (
                      <SelectItem key={c.id} value={c.id}>
                        {c.nom_complet} {c.telephone && `· ${c.telephone}`}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                <p className="text-xs text-muted-foreground">
                  Le client n&apos;est pas dans la liste ?{" "}
                  <a
                    href="/clients/nouveau"
                    className="text-info hover:underline"
                    target="_blank"
                  >
                    Ajouter un nouveau client
                  </a>
                </p>
              </div>
              <div className="space-y-2">
                <Label htmlFor="date_arrivee">Date d&apos;arrivée *</Label>
                <Input
                  id="date_arrivee"
                  type="date"
                  value={dateArrivee}
                  onChange={(e) => setDateArrivee(e.target.value)}
                  required
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="date_depart">Date de départ *</Label>
                <Input
                  id="date_depart"
                  type="date"
                  value={dateDepart}
                  onChange={(e) => setDateDepart(e.target.value)}
                  min={dateArrivee}
                  required
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="nb_personnes">Nombre de personnes</Label>
                <Input
                  id="nb_personnes"
                  type="number"
                  min={1}
                  max={20}
                  value={nbPersonnes}
                  onChange={(e) => setNbPersonnes(Number(e.target.value))}
                  required
                />
              </div>
              <div className="space-y-2">
                <Label>Nombre de nuits (calculé)</Label>
                <div className="h-10 flex items-center px-3 rounded-md bg-secondary text-sm font-semibold">
                  {nbNuits} nuit{nbNuits > 1 ? "s" : ""}
                </div>
              </div>
            </div>
          </section>

          {/* Étape 2 : Chambre */}
          <section>
            <h3 className="text-sm font-semibold mb-3 flex items-center gap-2">
              <span className="w-6 h-6 rounded-full bg-accent text-white text-xs flex items-center justify-center">
                2
              </span>
              Chambre
            </h3>
            <div className="space-y-2">
              <Label htmlFor="chambre">Sélectionnez une chambre *</Label>
              <Select value={chambreId} onValueChange={setChambreId}>
                <SelectTrigger>
                  <SelectValue placeholder="Choisir une chambre..." />
                </SelectTrigger>
                <SelectContent>
                  {chambres.map((c) => (
                    <SelectItem key={c.id} value={c.id}>
                      N°{c.numero} · {TYPE_CHAMBRE_LABELS[c.type]} ·{" "}
                      {c.capacite} pers · {formatMoney(c.prix_nuit, devise)}/nuit
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
              <p className="text-xs text-muted-foreground">
                La disponibilité sera vérifiée à la confirmation. Les chevauchements sont bloqués.
              </p>
            </div>
          </section>

          {/* Étape 3 : Récapitulatif */}
          <section>
            <h3 className="text-sm font-semibold mb-3 flex items-center gap-2">
              <span className="w-6 h-6 rounded-full bg-accent text-white text-xs flex items-center justify-center">
                3
              </span>
              Récapitulatif et confirmation
            </h3>
            <div className="bg-secondary/50 rounded-lg p-4 space-y-2 text-sm">
              <div className="flex justify-between">
                <span className="text-muted-foreground">Période</span>
                <span className="font-medium">
                  {nbNuits} nuit{nbNuits > 1 ? "s" : ""}
                </span>
              </div>
              {chambreSelected && (
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Prix par nuit</span>
                  <span className="font-medium">
                    {formatMoney(chambreSelected.prix_nuit, devise)}
                  </span>
                </div>
              )}
              <div className="flex justify-between pt-2 border-t font-semibold text-base">
                <span>Prix total</span>
                <span className="text-accent">{formatMoney(prixTotal, devise)}</span>
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
              <div className="space-y-2">
                <Label htmlFor="statut">Statut</Label>
                <Select value={statut} onValueChange={setStatut}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {Object.entries(STATUT_RESERVATION_LABELS).map(([key, label]) => (
                      <SelectItem key={key} value={key}>
                        {label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>
            <div className="space-y-2 mt-4">
              <Label htmlFor="notes">Notes (optionnel)</Label>
              <Textarea
                id="notes"
                value={notes}
                onChange={(e) => setNotes(e.target.value)}
                placeholder="Demandes particulières, allergies..."
                rows={2}
              />
            </div>
          </section>

          <div className="flex gap-2 justify-end pt-4 border-t">
            <Button
              type="button"
              variant="outline"
              onClick={() => router.push("/reservations")}
              disabled={pending}
            >
              Annuler
            </Button>
            <Button type="submit" variant="accent" disabled={pending || !clientId || !chambreId}>
              {pending ? (
                <Loader2 className="w-4 h-4 animate-spin" />
              ) : isEdit ? (
                <Save className="w-4 h-4" />
              ) : (
                <CheckCircle2 className="w-4 h-4" />
              )}
              {isEdit ? "Enregistrer" : "Confirmer la réservation"}
            </Button>
          </div>
        </CardContent>
      </Card>
    </form>
  );
}