'use client';

import { useState } from 'react';
import { DashboardShell } from '@/components/layouts/dashboard-shell';
import { Card, CardContent, CardHeader, CardTitle, Button, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@horux/shared-ui';
import { useUsuarios, useInviteUsuario, useUpdateUsuario, useDeleteUsuario } from '@/lib/hooks/use-usuarios';
import { useContribuyentes } from '@/lib/hooks/use-contribuyentes';
import { addClienteAcceso } from '@/lib/api/contribuyentes';
import { useQuery } from '@tanstack/react-query';
import { apiClient } from '@/lib/api/client';
import { useAuthStore } from '@/stores/auth-store';
import { Users, UserPlus, Trash2, Shield, Eye, Calculator, UserCheck, UserCog, Building2, FolderOpen, KeyRound } from 'lucide-react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@horux/shared-ui';
import Link from 'next/link';
import { cn } from '@horux/shared-ui';
import { isDespachoTenant } from '@horux/shared';
import type { Role, UserInvite } from '@horux/shared';

// ── Horux360 legacy roles ─────────────────────────────────────────────────────
const legacyRoleLabels: Record<string, { label: string; icon: React.ElementType; color: string }> = {
  owner:    { label: 'Dueño',    icon: Shield,    color: 'text-primary' },
  cfo:      { label: 'CFO',      icon: Shield,    color: 'text-primary' },
  contador: { label: 'Contador', icon: Calculator, color: 'text-success' },
  auxiliar: { label: 'Auxiliar', icon: UserCog,   color: 'text-success' },
  visor:    { label: 'Visor',    icon: Eye,        color: 'text-muted-foreground' },
};

const legacyInviteRoles: { value: string; label: string }[] = [
  { value: 'contador', label: 'Contador' },
  { value: 'visor',    label: 'Visor' },
  { value: 'auxiliar', label: 'Auxiliar' },
];

// ── Despacho roles ────────────────────────────────────────────────────────────
const despachoRoleLabels: Record<string, { label: string; icon: React.ElementType; color: string }> = {
  owner:      { label: 'Owner',      icon: Shield,     color: 'text-primary' },
  supervisor: { label: 'Supervisor', icon: UserCheck,  color: 'text-success' },
  auxiliar:   { label: 'Auxiliar',   icon: UserCog,    color: 'text-success' },
  cliente:    { label: 'Cliente',    icon: Building2,  color: 'text-muted-foreground' },
};

const despachoInviteRoles: { value: string; label: string; description: string }[] = [
  {
    value: 'supervisor',
    label: 'Supervisor',
    description: 'Titular de RFCs, crea carteras y gestiona auxiliares',
  },
  {
    value: 'auxiliar',
    label: 'Auxiliar',
    description: 'Accede a RFCs asignados vía carteras',
  },
  {
    value: 'cliente',
    label: 'Cliente',
    description: 'Visor externo — acceso read-only a sus RFCs',
  },
];

// ── Fallback for unknown roles ─────────────────────────────────────────────────
function getRoleInfo(
  role: string,
  isDespacho: boolean,
): { label: string; icon: React.ElementType; color: string } {
  if (isDespacho) {
    return despachoRoleLabels[role] ?? { label: role, icon: Eye, color: 'text-muted-foreground' };
  }
  return legacyRoleLabels[role] ?? { label: role, icon: Eye, color: 'text-muted-foreground' };
}

export default function UsuariosPage() {
  const { user: currentUser } = useAuthStore();
  const { data: usuarios, isLoading } = useUsuarios();
  const { data: contribuyentes } = useContribuyentes();
  const inviteUsuario = useInviteUsuario();
  const updateUsuario = useUpdateUsuario();
  const deleteUsuario = useDeleteUsuario();

  const isDespacho = isDespachoTenant(currentUser?.tenantRfc);
  const inviteRoles = isDespacho ? despachoInviteRoles : legacyInviteRoles;
  const defaultInviteRole = isDespacho ? 'auxiliar' : 'visor';

  const isAdmin = currentUser?.role === 'owner' || currentUser?.role === 'cfo';

  const [showInvite, setShowInvite] = useState(false);
  const [inviteForm, setInviteForm] = useState<{ email: string; nombre: string; role: UserInvite['role']; supervisorUserId?: string }>({
    email: '',
    nombre: '',
    role: defaultInviteRole as UserInvite['role'],
  });
  const [selectedRfcIds, setSelectedRfcIds] = useState<string[]>([]);

  // Edit accesos modal
  const [editingAccesosUser, setEditingAccesosUser] = useState<{ id: string; nombre: string } | null>(null);
  const [accesosRfcIds, setAccesosRfcIds] = useState<string[]>([]);
  const [savingAccesos, setSavingAccesos] = useState(false);

  // Edit supervisor modal (para auxiliares)
  const [editingSupervisorUser, setEditingSupervisorUser] = useState<{ id: string; nombre: string } | null>(null);
  const [selectedSupervisorId, setSelectedSupervisorId] = useState<string>('');
  const [savingSupervisor, setSavingSupervisor] = useState(false);

  const openEditSupervisor = async (userId: string, nombre: string) => {
    try {
      const res = await apiClient.get<{ supervisorUserId: string | null }>(`/usuarios/${userId}/supervisor`);
      setSelectedSupervisorId(res.data.supervisorUserId ?? '');
      setEditingSupervisorUser({ id: userId, nombre });
    } catch {
      alert('Error al cargar supervisor');
    }
  };

  const handleSaveSupervisor = async () => {
    if (!editingSupervisorUser) return;
    setSavingSupervisor(true);
    try {
      await apiClient.put(`/usuarios/${editingSupervisorUser.id}/supervisor`, {
        supervisorUserId: selectedSupervisorId || null,
      });
      setEditingSupervisorUser(null);
    } catch {
      alert('Error al guardar supervisor');
    } finally {
      setSavingSupervisor(false);
    }
  };

  const openEditAccesos = async (userId: string, nombre: string) => {
    try {
      const res = await apiClient.get<{ data: string[] }>(`/usuarios/${userId}/accesos`);
      setAccesosRfcIds(res.data.data);
      setEditingAccesosUser({ id: userId, nombre });
    } catch {
      alert('Error al cargar accesos');
    }
  };

  const handleSaveAccesos = async () => {
    if (!editingAccesosUser) return;
    setSavingAccesos(true);
    try {
      await apiClient.post(`/usuarios/${editingAccesosUser.id}/accesos`, { entidadIds: accesosRfcIds });
      setEditingAccesosUser(null);
    } catch {
      alert('Error al guardar accesos');
    } finally {
      setSavingAccesos(false);
    }
  };

  const toggleAccesoRfc = (id: string) => {
    setAccesosRfcIds(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);
  };

  // Fetch supervisors for auxiliar invite dropdown
  const { data: supervisores } = useQuery({
    queryKey: ['cartera-supervisores'],
    queryFn: async () => {
      const res = await apiClient.get<{ data: Array<{ userId: string; nombre: string; email: string }> }>('/carteras/supervisores');
      return res.data.data;
    },
    enabled: isDespacho && isAdmin,
  });

  const toggleRfc = (id: string) => {
    setSelectedRfcIds((prev) =>
      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id],
    );
  };

  const handleInvite = async (e: React.FormEvent) => {
    e.preventDefault();
    if (inviteForm.role === 'auxiliar' && !inviteForm.supervisorUserId) {
      alert('Debes asignar un supervisor al auxiliar');
      return;
    }
    try {
      const newUser = await inviteUsuario.mutateAsync(inviteForm);
      // If role is 'cliente' and RFCs were selected, grant access to each
      if (inviteForm.role === 'cliente' && selectedRfcIds.length > 0) {
        await Promise.all(
          selectedRfcIds.map((rfcId) => addClienteAcceso(rfcId, newUser.id)),
        );
      }
      setShowInvite(false);
      setInviteForm({ email: '', nombre: '', role: defaultInviteRole as UserInvite['role'], supervisorUserId: undefined });
      setSelectedRfcIds([]);
    } catch (error: any) {
      alert(error.response?.data?.message || 'Error al invitar usuario');
    }
  };

  const handleToggleActive = (id: string, active: boolean) => {
    updateUsuario.mutate({ id, data: { active: !active } });
  };

  const handleDelete = (id: string) => {
    if (confirm('¿Eliminar este usuario?')) {
      deleteUsuario.mutate(id);
    }
  };

  return (
    <DashboardShell title="Usuarios">
      <div className="space-y-4">
        {/* Header */}
        <div className="flex justify-between items-center">
          <div>
            <h1 className="text-2xl font-bold">Usuarios</h1>
            <p className="text-sm text-muted-foreground">Gestiona tu equipo</p>
          </div>
          <div className="flex items-center gap-2">
            {isAdmin && isDespacho && (
              <Button variant="outline" className="flex items-center gap-2" asChild>
                <Link href="/carteras">
                  <FolderOpen className="h-4 w-4" /> Gestionar Carteras
                </Link>
              </Button>
            )}
            {isAdmin && (
              <Button onClick={() => setShowInvite(true)}>
                <UserPlus className="h-4 w-4 mr-2" />
                Invitar Usuario
              </Button>
            )}
          </div>
        </div>
        {/* User count */}
        <div className="flex items-center gap-2 text-sm text-muted-foreground">
          <Users className="h-4 w-4" />
          <span>{usuarios?.length || 0} usuarios</span>
        </div>

        {/* Invite Form */}
        {showInvite && (
          <Card>
            <CardHeader>
              <CardTitle>Invitar Nuevo Usuario</CardTitle>
            </CardHeader>
            <CardContent>
              <form onSubmit={handleInvite} className="space-y-4">
                <div className="grid gap-4 md:grid-cols-3">
                  <div className="space-y-2">
                    <Label htmlFor="email">Email</Label>
                    <Input
                      id="email"
                      type="email"
                      value={inviteForm.email}
                      onChange={e => setInviteForm({ ...inviteForm, email: e.target.value })}
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="nombre">Nombre</Label>
                    <Input
                      id="nombre"
                      value={inviteForm.nombre}
                      onChange={e => setInviteForm({ ...inviteForm, nombre: e.target.value })}
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="role">Rol</Label>
                    <Select
                      value={inviteForm.role}
                      onValueChange={(v) => { setInviteForm({ ...inviteForm, role: v as UserInvite['role'], supervisorUserId: undefined }); if (v !== 'cliente') setSelectedRfcIds([]); }}
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        {inviteRoles.map((r: { value: string; label: string; description?: string }) => (
                          <SelectItem key={r.value} value={r.value}>
                            <div className="flex flex-col">
                              <span>{r.label}</span>
                              {'description' in r && r.description && (
                                <span className="text-xs text-muted-foreground">{r.description}</span>
                              )}
                            </div>
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                </div>
                {/* Supervisor selector for auxiliar role */}
                {isDespacho && inviteForm.role === 'auxiliar' && (
                  <div className="space-y-2">
                    <Label>Supervisor asignado</Label>
                    {supervisores && supervisores.length > 0 ? (
                      <Select
                        value={inviteForm.supervisorUserId || ''}
                        onValueChange={(v) => setInviteForm({ ...inviteForm, supervisorUserId: v })}
                      >
                        <SelectTrigger>
                          <SelectValue placeholder="Seleccionar supervisor..." />
                        </SelectTrigger>
                        <SelectContent>
                          {supervisores.map(s => (
                            <SelectItem key={s.userId} value={s.userId}>
                              {s.nombre} ({s.email})
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    ) : (
                      <p className="text-sm text-muted-foreground border rounded-md p-3">
                        No hay supervisores registrados. Crea uno primero para poder asignar auxiliares.
                      </p>
                    )}
                  </div>
                )}
                {/* RFC access for cliente role */}
                {isDespacho && inviteForm.role === 'cliente' && contribuyentes && contribuyentes.length > 0 && (
                  <div className="space-y-2">
                    <Label>RFCs con acceso (opcional)</Label>
                    <div className="border rounded-md p-3 space-y-2 max-h-48 overflow-y-auto">
                      {contribuyentes.map((c) => (
                        <div key={c.id} className="flex items-center gap-2">
                          <input
                            type="checkbox"
                            id={`rfc-${c.id}`}
                            checked={selectedRfcIds.includes(c.id)}
                            onChange={() => toggleRfc(c.id)}
                            className="h-4 w-4"
                          />
                          <label htmlFor={`rfc-${c.id}`} className="text-sm cursor-pointer">
                            <span className="font-mono">{c.rfc}</span>
                            {' — '}
                            <span className="text-muted-foreground">{c.nombre}</span>
                          </label>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
                <div className="flex gap-2">
                  <Button type="submit" disabled={inviteUsuario.isPending}>
                    {inviteUsuario.isPending ? 'Enviando...' : 'Enviar Invitación'}
                  </Button>
                  <Button type="button" variant="outline" onClick={() => { setShowInvite(false); setSelectedRfcIds([]); }}>
                    Cancelar
                  </Button>
                </div>
              </form>
            </CardContent>
          </Card>
        )}

        {/* Users List */}
        <Card>
          <CardContent className="p-0">
            {isLoading ? (
              <div className="text-center py-8 text-muted-foreground">Cargando...</div>
            ) : (
              <div className="divide-y">
                {usuarios?.map(usuario => {
                  const roleInfo = getRoleInfo(usuario.role, isDespacho);
                  const RoleIcon = roleInfo.icon;
                  const isCurrentUser = usuario.id === currentUser?.id;

                  return (
                    <div key={usuario.id} className="p-4 flex items-center justify-between">
                      <div className="flex items-center gap-4">
                        <div className={cn(
                          'w-10 h-10 rounded-full flex items-center justify-center',
                          'bg-primary/10 text-primary font-medium'
                        )}>
                          {usuario.nombre.charAt(0).toUpperCase()}
                        </div>
                        <div>
                          <div className="flex items-center gap-2">
                            <span className="font-medium">{usuario.nombre}</span>
                            {isCurrentUser && (
                              <span className="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded">Tú</span>
                            )}
                            {!usuario.active && (
                              <span className="text-xs bg-destructive/10 text-destructive px-2 py-0.5 rounded">Inactivo</span>
                            )}
                          </div>
                          <div className="text-sm text-muted-foreground">{usuario.email}</div>
                        </div>
                      </div>
                      <div className="flex items-center gap-4">
                        <div className={cn('flex items-center gap-1', roleInfo.color)}>
                          <RoleIcon className="h-4 w-4" />
                          <span className="text-sm">{roleInfo.label}</span>
                        </div>
                        {isAdmin && !isCurrentUser && (
                          <div className="flex gap-1">
                            {isDespacho && usuario.role === 'cliente' && (
                              <Button
                                variant="ghost"
                                size="sm"
                                onClick={() => openEditAccesos(usuario.id, usuario.nombre)}
                                title="Editar RFCs con acceso"
                              >
                                <KeyRound className="h-4 w-4 mr-1" /> Accesos
                              </Button>
                            )}
                            {isDespacho && usuario.role === 'auxiliar' && (
                              <Button
                                variant="ghost"
                                size="sm"
                                onClick={() => openEditSupervisor(usuario.id, usuario.nombre)}
                                title="Asignar supervisor"
                              >
                                <UserCheck className="h-4 w-4 mr-1" /> Supervisor
                              </Button>
                            )}
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => handleToggleActive(usuario.id, usuario.active)}
                            >
                              {usuario.active ? 'Desactivar' : 'Activar'}
                            </Button>
                            <Button
                              variant="ghost"
                              size="icon"
                              onClick={() => handleDelete(usuario.id)}
                            >
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </div>
                        )}
                      </div>
                    </div>
                  );
                })}
              </div>
            )}
          </CardContent>
        </Card>
      </div>

      {/* Edit Accesos Modal */}
      {editingAccesosUser && (
        <Dialog open onOpenChange={(open) => { if (!open) setEditingAccesosUser(null); }}>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Editar accesos — {editingAccesosUser.nombre}</DialogTitle>
            </DialogHeader>
            <div className="space-y-2 max-h-60 overflow-y-auto py-2">
              {contribuyentes && contribuyentes.length > 0 ? (
                contribuyentes.map((c) => (
                  <div key={c.id} className="flex items-center gap-2">
                    <input
                      type="checkbox"
                      id={`acceso-${c.id}`}
                      checked={accesosRfcIds.includes(c.id)}
                      onChange={() => toggleAccesoRfc(c.id)}
                      className="h-4 w-4"
                    />
                    <label htmlFor={`acceso-${c.id}`} className="text-sm cursor-pointer">
                      <span className="font-mono">{c.rfc}</span>
                      {' — '}
                      <span className="text-muted-foreground">{c.nombre}</span>
                    </label>
                  </div>
                ))
              ) : (
                <p className="text-sm text-muted-foreground">No hay contribuyentes registrados.</p>
              )}
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setEditingAccesosUser(null)}>Cancelar</Button>
              <Button onClick={handleSaveAccesos} disabled={savingAccesos}>
                {savingAccesos ? 'Guardando...' : 'Guardar'}
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      )}

      {/* Edit Supervisor Modal (auxiliares) */}
      {editingSupervisorUser && (
        <Dialog open onOpenChange={(open) => { if (!open) setEditingSupervisorUser(null); }}>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Asignar supervisor — {editingSupervisorUser.nombre}</DialogTitle>
            </DialogHeader>
            <div className="space-y-2 py-2">
              {supervisores && supervisores.length > 0 ? (
                <Select value={selectedSupervisorId || 'none'} onValueChange={(v) => setSelectedSupervisorId(v === 'none' ? '' : v)}>
                  <SelectTrigger><SelectValue placeholder="Selecciona un supervisor..." /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="none">Sin supervisor asignado</SelectItem>
                    {supervisores.map(s => (
                      <SelectItem key={s.userId} value={s.userId}>
                        {s.nombre} — {s.email}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              ) : (
                <p className="text-sm text-muted-foreground">No hay supervisores registrados todavía.</p>
              )}
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setEditingSupervisorUser(null)}>Cancelar</Button>
              <Button onClick={handleSaveSupervisor} disabled={savingSupervisor}>
                {savingSupervisor ? 'Guardando...' : 'Guardar'}
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      )}
    </DashboardShell>
  );
}