'use client';

import React, { useState } from 'react';
import { 
  Plus, 
  Key, 
  Copy, 
  Check, 
  X, 
  ExternalLink, 
  ShieldCheck, 
  Building2, 
  Mail, 
  Lock, 
  Sparkles, 
  Loader2,
  CheckCircle2
} from 'lucide-react';

interface Tenant {
  id: string;
  name: string;
  slug: string;
  created_at: string;
}

interface ClientManagementProps {
  initialTenants: Tenant[];
}

export default function ClientManagement({ initialTenants }: ClientManagementProps) {
  const [tenants, setTenants] = useState<Tenant[]>(initialTenants);
  const [isOpen, setIsOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const [errorMsg, setErrorMsg] = useState<string | null>(null);

  // Form state
  const [companyName, setCompanyName] = useState('');
  const [slug, setSlug] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [role, setRole] = useState<'client' | 'team' | 'admin'>('client');
  const [autoSlug, setAutoSlug] = useState(true);

  // Created access card state
  const [createdClient, setCreatedClient] = useState<{
    company: string;
    slug: string;
    email: string;
    password: string;
    role: string;
  } | null>(null);
  const [copied, setCopied] = useState(false);

  // Auto slug generation from company name
  const handleNameChange = (val: string) => {
    setCompanyName(val);
    if (autoSlug) {
      const generated = val
        .toLowerCase()
        .normalize('NFD')
        .replace(/[\u0300-\u036f]/g, '')
        .replace(/[^a-z0-9]+/g, '-')
        .replace(/(^-|-$)+/g, '');
      setSlug(generated);
    }
  };

  const generateRandomPassword = () => {
    const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789!@#$%&*';
    let pw = '';
    for (let i = 0; i < 14; i++) {
      pw += chars.charAt(Math.floor(Math.random() * chars.length));
    }
    setPassword(pw);
  };

  const handleCreate = async (e: React.FormEvent) => {
    e.preventDefault();
    setErrorMsg(null);
    setLoading(true);

    try {
      const res = await fetch('/api/admin/create-client', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          companyName,
          slug,
          email,
          password,
          role
        })
      });

      const data = await res.json();

      if (!res.ok || data.error) {
        throw new Error(data.error || 'Error al crear cliente');
      }

      // Add to local state if not exists
      const newTenant: Tenant = {
        id: data.client.tenant_id,
        name: companyName,
        slug: slug,
        created_at: new Date().toISOString()
      };

      setTenants(prev => {
        const filtered = prev.filter(t => t.slug !== slug);
        return [...filtered, newTenant];
      });

      setCreatedClient({
        company: companyName,
        slug: slug,
        email: email,
        password: password,
        role: role
      });

      // Clear input fields
      setCompanyName('');
      setSlug('');
      setEmail('');
      setPassword('');
    } catch (err: any) {
      setErrorMsg(err.message || 'Error inesperado');
    } finally {
      setLoading(false);
    }
  };

  const copyCredentials = () => {
    if (!createdClient) return;
    const text = `🔐 *Acceso a tu Centro de Mando — 4Ventures*
Empresa: ${createdClient.company}
Portal Web: https://app.4ventures.es/login
Usuario: ${createdClient.email}
Contraseña: ${createdClient.password}
Rol: ${createdClient.role === 'client' ? 'Cliente' : 'Agencia'}

Este portal cuenta con aislamiento de datos cifrado y métricas en tiempo real.`;

    navigator.clipboard.writeText(text);
    setCopied(true);
    setTimeout(() => setCopied(false), 2500);
  };

  return (
    <div className="bg-white border border-gray-200 rounded-xl overflow-hidden shadow-xl">
      {/* Table Header with Action Button */}
      <div className="p-5 border-b border-gray-200 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
          <h3 className="text-base font-bold text-gray-900 flex items-center gap-2">
            <Building2 className="w-4 h-4 text-brand-400" />
            Cartera de Clientes Activos ({tenants.length})
          </h3>
          <p className="text-xs text-gray-400 mt-0.5">
            Cada cliente cuenta con aislamiento nativo Row Level Security (RLS) en Postgres.
          </p>
        </div>

        <button
          onClick={() => {
            setIsOpen(true);
            setCreatedClient(null);
            setErrorMsg(null);
            generateRandomPassword();
          }}
          className="inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg bg-gradient-to-r from-brand-500 to-amber-600 hover:from-brand-600 hover:to-amber-700 text-white text-xs font-semibold shadow-lg shadow-brand-500/20 transition-all cursor-pointer"
        >
          <Plus className="w-4 h-4" />
          Dar de Alta Cliente
        </button>
      </div>

      {/* Tenants Table */}
      <div className="overflow-x-auto">
        <table className="w-full text-left text-sm text-gray-600">
          <thead className="bg-gray-900/50 text-xs uppercase text-gray-400 border-b border-gray-200">
            <tr>
              <th className="px-5 py-3">Nombre del Cliente</th>
              <th className="px-5 py-3">Tenant Slug</th>
              <th className="px-5 py-3">UUID</th>
              <th className="px-5 py-3">Acceso Portal</th>
              <th className="px-5 py-3">Estado</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-800/60">
            {tenants.map((t) => (
              <tr key={t.id} className="hover:bg-gray-50/30 transition-colors">
                <td className="px-5 py-3.5 font-semibold text-gray-900 flex items-center gap-2">
                  <span className="w-2 h-2 rounded-full bg-emerald-400" />
                  {t.name}
                </td>
                <td className="px-5 py-3.5 text-xs text-brand-400 font-mono">{t.slug}</td>
                <td className="px-5 py-3.5 text-xs text-gray-400 font-mono">{t.id}</td>
                <td className="px-5 py-3.5 text-xs">
                  <a
                    href={`/dashboard/kpis?tenant=${t.slug}`}
                    className="text-brand-400 hover:underline inline-flex items-center gap-1"
                  >
                    Abrir Portal <ExternalLink className="w-3 h-3" />
                  </a>
                </td>
                <td className="px-5 py-3.5 text-xs">
                  <span className="bg-emerald-950/80 text-emerald-400 px-2.5 py-0.5 rounded-full border border-emerald-800/40 text-[10px] font-bold uppercase tracking-wider">
                    Activo
                  </span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Modal: Onboard New Client */}
      {isOpen && (
        <div className="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">
          <div className="bg-white border border-gray-200 rounded-2xl w-full max-w-lg overflow-hidden shadow-2xl relative animate-in fade-in zoom-in duration-200">
            {/* Modal Header */}
            <div className="p-6 border-b border-gray-200 flex items-center justify-between">
              <div className="flex items-center gap-3">
                <div className="w-9 h-9 rounded-xl bg-brand-500/10 border border-brand-500/20 flex items-center justify-center text-brand-400">
                  <Building2 className="w-5 h-5" />
                </div>
                <div>
                  <h3 className="text-lg font-bold text-gray-900">Alta de Nuevo Cliente</h3>
                  <p className="text-xs text-gray-400">Crea el portal corporativo y activa sus credenciales de acceso</p>
                </div>
              </div>
              <button
                onClick={() => setIsOpen(false)}
                className="text-gray-600 hover:text-gray-900 p-1 rounded-lg hover:bg-gray-100 transition-colors"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            {/* Modal Body */}
            <div className="p-6">
              {createdClient ? (
                /* Success Screen with Credentials */
                <div className="space-y-5">
                  <div className="p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/30 flex items-start gap-3">
                    <CheckCircle2 className="w-5 h-5 text-emerald-400 shrink-0 mt-0.5" />
                    <div>
                      <h4 className="text-sm font-semibold text-emerald-300">¡Cliente Creado con Éxito!</h4>
                      <p className="text-xs text-emerald-400/80 mt-0.5">
                        El tenant ha sido configurado en Postgres con aislamiento RLS y el usuario ya puede iniciar sesión.
                      </p>
                    </div>
                  </div>

                  <div className="bg-gray-50 rounded-xl p-4 border border-gray-200 space-y-2.5 font-mono text-xs">
                    <div className="flex justify-between border-b border-gray-200 pb-2">
                      <span className="text-gray-400">Empresa:</span>
                      <span className="text-gray-900 font-semibold">{createdClient.company}</span>
                    </div>
                    <div className="flex justify-between border-b border-gray-200 pb-2">
                      <span className="text-gray-400">URL Acceso:</span>
                      <span className="text-brand-400">https://app.4ventures.es/login</span>
                    </div>
                    <div className="flex justify-between border-b border-gray-200 pb-2">
                      <span className="text-gray-400">Email:</span>
                      <span className="text-gray-900">{createdClient.email}</span>
                    </div>
                    <div className="flex justify-between items-center">
                      <span className="text-gray-400">Contraseña:</span>
                      <span className="text-amber-400 font-bold bg-amber-950/40 px-2 py-0.5 rounded border border-amber-800/40">
                        {createdClient.password}
                      </span>
                    </div>
                  </div>

                  <div className="flex gap-3">
                    <button
                      type="button"
                      onClick={copyCredentials}
                      className="flex-1 py-2.5 px-4 rounded-xl bg-brand-500 hover:bg-brand-600 text-white text-xs font-semibold flex items-center justify-center gap-2 transition-all cursor-pointer shadow-lg shadow-brand-500/20"
                    >
                      {copied ? <Check className="w-4 h-4 text-emerald-300" /> : <Copy className="w-4 h-4" />}
                      <span>{copied ? '¡Copiado al Portapapeles!' : 'Copiar Credenciales para el Cliente'}</span>
                    </button>
                    <button
                      type="button"
                      onClick={() => {
                        setCreatedClient(null);
                        generateRandomPassword();
                      }}
                      className="py-2.5 px-4 rounded-xl bg-gray-100 hover:bg-gray-700 text-gray-800 text-xs font-semibold transition-all cursor-pointer"
                    >
                      Crear Otro
                    </button>
                  </div>
                </div>
              ) : (
                /* Creation Form */
                <form onSubmit={handleCreate} className="space-y-4">
                  {errorMsg && (
                    <div className="p-3 rounded-lg bg-red-500/10 border border-red-500/30 text-red-400 text-xs">
                      {errorMsg}
                    </div>
                  )}

                  <div>
                    <label className="block text-xs font-medium text-gray-600 mb-1">
                      Nombre Comercial de la Empresa / Cliente
                    </label>
                    <div className="relative">
                      <Building2 className="w-4 h-4 text-gray-400 absolute left-3 top-3" />
                      <input
                        type="text"
                        required
                        placeholder="Ej: Clínica Dental Sonrisas"
                        value={companyName}
                        onChange={(e) => handleNameChange(e.target.value)}
                        className="w-full pl-9 pr-3 py-2 bg-gray-900 border border-gray-200 rounded-lg text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-brand-500"
                      />
                    </div>
                  </div>

                  <div>
                    <div className="flex justify-between items-center mb-1">
                      <label className="text-xs font-medium text-gray-600">
                        Slug del Tenant (identificador para subdominio y URL)
                      </label>
                      <button
                        type="button"
                        onClick={() => setAutoSlug(!autoSlug)}
                        className="text-[10px] text-brand-400 hover:underline cursor-pointer"
                      >
                        {autoSlug ? 'Modo manual' : 'Modo auto'}
                      </button>
                    </div>
                    <input
                      type="text"
                      required
                      placeholder="ej: clinica-sonrisas"
                      value={slug}
                      onChange={(e) => {
                        setAutoSlug(false);
                        setSlug(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ''));
                      }}
                      className="w-full px-3 py-2 bg-gray-900 border border-gray-200 rounded-lg text-sm font-mono text-brand-400 placeholder-gray-500 focus:outline-none focus:border-brand-500"
                    />
                  </div>

                  <div>
                    <label className="block text-xs font-medium text-gray-600 mb-1">
                      Correo Electrónico de Acceso
                    </label>
                    <div className="relative">
                      <Mail className="w-4 h-4 text-gray-400 absolute left-3 top-3" />
                      <input
                        type="email"
                        required
                        placeholder="director@cliente.com"
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                        className="w-full pl-9 pr-3 py-2 bg-gray-900 border border-gray-200 rounded-lg text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-brand-500"
                      />
                    </div>
                  </div>

                  <div>
                    <div className="flex justify-between items-center mb-1">
                      <label className="text-xs font-medium text-gray-600">
                        Contraseña Inicial
                      </label>
                      <button
                        type="button"
                        onClick={generateRandomPassword}
                        className="text-[10px] text-brand-400 hover:underline flex items-center gap-1 cursor-pointer"
                      >
                        <Sparkles className="w-3 h-3" /> Generar aleatoria
                      </button>
                    </div>
                    <div className="relative">
                      <Lock className="w-4 h-4 text-gray-400 absolute left-3 top-3" />
                      <input
                        type="text"
                        required
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                        className="w-full pl-9 pr-3 py-2 bg-gray-900 border border-gray-200 rounded-lg text-sm font-mono text-gray-900 placeholder-gray-500 focus:outline-none focus:border-brand-500"
                      />
                    </div>
                  </div>

                  <div>
                    <label className="block text-xs font-medium text-gray-600 mb-1">
                      Rol de Acceso
                    </label>
                    <select
                      value={role}
                      onChange={(e: any) => setRole(e.target.value)}
                      className="w-full px-3 py-2 bg-gray-900 border border-gray-200 rounded-lg text-sm text-gray-900 focus:outline-none focus:border-brand-500"
                    >
                      <option value="client">Cliente (Acceso exclusivo a su portal y métricas)</option>
                      <option value="team">Equipo Agencia (Acceso a toda la cartera)</option>
                      <option value="admin">Administrador 4Ventures (Control total)</option>
                    </select>
                  </div>

                  <div className="pt-3 flex items-center justify-end gap-3 border-t border-gray-200">
                    <button
                      type="button"
                      onClick={() => setIsOpen(false)}
                      className="px-4 py-2 rounded-lg text-xs font-semibold text-gray-600 hover:text-gray-900 hover:bg-gray-50 transition-all cursor-pointer"
                    >
                      Cancelar
                    </button>
                    <button
                      type="submit"
                      disabled={loading}
                      className="px-5 py-2 rounded-lg bg-gradient-to-r from-brand-500 to-amber-600 hover:from-brand-600 hover:to-amber-700 text-white text-xs font-semibold shadow-lg shadow-brand-500/20 flex items-center gap-2 transition-all disabled:opacity-50 cursor-pointer"
                    >
                      {loading ? (
                        <>
                          <Loader2 className="w-4 h-4 animate-spin" />
                          <span>Provisionando...</span>
                        </>
                      ) : (
                        <>
                          <Key className="w-4 h-4" />
                          <span>Crear y Activar Acceso</span>
                        </>
                      )}
                    </button>
                  </div>
                </form>
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}