"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 () => {
    try {
      await navigator.clipboard.writeText(getClientUrl());
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (err) {
      console.error("Erreur lors de la copie:", err);
      // Fallback pour les navigateurs plus anciens
      const textArea = document.createElement("textarea");
      textArea.value = getClientUrl();
      document.body.appendChild(textArea);
      textArea.select();
      try {
        document.execCommand("copy");
        setCopied(true);
        setTimeout(() => setCopied(false), 2000);
      } catch (e) {
        alert("Impossible de copier. Veuillez copier manuellement le lien.");
      }
      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">
                  <code className="text-sm break-all block text-primary font-mono">
                    {getClientUrl()}
                  </code>
                  <Button
                    size="sm"
                    onClick={handleCopyLink}
                    className={`w-full ${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 le lien
                      </>
                    )}
                  </Button>
                </div>
                <p className="text-xs text-gray-500 mt-2">
                  Partagez ce lien avec le client pour qu&apos;il configure son app automatiquement
                </p>
              </div>
              <div>
                <p className="text-sm text-gray-600 mb-2">QR Code :</p>
                <QRCodeDisplay url={getClientUrl()} />
              </div>
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  );
}