Compagnon-du-Lagon---Marama/components/admin/ClientForm.tsx

"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Client, ClientInput } from "@/lib/types/client";
import QRCodeDisplay from "./QRCodeDisplay";
import { Copy, Check } from "lucide-react";

interface ClientFormProps {
  client?: Client;
  onSuccess: () => void;
  onCancel: () => void;
}

export default function ClientForm({ client, onSuccess, onCancel }: ClientFormProps) {
  const [formData, setFormData] = useState<ClientInput>({
    email: client?.email || "",
    bungalowNumber: client?.bungalowNumber || "",
    wifiName: client?.wifiName || "Lagon-WiFi",
    wifiPassword: client?.wifiPassword || "",
    gerantMessage: client?.gerantMessage || "Bienvenue dans notre pension de famille !",
  });

  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [createdClient, setCreatedClient] = useState<Client | null>(client || null);
  const [copied, setCopied] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError(null);

    try {
      const adminPassword = localStorage.getItem("adminPassword") || "";
      const url = client
        ? `/api/admin/clients/${client.id}`
        : "/api/admin/clients";
      
      const method = client ? "PUT" : "POST";

      const response = await fetch(url, {
        method,
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${adminPassword}`,
        },
        body: JSON.stringify(formData),
      });

      if (!response.ok) {
        const data = await response.json();
        throw new Error(data.error || "Erreur lors de la sauvegarde");
      }

      const data = await response.json();
      setCreatedClient(data);
      onSuccess();
    } catch (err: any) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  const getClientUrl = () => {
    if (!createdClient) return "";
    const baseUrl = typeof window !== "undefined" ? window.location.origin : "";
    return `${baseUrl}/accueil?token=${createdClient.token}`;
  };

  const handleCopyLink = async () => {
    const url = getClientUrl();
    try {
      await navigator.clipboard.writeText(url);
      setCopied(true);
      // Alerte pour confirmer
      alert(`✅ Lien copié !\n\n${url}\n\nVous pouvez maintenant le coller (Ctrl+V) pour le partager avec votre client.`);
      setTimeout(() => setCopied(false), 3000);
    } catch (err) {
      console.error("Erreur lors de la copie:", err);
      // Fallback pour les navigateurs plus anciens
      const textArea = document.createElement("textarea");
      textArea.value = url;
      textArea.style.position = "fixed";
      textArea.style.left = "-999999px";
      document.body.appendChild(textArea);
      textArea.select();
      try {
        const successful = document.execCommand("copy");
        if (successful) {
          setCopied(true);
          alert(`✅ Lien copié !\n\n${url}\n\nVous pouvez maintenant le coller (Ctrl+V) pour le partager avec votre client.`);
          setTimeout(() => setCopied(false), 3000);
        } else {
          alert(`❌ Copie automatique non supportée.\n\nVeuillez copier manuellement le lien:\n\n${url}`);
        }
      } catch (e) {
        alert(`❌ Copie automatique non supportée.\n\nVeuillez copier manuellement le lien:\n\n${url}`);
      }
      document.body.removeChild(textArea);
    }
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle>{client ? "Modifier le client" : "Nouveau client"}</CardTitle>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Email *
            </label>
            <input
              type="email"
              required
              value={formData.email}
              onChange={(e) => setFormData({ ...formData, email: e.target.value })}
              disabled={!!client}
              className="w-full px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent disabled:bg-gray-100"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Numéro de bungalow *
            </label>
            <input
              type="text"
              required
              value={formData.bungalowNumber}
              onChange={(e) =>
                setFormData({ ...formData, bungalowNumber: e.target.value })
              }
              className="w-full px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Nom du WiFi
            </label>
            <input
              type="text"
              value={formData.wifiName}
              onChange={(e) =>
                setFormData({ ...formData, wifiName: e.target.value })
              }
              className="w-full px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Mot de passe WiFi
            </label>
            <input
              type="text"
              value={formData.wifiPassword}
              onChange={(e) =>
                setFormData({ ...formData, wifiPassword: e.target.value })
              }
              className="w-full px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Message du gérant
            </label>
            <textarea
              value={formData.gerantMessage}
              onChange={(e) =>
                setFormData({ ...formData, gerantMessage: e.target.value })
              }
              rows={3}
              className="w-full px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent"
            />
          </div>

          {error && (
            <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-xl text-sm">
              {error}
            </div>
          )}

          <div className="flex gap-3">
            <Button type="button" variant="outline" onClick={onCancel} className="flex-1">
              Annuler
            </Button>
            <Button type="submit" disabled={loading} className="flex-1">
              {loading ? "Enregistrement..." : client ? "Modifier" : "Créer"}
            </Button>
          </div>
        </form>

        {createdClient && !client && (
          <div className="mt-6 pt-6 border-t border-gray-200">
            <h3 className="font-semibold text-primary mb-3">Client créé avec succès !</h3>
            <div className="space-y-4">
              <div>
                <p className="text-sm font-medium text-gray-700 mb-2">Lien unique :</p>
                <div className="bg-secondary rounded-xl p-4 space-y-3">
                  <textarea
                    readOnly
                    value={getClientUrl()}
                    onClick={(e) => e.currentTarget.select()}
                    onFocus={(e) => e.currentTarget.select()}
                    className="w-full p-3 text-sm font-mono text-primary bg-white border-2 border-primary rounded-lg resize-none"
                    rows={3}
                    style={{ cursor: 'text' }}
                  />
                  <div className="flex gap-2">
                    <Button
                      size="sm"
                      onClick={handleCopyLink}
                      className={`flex-1 ${copied ? "bg-green-600 hover:bg-green-700" : ""}`}
                    >
                      {copied ? (
                        <>
                          <Check className="h-4 w-4 mr-2" />
                          Copié !
                        </>
                      ) : (
                        <>
                          <Copy className="h-4 w-4 mr-2" />
                          Copier
                        </>
                      )}
                    </Button>
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() => {
                        const textarea = document.querySelector('textarea[readonly]') as HTMLTextAreaElement;
                        if (textarea) {
                          textarea.select();
                        }
                      }}
                      className="flex-1"
                    >
                      Sélectionner
                    </Button>
                  </div>
                </div>
                <p className="text-xs text-gray-500 mt-2">
                  💡 Cliquez sur le lien pour le sélectionner, puis Ctrl+C pour copier
                </p>
              </div>
              <div>
                <p className="text-sm text-gray-600 mb-2">QR Code :</p>
                <QRCodeDisplay url={getClientUrl()} />
              </div>
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  );
}