import React, { useState, useEffect } from 'react';
import Layout from '../components/Layout';
import { toast } from 'sonner';
import { Building2, Plus, Users, Cpu, Edit, Check } from 'lucide-react';
import { getTenants, createTenant, updateTenant } from '../lib/api';

export default function TenantsPage() {
  const [tenants, setTenants] = useState([]);
  const [loading, setLoading] = useState(true);
  const [dialogNew, setDialogNew] = useState(false);
  const [form, setForm] = useState({ nombre: '', slug: '', tuya_access_id: '', tuya_access_secret: '', tuya_endpoint: 'https://openapi.tuyaus.com', admin_email: '', admin_password: '' });

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

  const load = async () => {
    try { setTenants(await getTenants()); } catch (e) { toast.error(e.message); }
    setLoading(false);
  };

  const handleCreate = async () => {
    try { await createTenant(form); toast.success('Tenant creado'); setDialogNew(false); setForm({ nombre: '', slug: '', tuya_access_id: '', tuya_access_secret: '', tuya_endpoint: 'https://openapi.tuyaus.com', admin_email: '', admin_password: '' }); load(); }
    catch (e) { toast.error(e.message); }
  };

  if (loading) return <Layout><div className="flex items-center justify-center py-20"><div className="w-8 h-8 border-4 border-zinc-300 border-t-zinc-900 rounded-full animate-spin" /></div></Layout>;

  return (
    <Layout>
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <h1 className="font-black text-2xl uppercase tracking-tight flex items-center gap-3">
            <Building2 className="h-7 w-7 text-purple-500" /> Tenants
          </h1>
          <button onClick={() => setDialogNew(true)} className="px-4 py-2 bg-purple-500 text-white text-sm rounded-lg font-bold flex items-center gap-2">
            <Plus className="h-4 w-4" /> Nuevo Tenant
          </button>
        </div>

        <div className="grid gap-4 md:grid-cols-2">
          {tenants.map(t => (
            <div key={t.id} className="p-4 border rounded-xl space-y-3">
              <div className="flex items-center justify-between">
                <div>
                  <h3 className="font-bold text-lg">{t.nombre}</h3>
                  <span className="text-xs text-zinc-400 font-mono">{t.slug}</span>
                </div>
                <span className={`px-2 py-0.5 rounded-full text-xs font-bold ${t.estado === 'activo' ? 'bg-emerald-100 text-emerald-700' : 'bg-red-100 text-red-700'}`}>
                  {t.estado}
                </span>
              </div>
              <div className="flex gap-4 text-sm text-zinc-500">
                <span className="flex items-center gap-1"><Users className="h-3.5 w-3.5" />{t.users_count} usuarios</span>
                <span className="flex items-center gap-1"><Cpu className="h-3.5 w-3.5" />{t.devices_count} dispositivos</span>
              </div>
              <div className="text-xs text-zinc-400">
                Tuya: {t.tuya_access_id ? <span className="text-emerald-500">Configurado</span> : <span className="text-red-400">No configurado</span>}
              </div>
            </div>
          ))}
        </div>
      </div>

      {dialogNew && (
        <div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4" onClick={() => setDialogNew(false)}>
          <div className="bg-white dark:bg-zinc-900 rounded-2xl p-6 max-w-md w-full space-y-3 max-h-[90vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
            <h3 className="font-bold text-lg">Nuevo Tenant</h3>
            <div className="space-y-2">
              <input value={form.nombre} onChange={e => setForm(f => ({ ...f, nombre: e.target.value }))} placeholder="Nombre (ej: La Colina)" className="w-full h-10 px-3 border rounded-lg text-sm" />
              <input value={form.slug} onChange={e => setForm(f => ({ ...f, slug: e.target.value }))} placeholder="Slug (ej: la_colina)" className="w-full h-10 px-3 border rounded-lg text-sm font-mono" />
              <hr />
              <p className="text-xs text-zinc-400 font-bold">Credenciales Tuya</p>
              <input value={form.tuya_access_id} onChange={e => setForm(f => ({ ...f, tuya_access_id: e.target.value }))} placeholder="Tuya Access ID" className="w-full h-10 px-3 border rounded-lg text-sm font-mono" />
              <input value={form.tuya_access_secret} onChange={e => setForm(f => ({ ...f, tuya_access_secret: e.target.value }))} placeholder="Tuya Access Secret" className="w-full h-10 px-3 border rounded-lg text-sm font-mono" />
              <input value={form.tuya_endpoint} onChange={e => setForm(f => ({ ...f, tuya_endpoint: e.target.value }))} placeholder="Tuya Endpoint" className="w-full h-10 px-3 border rounded-lg text-sm font-mono" />
              <hr />
              <p className="text-xs text-zinc-400 font-bold">Admin del Tenant</p>
              <input value={form.admin_email} onChange={e => setForm(f => ({ ...f, admin_email: e.target.value }))} placeholder="Email admin" className="w-full h-10 px-3 border rounded-lg text-sm" />
              <input type="password" value={form.admin_password} onChange={e => setForm(f => ({ ...f, admin_password: e.target.value }))} placeholder="Contraseña admin" className="w-full h-10 px-3 border rounded-lg text-sm" />
            </div>
            <div className="flex gap-2 pt-2">
              <button onClick={() => setDialogNew(false)} className="flex-1 py-2 border rounded-lg text-sm">Cancelar</button>
              <button onClick={handleCreate} className="flex-1 py-2 bg-purple-500 text-white rounded-lg text-sm font-bold">Crear</button>
            </div>
          </div>
        </div>
      )}
    </Layout>
  );
}