"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 { createPaiement } from "@/actions/paiements";
import { formatMoney, METHODE_PAIEMENT_LABELS, toInputDate } from "@/lib/utils";
import { Loader2, Save } from "lucide-react";

interface ReservationOption {
  id: string;
  label: string;
  prix_total: number;
  deja_paye: number;
}

interface Props {
  reservations: ReservationOption[];
  defaultReservationId?: string;
  devise: string;
}

export function PaiementForm({ reservations, defaultReservationId, devise }: Props) {
  const router = useRouter();
  const [pending, startTransition] = useTransition();
  const [reservationId, setReservationId] = useState(defaultReservationId || "");
  const [methode, setMethode] = useState("ESPECES");

  const reservation = reservations.find((r) => r.id === reservationId);
  const solde = reservation ? reservation.prix_total - reservation.deja_paye : 0;

  function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    if (!reservationId) {
      toast.error("Sélectionnez une réservation");
      return;
    }
    const formData = new FormData(e.currentTarget);
    formData.set("reservation_id", reservationId);
    formData.set("methode", methode);

    startTransition(async () => {
      const result = await createPaiement(formData);
      if (result?.error) toast.error(result.error);
      else toast.success("Paiement enregistré");
    });
  }

  return (
    <form onSubmit={onSubmit}>
      <Card>
        <CardContent className="p-6 space-y-4">
          <div className="space-y-2">
            <Label>Réservation *</Label>
            <Select value={reservationId} onValueChange={setReservationId}>
              <SelectTrigger>
                <SelectValue placeholder="Sélectionner une réservation..." />
              </SelectTrigger>
              <SelectContent>
                {reservations.map((r) => (
                  <SelectItem key={r.id} value={r.id}>
                    {r.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          {reservation && (
            <div className="grid grid-cols-3 gap-2 bg-secondary/50 rounded-md p-3 text-sm">
              <div>
                <p className="text-xs text-muted-foreground">Total dû</p>
                <p className="font-semibold">{formatMoney(reservation.prix_total, devise)}</p>
              </div>
              <div>
                <p className="text-xs text-muted-foreground">Déjà payé</p>
                <p className="font-semibold text-success">
                  {formatMoney(reservation.deja_paye, devise)}
                </p>
              </div>
              <div>
                <p className="text-xs text-muted-foreground">Solde restant</p>
                <p className={`font-semibold ${solde > 0 ? "text-danger" : "text-success"}`}>
                  {formatMoney(solde, devise)}
                </p>
              </div>
            </div>
          )}

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="montant">Montant *</Label>
              <Input
                id="montant"
                name="montant"
                type="number"
                step="0.01"
                min="0.01"
                required
                defaultValue={solde > 0 ? solde.toFixed(2) : ""}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="methode">Méthode *</Label>
              <Select value={methode} onValueChange={setMethode}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {Object.entries(METHODE_PAIEMENT_LABELS).map(([key, label]) => (
                    <SelectItem key={key} value={key}>
                      {label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label htmlFor="date_paiement">Date *</Label>
              <Input
                id="date_paiement"
                name="date_paiement"
                type="date"
                defaultValue={toInputDate(new Date())}
                required
              />
            </div>
            <div className="space-y-2 md:col-span-2">
              <Label htmlFor="notes">Notes</Label>
              <Textarea
                id="notes"
                name="notes"
                placeholder="Référence transaction, commentaire..."
                rows={2}
              />
            </div>
          </div>

          <div className="flex gap-2 justify-end pt-2 border-t">
            <Button
              type="button"
              variant="outline"
              onClick={() => router.back()}
              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" />}
              Enregistrer le paiement
            </Button>
          </div>
        </CardContent>
      </Card>
    </form>
  );
}