import React, { useState, useEffect } from 'react';
import Layout from '../components/Layout';
import { toast } from 'sonner';
import { Shield, Users, Wifi, RefreshCw, Plus, Trash2, UserPlus, WifiOff, Volume2, MessageCircle, KeyRound, Link2, Copy, Check, X as XIcon, Hand, Stethoscope, HelpCircle } from 'lucide-react';
import { getTuyaDevices, getDispositivos, registrarDispositivo, deleteDispositivo, getUsuarios, crearUsuario, getAsignaciones, asignarDispositivo, desasignar, getDiagnosticoTuya, setLongPress, getChatConfig, setChatConfig, togglePrueba, adminSetPreferencias, getAdminDiagnosticos, crearRegistroLink, getRegistroLinks, revocarLink, getPendientes, aprobarPendiente, rechazarPendiente, adminCambiarPassword, adminUpdateUser, getPublicConfig } from '../lib/api';

const SOUND_OPTIONS = [
  { value: 'clasico', label: 'Clasico' },
  { value: 'urgente', label: 'Urgente' },
  { value: 'sirena', label: 'Sirena' },
  { value: 'suave', label: 'Suave' },
  { value: 'silencio', label: 'Silencioso' },
];

export default function AdminPage() {
  const [tuyaDevices, setTuyaDevices] = useState([]);
  const [registrados, setRegistrados] = useState([]);
  const [usuarios, setUsuarios] = useState([]);
  const [asignaciones, setAsignaciones] = useState([]);
  const [chatConf, setChatConf] = useState({ activo: false, duracion_minutos: 15 });
  const [loading, setLoading] = useState(true);
  const [tuyaError, setTuyaError] = useState('');
  const [longPressMs, setLongPressVal] = useState(800);
  const [sosLongPressMs, setSosLongPressVal] = useState(1200);
  const [registroLinks, setRegistroLinks] = useState([]);
  const [pendientes, setPendientes] = useState([]);
  const [diagnosticos, setDiagnosticos] = useState([]);
  const [tab, setTab] = useState('devices');
  const [dialogAdd, setDialogAdd] = useState(null);
  const [formNombre, setFormNombre] = useState('');
  const [formSwitch, setFormSwitch] = useState('switch_1');
  const [dialogUser, setDialogUser] = useState(false);
  const [formUser, setFormUser] = useState({ nombre: '', direccion: '', email: '', password: '' });
  const [dialogPwd, setDialogPwd] = useState(null);
  const [adminNewPwd, setAdminNewPwd] = useState('');
  const [copiedLinkId, setCopiedLinkId] = useState('');

  useEffect(() => { loadAll(); }, []);

  const loadAll = async () => {
    setLoading(true); setTuyaError('');
    try {
      const [rRes, uRes, aRes] = await Promise.all([getDispositivos(), getUsuarios(), getAsignaciones()]);
      setRegistrados(rRes); setUsuarios(uRes); setAsignaciones(aRes);
    } catch (e) { toast.error(e.message); }
    try { const c = await getChatConfig(); setChatConf(c); } catch {}
    try { const cfg = await getPublicConfig(); if (cfg.long_press_ms) setLongPressVal(cfg.long_press_ms); if (cfg.sos_long_press_ms) setSosLongPressVal(cfg.sos_long_press_ms); } catch {}
    try { setRegistroLinks(await getRegistroLinks()); } catch {}
    try { setPendientes(await getPendientes()); } catch {}
    try { setDiagnosticos(await getAdminDiagnosticos()); } catch {}
    setLoading(false);
  };

  const loadTuya = async () => {
    setTuyaError('');
    try { const d = await getTuyaDevices(); setTuyaDevices(d); } catch (e) { setTuyaError(e.message); }
  };

  const handleRegister = async () => {
    if (!dialogAdd || !formNombre) return;
    try {
      await registrarDispositivo({ tuya_device_id: dialogAdd.tuya_device_id, nombre: formNombre, codigo_switch: formSwitch });
      toast.success('Registrado'); setDialogAdd(null); setFormNombre(''); loadAll();
    } catch (e) { toast.error(e.message); }
  };

  const handleDelete = async (id) => {
    if (!window.confirm('¿Eliminar dispositivo?')) return;
    try { await deleteDispositivo(id); toast.success('Eliminado'); loadAll(); } catch (e) { toast.error(e.message); }
  };

  const handleCreateUser = async () => {
    try { await crearUsuario(formUser); toast.success('Usuario creado'); setDialogUser(false); setFormUser({ nombre: '', direccion: '', email: '', password: '' }); loadAll(); }
    catch (e) { toast.error(e.message); }
  };

  const handleAssign = async (userId, dispId) => {
    try { await asignarDispositivo(userId, dispId); toast.success('Asignado'); loadAll(); } catch (e) { toast.error(e.message); }
  };

  const handleUnassign = async (id) => {
    try { await desasignar(id); toast.success('Desasignado'); loadAll(); } catch (e) { toast.error(e.message); }
  };

  const handleSaveLongPress = async () => {
    try { await setLongPress({ long_press_ms: longPressMs, sos_long_press_ms: sosLongPressMs }); toast.success('Guardado'); } catch (e) { toast.error(e.message); }
  };

  const handleSaveChat = async () => {
    try { await setChatConfig(chatConf); toast.success('Guardado'); } catch (e) { toast.error(e.message); }
  };

  const handleNewLink = async () => {
    try { const l = await crearRegistroLink(7); setRegistroLinks(prev => [l, ...prev]); toast.success('Link creado'); } catch (e) { toast.error(e.message); }
  };

  const copyLink = (token) => {
    const url = `${window.location.origin}/registro/${token}`;
    navigator.clipboard.writeText(url); setCopiedLinkId(token);
    setTimeout(() => setCopiedLinkId(''), 2000);
  };

  const TABS = [
    { id: 'devices', label: 'Dispositivos', icon: Shield },
    { id: 'users', label: 'Usuarios', icon: Users },
    { id: 'config', label: 'Config', icon: Hand },
    { id: 'links', label: 'Registro', icon: Link2 },
    { id: 'diag', label: 'Diagnósticos', icon: Stethoscope },
  ];

  if (loading) return <Layout><div className="flex items-center justify-center py-20"><RefreshCw className="h-8 w-8 animate-spin text-zinc-400" /></div></Layout>;

  return (
    <Layout>
      <div className="space-y-6">
        <h1 className="font-black text-2xl uppercase tracking-tight flex items-center gap-3"><Shield className="h-7 w-7 text-amber-500" /> Administración</h1>

        {/* Tabs */}
        <div className="flex gap-1 overflow-x-auto pb-1">
          {TABS.map(t => (
            <button key={t.id} onClick={() => setTab(t.id)}
              className={`flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-colors ${tab === t.id ? 'bg-zinc-900 text-white dark:bg-white dark:text-black' : 'text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-800'}`}>
              <t.icon className="h-4 w-4" />{t.label}
            </button>
          ))}
        </div>

        {tab === 'devices' && (
          <div className="space-y-4">
            <div className="flex items-center justify-between">
              <h2 className="font-bold">Dispositivos registrados ({registrados.length})</h2>
              <button onClick={loadTuya} className="text-xs px-3 py-1.5 border rounded-lg flex items-center gap-1 hover:bg-zinc-50"><RefreshCw className="h-3 w-3" />Cargar Tuya</button>
            </div>
            {tuyaError && <p className="text-red-500 text-sm">{tuyaError}</p>}
            <div className="space-y-2">
              {registrados.map(d => (
                <div key={d.id} className="flex items-center justify-between p-3 border rounded-xl">
                  <div><span className="font-bold">{d.nombre}</span><br /><span className="text-xs text-zinc-400 font-mono">{d.tuya_device_id}</span></div>
                  <button onClick={() => handleDelete(d.id)} className="p-2 text-red-500 hover:bg-red-50 rounded-lg"><Trash2 className="h-4 w-4" /></button>
                </div>
              ))}
            </div>
            {tuyaDevices.length > 0 && (
              <div className="space-y-2 border-t pt-4">
                <h3 className="font-bold text-sm">Dispositivos Tuya disponibles</h3>
                {tuyaDevices.filter(t => !registrados.some(r => r.tuya_device_id === t.tuya_device_id)).map(d => (
                  <div key={d.tuya_device_id} className="flex items-center justify-between p-3 border rounded-xl">
                    <div><span className="font-medium">{d.name}</span><br /><span className="text-xs text-zinc-400">{d.product_name}</span></div>
                    <button onClick={() => { setDialogAdd(d); setFormNombre(d.name || ''); }} className="px-3 py-1.5 bg-emerald-500 text-white text-xs rounded-lg font-bold"><Plus className="h-3 w-3 inline mr-1" />Registrar</button>
                  </div>
                ))}
              </div>
            )}
          </div>
        )}

        {tab === 'users' && (
          <div className="space-y-4">
            <div className="flex items-center justify-between">
              <h2 className="font-bold">Usuarios ({usuarios.length})</h2>
              <button onClick={() => setDialogUser(true)} className="px-3 py-1.5 bg-emerald-500 text-white text-xs rounded-lg font-bold flex items-center gap-1"><UserPlus className="h-3 w-3" />Crear</button>
            </div>
            {pendientes.length > 0 && (
              <div className="border-2 border-amber-400 rounded-xl p-3 space-y-2">
                <h3 className="font-bold text-amber-600 text-sm">Solicitudes pendientes ({pendientes.length})</h3>
                {pendientes.map(p => (
                  <div key={p.id} className="flex items-center justify-between p-2 bg-amber-50 rounded-lg text-sm">
                    <div><span className="font-medium">{p.nombre}</span> <span className="text-zinc-400">{p.email}</span>{p.direccion && <span className="text-zinc-400 ml-1">({p.direccion})</span>}</div>
                    <div className="flex gap-1">
                      <button onClick={async () => { try { await aprobarPendiente(p.id); toast.success('Aprobado'); loadAll(); } catch (e) { toast.error(e.message); }}} className="px-2 py-1 bg-emerald-500 text-white text-xs rounded font-bold"><Check className="h-3 w-3" /></button>
                      <button onClick={async () => { try { await rechazarPendiente(p.id); toast.success('Rechazado'); loadAll(); } catch (e) { toast.error(e.message); }}} className="px-2 py-1 bg-red-500 text-white text-xs rounded font-bold"><XIcon className="h-3 w-3" /></button>
                    </div>
                  </div>
                ))}
              </div>
            )}
            <div className="space-y-2">
              {usuarios.map(u => {
                const userAsigs = asignaciones.filter(a => a.usuario_id === u.id);
                return (
                  <div key={u.id} className="p-3 border rounded-xl space-y-2">
                    <div className="flex items-center justify-between">
                      <div><span className="font-bold">{u.nombre}</span><br /><span className="text-xs text-zinc-400">{u.email}{u.direccion && ` - ${u.direccion}`}</span></div>
                      <div className="flex gap-1">
                        <button onClick={() => { setDialogPwd(u); setAdminNewPwd(''); }} className="p-1.5 text-zinc-400 hover:bg-zinc-100 rounded-lg" title="Cambiar contraseña"><KeyRound className="h-3.5 w-3.5" /></button>
                      </div>
                    </div>
                    <div className="flex flex-wrap gap-1">
                      {userAsigs.map(a => {
                        const disp = registrados.find(d => d.id === a.dispositivo_id);
                        return (
                          <span key={a.id} className="inline-flex items-center gap-1 px-2 py-0.5 bg-emerald-100 text-emerald-700 text-xs rounded-full font-medium">
                            {disp?.nombre || '?'}<button onClick={() => handleUnassign(a.id)} className="hover:text-red-500"><XIcon className="h-3 w-3" /></button>
                          </span>
                        );
                      })}
                      {registrados.filter(d => !userAsigs.some(a => a.dispositivo_id === d.id)).map(d => (
                        <button key={d.id} onClick={() => handleAssign(u.id, d.id)} className="inline-flex items-center gap-1 px-2 py-0.5 border border-dashed text-xs rounded-full text-zinc-400 hover:text-emerald-500 hover:border-emerald-500">
                          <Plus className="h-3 w-3" />{d.nombre}
                        </button>
                      ))}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        )}

        {tab === 'config' && (
          <div className="space-y-6">
            <div className="p-4 border rounded-xl space-y-4">
              <h3 className="font-bold flex items-center gap-2"><Hand className="h-4 w-4" />Long Press</h3>
              <div className="grid grid-cols-2 gap-4">
                <div><label className="text-xs text-zinc-400">Dispositivo (ms)</label><input type="number" value={longPressMs} onChange={e => setLongPressVal(Number(e.target.value))} className="w-full h-8 px-2 border rounded text-sm" /></div>
                <div><label className="text-xs text-zinc-400">SOS (ms)</label><input type="number" value={sosLongPressMs} onChange={e => setSosLongPressVal(Number(e.target.value))} className="w-full h-8 px-2 border rounded text-sm" /></div>
              </div>
              <button onClick={handleSaveLongPress} className="px-4 py-2 bg-zinc-900 text-white text-sm rounded-lg font-bold">Guardar</button>
            </div>
            <div className="p-4 border rounded-xl space-y-3">
              <h3 className="font-bold flex items-center gap-2"><MessageCircle className="h-4 w-4" />Chat Temporal</h3>
              <div className="flex items-center gap-3">
                <label className="text-sm">Activo</label>
                <button onClick={() => setChatConf(c => ({ ...c, activo: !c.activo }))} className={`w-10 h-5 rounded-full transition-colors ${chatConf.activo ? 'bg-emerald-500' : 'bg-zinc-300'}`}>
                  <div className={`w-4 h-4 bg-white rounded-full transition-transform ${chatConf.activo ? 'translate-x-5' : 'translate-x-0.5'}`} />
                </button>
                <input type="number" value={chatConf.duracion_minutos} onChange={e => setChatConf(c => ({ ...c, duracion_minutos: Number(e.target.value) }))} className="w-16 h-8 px-2 border rounded text-sm" />
                <span className="text-xs text-zinc-400">min</span>
              </div>
              <button onClick={handleSaveChat} className="px-4 py-2 bg-zinc-900 text-white text-sm rounded-lg font-bold">Guardar</button>
            </div>
          </div>
        )}

        {tab === 'links' && (
          <div className="space-y-4">
            <div className="flex items-center justify-between">
              <h2 className="font-bold">Links de Registro</h2>
              <button onClick={handleNewLink} className="px-3 py-1.5 bg-emerald-500 text-white text-xs rounded-lg font-bold flex items-center gap-1"><Link2 className="h-3 w-3" />Crear Link</button>
            </div>
            <div className="space-y-2">
              {registroLinks.map(l => (
                <div key={l.id} className="flex items-center justify-between p-3 border rounded-xl text-sm">
                  <div className="flex items-center gap-2">
                    <span className={`w-2 h-2 rounded-full ${l.activo ? 'bg-emerald-500' : 'bg-red-500'}`} />
                    <span className="font-mono text-xs truncate max-w-[200px]">{l.token}</span>
                    <span className="text-zinc-400 text-xs">{l.valid_days}d</span>
                  </div>
                  <div className="flex gap-1">
                    <button onClick={() => copyLink(l.token)} className="p-1.5 hover:bg-zinc-100 rounded-lg">
                      {copiedLinkId === l.token ? <Check className="h-3.5 w-3.5 text-emerald-500" /> : <Copy className="h-3.5 w-3.5" />}
                    </button>
                    {l.activo && <button onClick={async () => { await revocarLink(l.id); loadAll(); }} className="p-1.5 text-red-500 hover:bg-red-50 rounded-lg"><XIcon className="h-3.5 w-3.5" /></button>}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {tab === 'diag' && (
          <div className="space-y-4">
            <h2 className="font-bold flex items-center gap-2"><Stethoscope className="h-5 w-5" />Diagnósticos de Usuarios</h2>
            <div className="space-y-2">
              {diagnosticos.map(d => (
                <div key={d.usuario_id} className="flex items-center justify-between p-3 border rounded-xl text-sm">
                  <div><span className="font-medium">{d.nombre}</span>{d.direccion && <span className="text-zinc-400 ml-2">({d.direccion})</span>}</div>
                  <span className={`px-2 py-0.5 rounded-full text-xs font-bold ${d.estado === 'ok' ? 'bg-emerald-100 text-emerald-700' : d.estado === 'parcial' ? 'bg-amber-100 text-amber-700' : d.estado === 'falla' ? 'bg-red-100 text-red-700' : 'bg-zinc-100 text-zinc-500'}`}>
                    {d.estado === 'ok' ? 'OK' : d.estado === 'parcial' ? 'Parcial' : d.estado === 'falla' ? 'Falla' : 'Sin test'}
                  </span>
                </div>
              ))}
              {diagnosticos.length === 0 && <p className="text-zinc-400 text-sm text-center py-8">Sin diagnósticos registrados</p>}
            </div>
          </div>
        )}
      </div>

      {/* Register Device Dialog */}
      {dialogAdd && (
        <div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4" onClick={() => setDialogAdd(null)}>
          <div className="bg-white dark:bg-zinc-900 rounded-2xl p-6 max-w-sm w-full space-y-4" onClick={e => e.stopPropagation()}>
            <h3 className="font-bold">Registrar Dispositivo</h3>
            <p className="text-xs text-zinc-400">{dialogAdd.tuya_device_id}</p>
            <input value={formNombre} onChange={e => setFormNombre(e.target.value)} placeholder="Nombre visible" className="w-full h-10 px-3 border rounded-lg text-sm" />
            <input value={formSwitch} onChange={e => setFormSwitch(e.target.value)} placeholder="Código switch" className="w-full h-10 px-3 border rounded-lg text-sm" />
            <div className="flex gap-2">
              <button onClick={() => setDialogAdd(null)} className="flex-1 py-2 border rounded-lg text-sm">Cancelar</button>
              <button onClick={handleRegister} className="flex-1 py-2 bg-emerald-500 text-white rounded-lg text-sm font-bold">Registrar</button>
            </div>
          </div>
        </div>
      )}

      {/* Create User Dialog */}
      {dialogUser && (
        <div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4" onClick={() => setDialogUser(false)}>
          <div className="bg-white dark:bg-zinc-900 rounded-2xl p-6 max-w-sm w-full space-y-3" onClick={e => e.stopPropagation()}>
            <h3 className="font-bold">Crear Usuario</h3>
            <input value={formUser.nombre} onChange={e => setFormUser(f => ({ ...f, nombre: e.target.value }))} placeholder="Nombre" className="w-full h-10 px-3 border rounded-lg text-sm" />
            <input value={formUser.email} onChange={e => setFormUser(f => ({ ...f, email: e.target.value }))} placeholder="Email" className="w-full h-10 px-3 border rounded-lg text-sm" />
            <input value={formUser.direccion} onChange={e => setFormUser(f => ({ ...f, direccion: e.target.value }))} placeholder="Dirección" className="w-full h-10 px-3 border rounded-lg text-sm" />
            <input type="password" value={formUser.password} onChange={e => setFormUser(f => ({ ...f, password: e.target.value }))} placeholder="Contraseña" className="w-full h-10 px-3 border rounded-lg text-sm" />
            <div className="flex gap-2">
              <button onClick={() => setDialogUser(false)} className="flex-1 py-2 border rounded-lg text-sm">Cancelar</button>
              <button onClick={handleCreateUser} className="flex-1 py-2 bg-emerald-500 text-white rounded-lg text-sm font-bold">Crear</button>
            </div>
          </div>
        </div>
      )}

      {/* Change Password Dialog */}
      {dialogPwd && (
        <div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4" onClick={() => setDialogPwd(null)}>
          <div className="bg-white dark:bg-zinc-900 rounded-2xl p-6 max-w-sm w-full space-y-3" onClick={e => e.stopPropagation()}>
            <h3 className="font-bold">Cambiar contraseña</h3>
            <p className="text-sm text-zinc-400">{dialogPwd.nombre}</p>
            <input type="password" value={adminNewPwd} onChange={e => setAdminNewPwd(e.target.value)} placeholder="Nueva contraseña" className="w-full h-10 px-3 border rounded-lg text-sm" />
            <div className="flex gap-2">
              <button onClick={() => setDialogPwd(null)} className="flex-1 py-2 border rounded-lg text-sm">Cancelar</button>
              <button onClick={async () => { try { await adminCambiarPassword(dialogPwd.id, adminNewPwd); toast.success('Contraseña actualizada'); setDialogPwd(null); } catch (e) { toast.error(e.message); }}}
                className="flex-1 py-2 bg-emerald-500 text-white rounded-lg text-sm font-bold">Guardar</button>
            </div>
          </div>
        </div>
      )}
    </Layout>
  );
}