import React, { useState } from 'react';
import {
  Shield,
  X,
  Plus,
  Trash2,
  Calendar,
  ClipboardList,
  Pill,
  Users,
  Play,
  RotateCcw,
  CheckCircle2,
  AlertTriangle,
} from 'lucide-react';
import { User, Task, Medication, Appointment, Presence } from '../types';

interface AdminModalProps {
  isOpen: boolean;
  onClose: () => void;
  users: User[];
  tasks: Task[];
  medications: Medication[];
  appointments: Appointment[];
  presences: Presence[];
  onAddTask: (task: Omit<Task, 'id'>) => void;
  onDeleteTask: (id: number) => void;
  onAddMedication: (med: Omit<Medication, 'id'>) => void;
  onDeleteMedication: (id: number) => void;
  onAddAppointment: (rdv: Omit<Appointment, 'id'>) => void;
  onDeleteAppointment: (id: number) => void;
  onAddPresence: (presence: Omit<Presence, 'id'>) => void;
  onDeletePresence: (id: number) => void;
  onSimulateMidnight: () => void;
  onResetData: () => void;
}

export const AdminModal: React.FC<AdminModalProps> = ({
  isOpen,
  onClose,
  users,
  tasks,
  medications,
  appointments,
  presences,
  onAddTask,
  onDeleteTask,
  onAddMedication,
  onDeleteMedication,
  onAddAppointment,
  onDeleteAppointment,
  onAddPresence,
  onDeletePresence,
  onSimulateMidnight,
  onResetData,
}) => {
  const [pin, setPin] = useState('');
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [activeTab, setActiveTab] = useState<'presences' | 'tasks' | 'meds' | 'rdv' | 'users' | 'tools'>('presences');
  const [pinError, setPinError] = useState(false);

  // New Task form state
  const [newTaskNom, setNewTaskNom] = useState('');
  const [newTaskCat, setNewTaskCat] = useState<'soins' | 'logistique' | 'maison' | 'bienveillance'>('soins');
  const [newTaskAlerte, setNewTaskAlerte] = useState(true);

  // New Med form state
  const [newMedPatient, setNewMedPatient] = useState<'papa' | 'maman'>('papa');
  const [newMedNom, setNewMedNom] = useState('');
  const [newMedDosage, setNewMedDosage] = useState('');
  const [newMedHeure, setNewMedHeure] = useState('12:00');

  // New Rdv form state
  const [newRdvTitre, setNewRdvTitre] = useState('');
  const [newRdvPatient, setNewRdvPatient] = useState<'papa' | 'maman' | 'tous'>('papa');
  const [newRdvDate, setNewRdvDate] = useState('');
  const [newRdvLieu, setNewRdvLieu] = useState('Domicile parents');

  if (!isOpen) return null;

  const handlePinSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (pin === '1234') {
      setIsAuthenticated(true);
      setPinError(false);
    } else {
      setPinError(true);
    }
  };

  const siblings = users.filter((u) => u.role === 'membre');

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-3 sm:p-4 bg-black/75 backdrop-blur-xs">
      <div className="w-full max-w-2xl max-h-[90vh] bg-[var(--surface)] border border-[var(--border)] rounded-[22px] p-5 sm:p-6 shadow-2xl flex flex-col gap-4 overflow-hidden animate-in fade-in zoom-in-95">
        {/* Header */}
        <div className="flex items-center justify-between border-b border-[var(--border)] pb-3">
          <div className="flex items-center gap-2.5">
            <div className="w-9 h-9 rounded-xl bg-amber-500/20 text-amber-400 flex items-center justify-center">
              <Shield className="w-5 h-5" />
            </div>
            <div>
              <h2 className="text-xl font-bold text-[var(--ink)] m-0 leading-tight">
                Administration du Kiosk
              </h2>
              <p className="text-xs text-[var(--ink-soft)] m-0">
                Gestion des soins, présences et paramètres
              </p>
            </div>
          </div>
          <button
            onClick={onClose}
            className="w-9 h-9 rounded-xl bg-[var(--surface-alt)] flex items-center justify-center text-[var(--ink-soft)] hover:text-[var(--ink)] transition-colors cursor-pointer"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* PIN verification if not authenticated */}
        {!isAuthenticated ? (
          <form onSubmit={handlePinSubmit} className="py-8 flex flex-col items-center gap-4 text-center">
            <div className="w-12 h-12 rounded-full bg-amber-500/15 flex items-center justify-center text-amber-400">
              <Shield className="w-6 h-6" />
            </div>
            <div>
              <h3 className="text-lg font-bold text-[var(--ink)] m-0">Code PIN Administrateur</h3>
              <p className="text-xs text-[var(--ink-soft)] m-0 mt-1">
                Entrez le code PIN (Code par défaut : <strong>1234</strong>)
              </p>
            </div>

            <input
              type="password"
              maxLength={6}
              value={pin}
              onChange={(e) => setPin(e.target.value)}
              placeholder="••••"
              autoFocus
              className="w-36 text-center text-2xl tracking-widest font-mono p-2.5 rounded-xl bg-[var(--surface-alt)] border border-[var(--border)] text-[var(--ink)] focus:outline-none focus:border-amber-400"
            />

            {pinError && (
              <p className="text-xs text-red-400 font-semibold m-0">
                Code PIN incorrect (par défaut : 1234)
              </p>
            )}

            <button
              type="submit"
              className="py-2.5 px-6 rounded-xl bg-amber-600 hover:bg-amber-500 text-white font-bold text-sm transition-colors cursor-pointer"
            >
              Déverrouiller
            </button>
          </form>
        ) : (
          /* Authenticated Admin panel */
          <div className="flex flex-col gap-3 overflow-hidden">
            {/* Tabs */}
            <div className="flex gap-1 overflow-x-auto pb-1 border-b border-[var(--border)] text-xs font-semibold">
              {[
                { key: 'presences', label: 'Planning', icon: Calendar },
                { key: 'tasks', label: 'Tâches', icon: ClipboardList },
                { key: 'meds', label: 'Médicaments', icon: Pill },
                { key: 'rdv', label: 'RDV', icon: Calendar },
                { key: 'users', label: 'Fratrie (7)', icon: Users },
                { key: 'tools', label: 'Tests & Cron', icon: Play },
              ].map((tab) => {
                const Icon = tab.icon;
                return (
                  <button
                    key={tab.key}
                    onClick={() => setActiveTab(tab.key as any)}
                    className={`flex items-center gap-1.5 py-2 px-3 rounded-lg shrink-0 transition-colors cursor-pointer ${
                      activeTab === tab.key
                        ? 'bg-[var(--accent)] text-white'
                        : 'text-[var(--ink-soft)] hover:text-[var(--ink)] hover:bg-[var(--surface-alt)]'
                    }`}
                  >
                    <Icon className="w-3.5 h-3.5" />
                    <span>{tab.label}</span>
                  </button>
                );
              })}
            </div>

            {/* Content per tab */}
            <div className="overflow-y-auto max-h-[50vh] pr-1 flex flex-col gap-3">
              {/* TAB 1: Presences */}
              {activeTab === 'presences' && (
                <div className="flex flex-col gap-2.5">
                  <span className="text-xs font-bold text-[var(--ink-soft)] uppercase tracking-wider">
                    Créneaux enregistrés ({presences.length})
                  </span>
                  {presences.map((p) => (
                    <div
                      key={p.id}
                      className="p-3 rounded-xl bg-[var(--surface-alt)] border border-[var(--border)] flex items-center justify-between text-xs"
                    >
                      <div>
                        <strong className="text-sm text-[var(--ink)]">{p.utilisateur_nom}</strong>
                        <span className="text-[var(--ink-soft)] ml-2">
                          Date : {p.date} • {p.heure_debut} à {p.heure_fin}
                        </span>
                      </div>
                      <button
                        onClick={() => onDeletePresence(p.id)}
                        className="p-1.5 rounded text-red-400 hover:bg-red-950/40"
                      >
                        <Trash2 className="w-3.5 h-3.5" />
                      </button>
                    </div>
                  ))}
                </div>
              )}

              {/* TAB 2: Tâches */}
              {activeTab === 'tasks' && (
                <div className="flex flex-col gap-3">
                  {/* Formulaire ajout tâche */}
                  <div className="p-3 rounded-xl bg-[var(--surface-alt)] border border-[var(--border)] flex flex-col gap-2">
                    <span className="text-xs font-bold text-[var(--ink)]">Ajouter une tâche récurrente</span>
                    <input
                      type="text"
                      placeholder="Nom de la tâche (ex: Préparer le goûter de maman)"
                      value={newTaskNom}
                      onChange={(e) => setNewTaskNom(e.target.value)}
                      className="p-2 rounded-lg bg-[var(--surface)] border border-[var(--border)] text-xs text-[var(--ink)]"
                    />
                    <div className="flex items-center justify-between gap-2">
                      <select
                        value={newTaskCat}
                        onChange={(e) => setNewTaskCat(e.target.value as any)}
                        className="p-2 rounded-lg bg-[var(--surface)] border border-[var(--border)] text-xs text-[var(--ink)]"
                      >
                        <option value="soins">Soins</option>
                        <option value="logistique">Logistique</option>
                        <option value="maison">Maison</option>
                        <option value="bienveillance">Bienveillance</option>
                      </select>
                      <label className="flex items-center gap-1.5 text-xs text-[var(--ink-soft)]">
                        <input
                          type="checkbox"
                          checked={newTaskAlerte}
                          onChange={(e) => setNewTaskAlerte(e.target.checked)}
                        />
                        <span>Afficher alerte</span>
                      </label>
                      <button
                        onClick={() => {
                          if (!newTaskNom.trim()) return;
                          onAddTask({
                            nom: newTaskNom.trim(),
                            frequence: 'quotidien',
                            jours_semaine: [1, 2, 3, 4, 5, 6, 7],
                            categorie: newTaskCat,
                            afficher_alerte: newTaskAlerte,
                            afficher_carrousel: false,
                          });
                          setNewTaskNom('');
                        }}
                        className="py-1.5 px-3 rounded-lg bg-emerald-600 text-white font-semibold text-xs hover:bg-emerald-500"
                      >
                        Ajouter
                      </button>
                    </div>
                  </div>

                  {/* Liste des tâches */}
                  <div className="flex flex-col gap-2">
                    {tasks.map((t) => (
                      <div
                        key={t.id}
                        className="p-2.5 rounded-xl bg-[var(--surface-alt)] border border-[var(--border)] flex items-center justify-between text-xs"
                      >
                        <div>
                          <strong className="text-[var(--ink)]">{t.nom}</strong>
                          <span className="text-[var(--ink-soft)] ml-2 capitalize">({t.categorie})</span>
                        </div>
                        <button
                          onClick={() => onDeleteTask(t.id)}
                          className="p-1.5 rounded text-red-400 hover:bg-red-950/40"
                        >
                          <Trash2 className="w-3.5 h-3.5" />
                        </button>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {/* TAB 3: Médicaments */}
              {activeTab === 'meds' && (
                <div className="flex flex-col gap-3">
                  <div className="p-3 rounded-xl bg-[var(--surface-alt)] border border-[var(--border)] flex flex-col gap-2">
                    <span className="text-xs font-bold text-[var(--ink)]">Ajouter un médicament</span>
                    <div className="grid grid-cols-2 gap-2">
                      <select
                        value={newMedPatient}
                        onChange={(e) => setNewMedPatient(e.target.value as any)}
                        className="p-2 rounded-lg bg-[var(--surface)] border border-[var(--border)] text-xs text-[var(--ink)]"
                      >
                        <option value="papa">Papa</option>
                        <option value="maman">Maman</option>
                      </select>
                      <input
                        type="time"
                        value={newMedHeure}
                        onChange={(e) => setNewMedHeure(e.target.value)}
                        className="p-2 rounded-lg bg-[var(--surface)] border border-[var(--border)] text-xs text-[var(--ink)]"
                      />
                    </div>
                    <input
                      type="text"
                      placeholder="Nom du médicament"
                      value={newMedNom}
                      onChange={(e) => setNewMedNom(e.target.value)}
                      className="p-2 rounded-lg bg-[var(--surface)] border border-[var(--border)] text-xs text-[var(--ink)]"
                    />
                    <div className="flex items-center justify-between gap-2">
                      <input
                        type="text"
                        placeholder="Posologie (ex: 1 comprimé)"
                        value={newMedDosage}
                        onChange={(e) => setNewMedDosage(e.target.value)}
                        className="flex-1 p-2 rounded-lg bg-[var(--surface)] border border-[var(--border)] text-xs text-[var(--ink)]"
                      />
                      <button
                        onClick={() => {
                          if (!newMedNom.trim()) return;
                          onAddMedication({
                            patient: newMedPatient,
                            nom: newMedNom.trim(),
                            dosage: newMedDosage.trim() || '1 dose',
                            moment: 'midi',
                            heure_prevue: newMedHeure,
                          });
                          setNewMedNom('');
                          setNewMedDosage('');
                        }}
                        className="py-1.5 px-3 rounded-lg bg-emerald-600 text-white font-semibold text-xs hover:bg-emerald-500"
                      >
                        Ajouter
                      </button>
                    </div>
                  </div>

                  <div className="flex flex-col gap-2">
                    {medications.map((m) => (
                      <div
                        key={m.id}
                        className="p-2.5 rounded-xl bg-[var(--surface-alt)] border border-[var(--border)] flex items-center justify-between text-xs"
                      >
                        <div>
                          <span className="uppercase font-bold text-sky-400 mr-1.5">[{m.patient}]</span>
                          <strong className="text-[var(--ink)]">{m.nom}</strong>
                          <span className="text-[var(--ink-soft)] ml-2">
                            {m.heure_prevue} • {m.dosage}
                          </span>
                        </div>
                        <button
                          onClick={() => onDeleteMedication(m.id)}
                          className="p-1.5 rounded text-red-400 hover:bg-red-950/40"
                        >
                          <Trash2 className="w-3.5 h-3.5" />
                        </button>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {/* TAB 4: RDV */}
              {activeTab === 'rdv' && (
                <div className="flex flex-col gap-3">
                  <div className="p-3 rounded-xl bg-[var(--surface-alt)] border border-[var(--border)] flex flex-col gap-2">
                    <span className="text-xs font-bold text-[var(--ink)]">Ajouter un rendez-vous</span>
                    <input
                      type="text"
                      placeholder="Titre (ex: Passage infirmier pansement)"
                      value={newRdvTitre}
                      onChange={(e) => setNewRdvTitre(e.target.value)}
                      className="p-2 rounded-lg bg-[var(--surface)] border border-[var(--border)] text-xs text-[var(--ink)]"
                    />
                    <div className="grid grid-cols-2 gap-2">
                      <select
                        value={newRdvPatient}
                        onChange={(e) => setNewRdvPatient(e.target.value as any)}
                        className="p-2 rounded-lg bg-[var(--surface)] border border-[var(--border)] text-xs text-[var(--ink)]"
                      >
                        <option value="papa">Papa</option>
                        <option value="maman">Maman</option>
                        <option value="tous">Tous</option>
                      </select>
                      <input
                        type="text"
                        placeholder="Date ou Période (ex: 2026-09-08 14:00)"
                        value={newRdvDate}
                        onChange={(e) => setNewRdvDate(e.target.value)}
                        className="p-2 rounded-lg bg-[var(--surface)] border border-[var(--border)] text-xs text-[var(--ink)]"
                      />
                    </div>
                    <div className="flex items-center justify-between gap-2">
                      <input
                        type="text"
                        placeholder="Lieu"
                        value={newRdvLieu}
                        onChange={(e) => setNewRdvLieu(e.target.value)}
                        className="flex-1 p-2 rounded-lg bg-[var(--surface)] border border-[var(--border)] text-xs text-[var(--ink)]"
                      />
                      <button
                        onClick={() => {
                          if (!newRdvTitre.trim()) return;
                          onAddAppointment({
                            titre: newRdvTitre.trim(),
                            patient: newRdvPatient,
                            type: 'ponctuel',
                            date_debut: newRdvDate.trim() || 'Aujourd’hui 15:00',
                            lieu: newRdvLieu.trim() || 'Domicile parents',
                          });
                          setNewRdvTitre('');
                        }}
                        className="py-1.5 px-3 rounded-lg bg-emerald-600 text-white font-semibold text-xs hover:bg-emerald-500"
                      >
                        Ajouter
                      </button>
                    </div>
                  </div>

                  <div className="flex flex-col gap-2">
                    {appointments.map((r) => (
                      <div
                        key={r.id}
                        className="p-2.5 rounded-xl bg-[var(--surface-alt)] border border-[var(--border)] flex items-center justify-between text-xs"
                      >
                        <div>
                          <strong className="text-[var(--ink)]">{r.titre}</strong>
                          <span className="text-[var(--ink-soft)] ml-2">
                            ({r.patient}) • {r.date_debut}
                          </span>
                        </div>
                        <button
                          onClick={() => onDeleteAppointment(r.id)}
                          className="p-1.5 rounded text-red-400 hover:bg-red-950/40"
                        >
                          <Trash2 className="w-3.5 h-3.5" />
                        </button>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {/* TAB 5: Fratrie */}
              {activeTab === 'users' && (
                <div className="flex flex-col gap-2.5">
                  <span className="text-xs font-bold text-[var(--ink-soft)] uppercase tracking-wider">
                    Membres de la fratrie (7 comptes prévus)
                  </span>
                  <div className="grid grid-cols-2 gap-2">
                    {siblings.map((s) => (
                      <div
                        key={s.id}
                        className="p-3 rounded-xl bg-[var(--surface-alt)] border border-[var(--border)] flex items-center gap-2.5"
                      >
                        <div className="w-7 h-7 rounded-full bg-[var(--accent)] text-white flex items-center justify-center font-bold text-xs">
                          {s.nom.charAt(0)}
                        </div>
                        <div>
                          <p className="text-sm font-bold text-[var(--ink)] m-0 leading-tight">
                            {s.nom}
                          </p>
                          <p className="text-[11px] text-[var(--ink-soft)] m-0">
                            Compte membre actif
                          </p>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {/* TAB 6: Tools & Simulation minuit */}
              {activeTab === 'tools' && (
                <div className="flex flex-col gap-3">
                  <div className="p-4 rounded-xl bg-[var(--surface-alt)] border border-[var(--border)] flex flex-col gap-2">
                    <h4 className="text-sm font-bold text-[var(--ink)] m-0">
                      Simuler le script de minuit (cron_minuit.php)
                    </h4>
                    <p className="text-xs text-[var(--ink-soft)] m-0">
                      Exécute la routine nocturne : régénération des instances quotidiennes de tâches et médicaments, et vérification de trou de planning sur J+1 et J+2.
                    </p>
                    <button
                      onClick={onSimulateMidnight}
                      className="py-2 px-4 rounded-xl bg-sky-700 hover:bg-sky-600 text-white font-bold text-xs flex items-center justify-center gap-2 mt-1 cursor-pointer"
                    >
                      <Play className="w-3.5 h-3.5" />
                      <span>Exécuter la simulation de minuit</span>
                    </button>
                  </div>

                  <div className="p-4 rounded-xl bg-red-950/30 border border-red-800/40 flex flex-col gap-2">
                    <h4 className="text-sm font-bold text-red-200 m-0">
                      Réinitialiser les données
                    </h4>
                    <p className="text-xs text-red-300/80 m-0">
                      Restaure l'ensemble des données de test initiales (fratrie de 7, tâches, médicaments et créneaux avec trou de planning démo).
                    </p>
                    <button
                      onClick={onResetData}
                      className="py-2 px-4 rounded-xl bg-red-900/60 hover:bg-red-800 text-white font-bold text-xs flex items-center justify-center gap-2 mt-1 cursor-pointer"
                    >
                      <RotateCcw className="w-3.5 h-3.5" />
                      <span>Restaurer les données initiales</span>
                    </button>
                  </div>
                </div>
              )}
            </div>
          </div>
        )}
      </div>
    </div>
  );
};