"use client";

import { useTransition } from "react";
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 { updateHotel } from "@/actions/parametres";
import { Loader2, Save } from "lucide-react";

interface HotelData {
  nom: string;
  logo_url: string | null;
  adresse: string;
  telephone: string;
  email: string;
  site_web: string | null;
  devise: string;
  taux_taxe: number;
  conditions_generales: string;
}

export function ParametresForm({ hotel }: { hotel: HotelData | null }) {
  const [pending, startTransition] = useTransition();

  function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    startTransition(async () => {
      const result = await updateHotel(formData);
      if (result?.error) toast.error(result.error);
      else toast.success("Paramètres enregistrés");
    });
  }

  return (
    <form onSubmit={onSubmit}>
      <Card>
        <CardContent className="p-6 space-y-5">
          <section>
            <h3 className="font-semibold mb-3">Informations générales</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2 md:col-span-2">
                <Label htmlFor="nom">Nom de l&apos;hôtel *</Label>
                <Input
                  id="nom"
                  name="nom"
                  required
                  defaultValue={hotel?.nom || "Residence Marrakech"}
                />
              </div>
              <div className="space-y-2 md:col-span-2">
                <Label htmlFor="adresse">Adresse</Label>
                <Input
                  id="adresse"
                  name="adresse"
                  defaultValue={hotel?.adresse}
                  placeholder="Avenue Mohammed VI, Marrakech"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="telephone">Téléphone</Label>
                <Input
                  id="telephone"
                  name="telephone"
                  type="tel"
                  defaultValue={hotel?.telephone}
                  placeholder="+212 5 24 12 34 56"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="email">Email</Label>
                <Input
                  id="email"
                  name="email"
                  type="email"
                  defaultValue={hotel?.email}
                  placeholder="contact@residence-marrakech.ma"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="site_web">Site web</Label>
                <Input
                  id="site_web"
                  name="site_web"
                  type="url"
                  defaultValue={hotel?.site_web || ""}
                  placeholder="https://residence-marrakech.ma"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="logo_url">URL du logo (optionnel)</Label>
                <Input
                  id="logo_url"
                  name="logo_url"
                  defaultValue={hotel?.logo_url || ""}
                  placeholder="https://..."
                />
              </div>
            </div>
          </section>

          <section className="pt-4 border-t">
            <h3 className="font-semibold mb-3">Facturation</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="devise">Devise</Label>
                <Input
                  id="devise"
                  name="devise"
                  defaultValue={hotel?.devise || "MAD"}
                  placeholder="MAD, EUR, USD..."
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="taux_taxe">Taux de taxe (%)</Label>
                <Input
                  id="taux_taxe"
                  name="taux_taxe"
                  type="number"
                  step="0.01"
                  min="0"
                  max="100"
                  defaultValue={hotel?.taux_taxe || 10}
                />
              </div>
              <div className="space-y-2 md:col-span-2">
                <Label htmlFor="conditions_generales">
                  Conditions générales (apparaissent sur les factures)
                </Label>
                <Textarea
                  id="conditions_generales"
                  name="conditions_generales"
                  defaultValue={hotel?.conditions_generales}
                  rows={4}
                  placeholder="Conditions de paiement, politique d'annulation..."
                />
              </div>
            </div>
          </section>

          <div className="flex justify-end pt-4 border-t">
            <Button type="submit" variant="accent" disabled={pending}>
              {pending ? (
                <Loader2 className="w-4 h-4 animate-spin" />
              ) : (
                <Save className="w-4 h-4" />
              )}
              Enregistrer les paramètres
            </Button>
          </div>
        </CardContent>
      </Card>
    </form>
  );
}