"use client";

import { useState } from "react";
import { Car } from "@/lib/data";
import { createCarAction, updateCarAction, deleteCarAction } from "@/app/actions/cars";
import { changePasswordAction, logoutAction } from "@/app/actions/auth";
import { Plus, Edit2, Trash2, Check, X, Settings, LogOut } from "lucide-react";

export default function AdminCarsClient({ initialCars }: { initialCars: Car[] }) {
  const [cars, setCars] = useState<Car[]>(initialCars);
  const [isEditing, setIsEditing] = useState<string | null>(null);
  const [isAdding, setIsAdding] = useState(false);
  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
  const [newPassword, setNewPassword] = useState("");
  const [formData, setFormData] = useState<Partial<Car>>({});

  const featuredCount = cars.filter(c => c.featuredOnHome).length;

  const handleEdit = (car: Car) => {
    setFormData(car);
    setIsEditing(car.id);
    setIsAdding(false);
  };

  const handleDelete = async (id: string) => {
    if (confirm("Êtes-vous sûr de vouloir supprimer ce véhicule ?")) {
      await deleteCarAction(id);
      setCars(cars.filter(c => c.id !== id));
    }
  };

  const handleSave = async () => {
    if (formData.featuredOnHome && !isEditing && featuredCount >= 6) {
      alert("Vous ne pouvez pas afficher plus de 6 véhicules sur la page d'accueil.");
    }

    if (isEditing) {
      await updateCarAction(isEditing, formData);
      setCars(cars.map(c => c.id === isEditing ? { ...c, ...formData } as Car : c));
      setIsEditing(null);
    } else {
      const newCar = {
        ...formData,
        id: Math.random().toString(36).substr(2, 9),
        slug: formData.name?.toLowerCase().replace(/\s+/g, '-') || "new-car",
      } as Car;
      await createCarAction(newCar);
      setCars([...cars, newCar]);
      setIsAdding(false);
    }
    setFormData({});
  };

  const handleCheckboxChange = async (car: Car) => {
    const newFeatured = !car.featuredOnHome;
    if (newFeatured && featuredCount >= 6) {
      alert("Vous avez déjà 6 véhicules sur la page d'accueil. Veuillez en désélectionner un autre d'abord.");
      return;
    }
    await updateCarAction(car.id, { featuredOnHome: newFeatured });
    setCars(cars.map(c => c.id === car.id ? { ...c, featuredOnHome: newFeatured } : c));
  };

  const handleChangePassword = async () => {
    if (newPassword.length < 4) {
      alert("Le mot de passe doit contenir au moins 4 caractères.");
      return;
    }
    await changePasswordAction(newPassword);
    alert("Mot de passe modifié avec succès !");
    setIsSettingsOpen(false);
    setNewPassword("");
  };

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center bg-gray-800 p-4 rounded-lg">
        <div>
          <p className="text-gray-400">Véhicules en page d'accueil : <span className="text-white font-bold">{featuredCount}/6</span></p>
        </div>
        <div className="flex gap-3">
          <button 
            onClick={() => setIsSettingsOpen(true)}
            className="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded flex items-center gap-2 transition"
          >
            <Settings size={20} />
            Paramètres
          </button>
          <button 
            onClick={() => { setIsAdding(true); setIsEditing(null); setFormData({ available: true, featuredOnHome: false }); }}
            className="bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded flex items-center gap-2 transition"
          >
            <Plus size={20} />
            Ajouter un véhicule
          </button>
          <button 
            onClick={() => logoutAction()}
            className="bg-red-600/20 hover:bg-red-600 text-red-400 hover:text-white px-4 py-2 rounded flex items-center gap-2 transition"
            title="Se déconnecter"
          >
            <LogOut size={20} />
          </button>
        </div>
      </div>

      {isSettingsOpen && (
        <div className="bg-gray-800 p-6 rounded-lg border border-gray-700">
          <h2 className="text-xl font-bold mb-4">Paramètres du compte</h2>
          <div className="max-w-md">
            <label className="block text-sm text-gray-400 mb-2">Nouveau code d'accès</label>
            <input 
              type="password" 
              value={newPassword} 
              onChange={e => setNewPassword(e.target.value)}
              className="w-full bg-gray-700 border border-gray-600 rounded p-2 text-white mb-4"
              placeholder="Entrez le nouveau code..."
            />
            <div className="flex gap-4">
              <button onClick={handleChangePassword} className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded flex items-center gap-2">
                <Check size={20} /> Sauvegarder
              </button>
              <button onClick={() => { setIsSettingsOpen(false); setNewPassword(""); }} className="bg-gray-600 hover:bg-gray-500 text-white px-4 py-2 rounded flex items-center gap-2">
                <X size={20} /> Annuler
              </button>
            </div>
          </div>
        </div>
      )}

      {(isEditing || isAdding) && (
        <div className="bg-gray-800 p-6 rounded-lg border border-gray-700">
          <h2 className="text-xl font-bold mb-4">{isEditing ? "Modifier le véhicule" : "Ajouter un véhicule"}</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm text-gray-400 mb-1">Nom du véhicule</label>
              <input 
                type="text" 
                value={formData.name || ""} 
                onChange={e => setFormData({ ...formData, name: e.target.value })}
                className="w-full bg-gray-700 border border-gray-600 rounded p-2 text-white"
                placeholder="Ex: Dacia Logan"
              />
            </div>
            <div>
              <label className="block text-sm text-gray-400 mb-1">Marque</label>
              <input 
                type="text" 
                value={formData.brand || ""} 
                onChange={e => setFormData({ ...formData, brand: e.target.value })}
                className="w-full bg-gray-700 border border-gray-600 rounded p-2 text-white"
              />
            </div>
            <div>
              <label className="block text-sm text-gray-400 mb-1">Catégorie</label>
              <select 
                value={formData.category || "economy"} 
                onChange={e => setFormData({ ...formData, category: e.target.value as any })}
                className="w-full bg-gray-700 border border-gray-600 rounded p-2 text-white"
              >
                <option value="economy">Économique</option>
                <option value="suv">SUV</option>
                <option value="luxury">Luxe</option>
                <option value="minivan">Minivan</option>
              </select>
            </div>
            <div>
              <label className="block text-sm text-gray-400 mb-1">Prix par jour (MAD)</label>
              <input 
                type="number" 
                value={formData.pricePerDay || 0} 
                onChange={e => setFormData({ ...formData, pricePerDay: parseInt(e.target.value) })}
                className="w-full bg-gray-700 border border-gray-600 rounded p-2 text-white"
              />
            </div>
            <div>
              <label className="block text-sm text-gray-400 mb-1">URL de l'image</label>
              <input 
                type="text" 
                value={formData.image || ""} 
                onChange={e => setFormData({ ...formData, image: e.target.value })}
                className="w-full bg-gray-700 border border-gray-600 rounded p-2 text-white"
                placeholder="/car-logan.png ou https://..."
              />
            </div>
            <div>
              <label className="block text-sm text-gray-400 mb-1">Carburant</label>
              <input 
                type="text" 
                value={formData.fuel || ""} 
                onChange={e => setFormData({ ...formData, fuel: e.target.value })}
                className="w-full bg-gray-700 border border-gray-600 rounded p-2 text-white"
                placeholder="Ex: Essence, Diesel"
              />
            </div>
            <div className="md:col-span-2 flex items-center gap-4 mt-4 bg-gray-700/50 p-4 rounded">
              <input 
                type="checkbox" 
                id="featured"
                checked={formData.featuredOnHome || false} 
                onChange={e => setFormData({ ...formData, featuredOnHome: e.target.checked })}
                className="w-5 h-5 accent-orange-500"
              />
              <label htmlFor="featured" className="text-white font-medium cursor-pointer">
                Afficher sur la page d'accueil (Max 6)
              </label>
            </div>
          </div>
          <div className="flex gap-4 mt-6">
            <button onClick={handleSave} className="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded flex items-center gap-2">
              <Check size={20} /> Enregistrer
            </button>
            <button onClick={() => { setIsEditing(null); setIsAdding(false); }} className="bg-gray-600 hover:bg-gray-500 text-white px-6 py-2 rounded flex items-center gap-2">
              <X size={20} /> Annuler
            </button>
          </div>
        </div>
      )}

      <div className="bg-gray-800 rounded-lg overflow-hidden border border-gray-700">
        <table className="w-full text-left">
          <thead className="bg-gray-900 border-b border-gray-700">
            <tr>
              <th className="p-4 text-gray-400 font-medium">Image</th>
              <th className="p-4 text-gray-400 font-medium">Véhicule</th>
              <th className="p-4 text-gray-400 font-medium">Prix</th>
              <th className="p-4 text-gray-400 font-medium text-center">Accueil</th>
              <th className="p-4 text-gray-400 font-medium text-right">Actions</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-700">
            {cars.map((car) => (
              <tr key={car.id} className="hover:bg-gray-750 transition">
                <td className="p-4">
                  <img src={car.image} alt={car.name} className="w-20 h-12 object-cover rounded bg-gray-700" />
                </td>
                <td className="p-4">
                  <p className="font-bold">{car.name}</p>
                  <p className="text-sm text-gray-400">{car.categoryLabel}</p>
                </td>
                <td className="p-4">
                  <span className="text-orange-500 font-bold">{car.pricePerDay}</span> MAD/j
                </td>
                <td className="p-4 text-center">
                  <input 
                    type="checkbox" 
                    checked={car.featuredOnHome || false}
                    onChange={() => handleCheckboxChange(car)}
                    className="w-5 h-5 accent-orange-500 cursor-pointer"
                  />
                </td>
                <td className="p-4 text-right">
                  <div className="flex justify-end gap-2">
                    <button onClick={() => handleEdit(car)} className="p-2 bg-blue-600/20 text-blue-400 rounded hover:bg-blue-600 hover:text-white transition">
                      <Edit2 size={18} />
                    </button>
                    <button onClick={() => handleDelete(car.id)} className="p-2 bg-red-600/20 text-red-400 rounded hover:bg-red-600 hover:text-white transition">
                      <Trash2 size={18} />
                    </button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        {cars.length === 0 && (
          <div className="p-8 text-center text-gray-400">
            Aucun véhicule trouvé. Commencez par en ajouter un.
          </div>
        )}
      </div>
    </div>
  );
}