'use client'
import { useState } from 'react'
import { Users, Plus, ShieldCheck, Key, Power, Trash2, Eye, EyeOff, Lock, UserCog } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Skeleton } from '@/components/ui/Skeleton'
import { generateInitials } from '@/lib/utils'
import { useAuthStore, type UserRole, type ManagedUser } from '@/store/authStore'
import { toast } from 'sonner'

const ROLE_LABELS: Record<UserRole, string> = {
  superusuario: 'Super Usuario',
  titular:      'Titular',
  gestor:       'Gestor',
  admin:        'Administración',
  lectura:      'Solo lectura',
}

const ROLE_COLORS: Record<UserRole, string> = {
  superusuario: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400',
  titular:      'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
  gestor:       'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400',
  admin:        'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
  lectura:      'bg-muted text-muted-foreground',
}

const AVATAR_COLORS = ['bg-blue-600','bg-purple-600','bg-green-600','bg-orange-500','bg-pink-600']

const PERMISSIONS: { key: string; label: string; roles: UserRole[] }[] = [
  { key: 'ver_operaciones',    label: 'Ver operaciones',         roles: ['superusuario','titular','gestor','admin','lectura'] },
  { key: 'crear_operaciones',  label: 'Crear operaciones',       roles: ['superusuario','titular','gestor','admin'] },
  { key: 'editar_operaciones', label: 'Editar operaciones',      roles: ['superusuario','titular','gestor','admin'] },
  { key: 'cambiar_estado',     label: 'Cambiar estado',          roles: ['superusuario','titular','gestor','admin'] },
  { key: 'exportar_fichas',    label: 'Exportar fichas PDF',     roles: ['superusuario','titular','gestor','admin'] },
  { key: 'ver_documentos',     label: 'Ver documentos',          roles: ['superusuario','titular','gestor','admin','lectura'] },
  { key: 'subir_documentos',   label: 'Subir documentos',        roles: ['superusuario','titular','gestor','admin'] },
  { key: 'gestionar_usuarios', label: 'Gestionar usuarios',      roles: ['superusuario'] },
  { key: 'configuracion',      label: 'Acceder a configuración', roles: ['superusuario','titular','admin'] },
]

function PasswordModal({ user, onClose, isAdmin }: { user: ManagedUser; onClose: () => void; isAdmin: boolean }) {
  const { changeOwnPassword, adminChangePassword } = useAuthStore()
  const [current, setCurrent] = useState('')
  const [next, setNext] = useState('')
  const [confirm, setConfirm] = useState('')
  const [showCurrent, setShowCurrent] = useState(false)
  const [showNext, setShowNext] = useState(false)
  const [loading, setLoading] = useState(false)

  const handleSave = async () => {
    if (next !== confirm) { toast.error('Las contraseñas no coinciden'); return }
    if (next.length < 6) { toast.error('Mínimo 6 caracteres'); return }
    setLoading(true)
    if (isAdmin) {
      await adminChangePassword(user.id, next)
      toast.success(`Contraseña de ${user.name} actualizada`)
    } else {
      const result = await changeOwnPassword(current, next)
      if (result?.error) { toast.error(result.error); setLoading(false); return }
      toast.success('Contraseña actualizada')
    }
    setLoading(false)
    onClose()
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
      <div className="bg-card border border-border rounded-2xl p-6 w-full max-w-sm shadow-2xl space-y-4">
        <div className="flex items-center gap-2">
          <Key size={16} className="text-primary" />
          <h3 className="text-sm font-semibold">
            {isAdmin ? `Resetear contraseña — ${user.name}` : 'Cambiar mi contraseña'}
          </h3>
        </div>

        {!isAdmin && (
          <div className="space-y-1.5">
            <Label className="text-xs">Contraseña actual</Label>
            <div className="relative">
              <Input
                type={showCurrent ? 'text' : 'password'}
                value={current}
                onChange={e => setCurrent(e.target.value)}
                placeholder="••••••••"
                className="pr-9"
              />
              <button type="button" onClick={() => setShowCurrent(!showCurrent)}
                className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground">
                {showCurrent ? <EyeOff size={14}/> : <Eye size={14}/>}
              </button>
            </div>
          </div>
        )}

        <div className="space-y-1.5">
          <Label className="text-xs">Nueva contraseña</Label>
          <div className="relative">
            <Input
              type={showNext ? 'text' : 'password'}
              value={next}
              onChange={e => setNext(e.target.value)}
              placeholder="Mínimo 6 caracteres"
              className="pr-9"
            />
            <button type="button" onClick={() => setShowNext(!showNext)}
              className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground">
              {showNext ? <EyeOff size={14}/> : <Eye size={14}/>}
            </button>
          </div>
        </div>

        <div className="space-y-1.5">
          <Label className="text-xs">Confirmar contraseña</Label>
          <Input
            type="password"
            value={confirm}
            onChange={e => setConfirm(e.target.value)}
            placeholder="Repetí la nueva contraseña"
          />
        </div>

        <div className="flex gap-2 justify-end pt-1">
          <Button variant="ghost" size="sm" onClick={onClose}>Cancelar</Button>
          <Button size="sm" onClick={handleSave} disabled={loading}>
            {loading ? 'Guardando...' : 'Guardar'}
          </Button>
        </div>
      </div>
    </div>
  )
}

function NewUserModal({ onClose }: { onClose: () => void }) {
  const { addUser } = useAuthStore()
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [role, setRole] = useState<UserRole>('gestor')

  const handleAdd = () => {
    if (!name.trim() || !email.trim() || !password.trim()) {
      toast.error('Completá todos los campos')
      return
    }
    if (password.length < 6) { toast.error('Mínimo 6 caracteres para la contraseña'); return }
    addUser({ name, email, password, role, active: true })
    toast.success(`${name} agregado al sistema`)
    onClose()
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
      <div className="bg-card border border-border rounded-2xl p-6 w-full max-w-sm shadow-2xl space-y-4">
        <div className="flex items-center gap-2">
          <Plus size={16} className="text-primary" />
          <h3 className="text-sm font-semibold">Nuevo usuario</h3>
        </div>
        <div className="space-y-3">
          <div className="space-y-1.5">
            <Label className="text-xs">Nombre completo</Label>
            <Input value={name} onChange={e => setName(e.target.value)} placeholder="Nombre y apellido" />
          </div>
          <div className="space-y-1.5">
            <Label className="text-xs">Email</Label>
            <Input value={email} onChange={e => setEmail(e.target.value)} placeholder="email@horacioeacosta.com" type="email" />
          </div>
          <div className="space-y-1.5">
            <Label className="text-xs">Contraseña inicial</Label>
            <Input value={password} onChange={e => setPassword(e.target.value)} placeholder="Mínimo 6 caracteres" type="password" />
          </div>
          <div className="space-y-1.5">
            <Label className="text-xs">Rol</Label>
            <Select value={role} onValueChange={v => setRole(v as UserRole)}>
              <SelectTrigger><SelectValue /></SelectTrigger>
              <SelectContent>
                {(Object.keys(ROLE_LABELS) as UserRole[]).filter(r => r !== 'superusuario').map(r => (
                  <SelectItem key={r} value={r}>{ROLE_LABELS[r]}</SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </div>
        <div className="flex gap-2 justify-end pt-1">
          <Button variant="ghost" size="sm" onClick={onClose}>Cancelar</Button>
          <Button size="sm" onClick={handleAdd}>Agregar</Button>
        </div>
      </div>
    </div>
  )
}

export function UsuariosConfig({ loading }: { loading: boolean }) {
  const { user: currentUser, users, updateUserRole, toggleUserActive, removeUser } = useAuthStore()
  // Derive role from users array (avoids stale persisted role in localStorage)
  const me = users.find(u => u.id === currentUser?.id)
  const isSuperUser = me?.role === 'superusuario'

  const [passwordModal, setPasswordModal] = useState<ManagedUser | null>(null)
  const [showNewUser, setShowNewUser] = useState(false)
  const [activeTab, setActiveTab] = useState<'usuarios' | 'permisos' | 'mi_perfil'>('usuarios')

  if (loading) return <UsuariosSkeleton />

  return (
    <>
      {passwordModal && (
        <PasswordModal
          user={passwordModal}
          isAdmin={isSuperUser && passwordModal.id !== currentUser?.id}
          onClose={() => setPasswordModal(null)}
        />
      )}
      {showNewUser && <NewUserModal onClose={() => setShowNewUser(false)} />}

      <div className="bg-card border border-border rounded-xl overflow-hidden">
        {/* Sub-tabs */}
        <div className="flex border-b border-border bg-muted/20">
          {([
            { id: 'usuarios', label: 'Usuarios', show: true },
            { id: 'permisos', label: 'Permisos por rol', show: isSuperUser },
            { id: 'mi_perfil', label: 'Mi perfil', show: true },
          ] as const).filter(t => t.show).map(t => (
            <button
              key={t.id}
              onClick={() => setActiveTab(t.id)}
              className={`px-5 py-3 text-sm font-medium border-b-2 transition-colors ${
                activeTab === t.id
                  ? 'border-primary text-foreground'
                  : 'border-transparent text-muted-foreground hover:text-foreground'
              }`}
            >
              {t.label}
            </button>
          ))}
        </div>

        <div className="p-5">
          {/* ── USUARIOS ── */}
          {activeTab === 'usuarios' && (
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <Users size={15} className="text-primary" />
                  <h3 className="text-sm font-semibold">Equipo de trabajo</h3>
                </div>
                {isSuperUser && (
                  <Button size="sm" variant="outline" className="gap-1.5" onClick={() => setShowNewUser(true)}>
                    <Plus size={13} /> Agregar usuario
                  </Button>
                )}
              </div>

              <div className="space-y-2">
                {users.map((u, i) => (
                  <div
                    key={u.id}
                    className={`flex items-center gap-3 p-3 rounded-xl border transition-colors ${
                      !u.active ? 'opacity-50 bg-muted/20 border-border' : 'border-border hover:bg-accent/20'
                    }`}
                  >
                    <Avatar className={`h-9 w-9 flex-shrink-0 ${AVATAR_COLORS[i % AVATAR_COLORS.length]}`}>
                      <AvatarFallback className="text-white text-xs bg-transparent">{generateInitials(u.name)}</AvatarFallback>
                    </Avatar>

                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2">
                        <p className="text-sm font-medium">{u.name}</p>
                        {u.role === 'superusuario' && <ShieldCheck size={13} className="text-yellow-500" />}
                        {!u.active && <span className="text-xs text-muted-foreground">(inactivo)</span>}
                      </div>
                      <p className="text-xs text-muted-foreground">{u.email}</p>
                    </div>

                    <span className={`px-2.5 py-1 rounded-full text-xs font-medium flex-shrink-0 ${ROLE_COLORS[u.role]}`}>
                      {ROLE_LABELS[u.role]}
                    </span>

                    {isSuperUser ? (
                      <div className="flex items-center gap-1 flex-shrink-0">
                        {/* Role selector */}
                        {u.role !== 'superusuario' && (
                          <Select value={u.role} onValueChange={v => {
                            updateUserRole(u.id, v as UserRole)
                            toast.success(`Rol de ${u.name} actualizado`)
                          }}>
                            <SelectTrigger className="h-7 w-32 text-xs">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              {(Object.keys(ROLE_LABELS) as UserRole[]).filter(r => r !== 'superusuario').map(r => (
                                <SelectItem key={r} value={r} className="text-xs">{ROLE_LABELS[r]}</SelectItem>
                              ))}
                            </SelectContent>
                          </Select>
                        )}

                        {/* Reset password */}
                        <Button size="icon" variant="ghost" className="h-7 w-7" title="Cambiar contraseña"
                          onClick={() => setPasswordModal(u)}>
                          <Key size={13} />
                        </Button>

                        {/* Enable / disable */}
                        {u.role !== 'superusuario' && (
                          <Button size="icon" variant="ghost"
                            className={`h-7 w-7 ${u.active ? 'text-green-500 hover:text-red-500' : 'text-muted-foreground hover:text-green-500'}`}
                            title={u.active ? 'Desactivar usuario' : 'Activar usuario'}
                            onClick={() => {
                              toggleUserActive(u.id)
                              toast.success(`${u.name} ${u.active ? 'desactivado' : 'activado'}`)
                            }}>
                            <Power size={13} />
                          </Button>
                        )}

                        {/* Delete */}
                        {u.role !== 'superusuario' && (
                          <Button size="icon" variant="ghost" className="h-7 w-7 text-muted-foreground hover:text-destructive"
                            title="Eliminar usuario"
                            onClick={() => {
                              removeUser(u.id)
                              toast.success(`${u.name} eliminado`)
                            }}>
                            <Trash2 size={13} />
                          </Button>
                        )}
                      </div>
                    ) : (
                      /* Non-admin: solo puede cambiar su propia contraseña */
                      u.id === currentUser?.id && (
                        <Button size="sm" variant="ghost" className="gap-1.5 text-xs flex-shrink-0"
                          onClick={() => setPasswordModal(u)}>
                          <Key size={12} /> Cambiar contraseña
                        </Button>
                      )
                    )}
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* ── PERMISOS ── */}
          {activeTab === 'permisos' && isSuperUser && (
            <div className="space-y-4">
              <div className="flex items-center gap-2">
                <UserCog size={15} className="text-primary" />
                <h3 className="text-sm font-semibold">Permisos por rol</h3>
              </div>
              <p className="text-xs text-muted-foreground">
                Referencia de qué puede hacer cada rol en el sistema.
              </p>
              <div className="overflow-x-auto rounded-xl border border-border">
                <table className="w-full text-xs">
                  <thead>
                    <tr className="bg-muted/40 border-b border-border">
                      <th className="text-left px-4 py-2.5 font-medium text-muted-foreground">Permiso</th>
                      {(Object.keys(ROLE_LABELS) as UserRole[]).map(r => (
                        <th key={r} className="px-3 py-2.5 text-center font-medium text-muted-foreground">{ROLE_LABELS[r]}</th>
                      ))}
                    </tr>
                  </thead>
                  <tbody>
                    {PERMISSIONS.map((perm, i) => (
                      <tr key={perm.key} className={`border-b border-border last:border-0 ${i % 2 === 0 ? '' : 'bg-muted/10'}`}>
                        <td className="px-4 py-2.5 font-medium text-foreground">{perm.label}</td>
                        {(Object.keys(ROLE_LABELS) as UserRole[]).map(role => (
                          <td key={role} className="px-3 py-2.5 text-center">
                            {perm.roles.includes(role)
                              ? <span className="text-green-500 text-base">✓</span>
                              : <span className="text-muted-foreground/30 text-base">—</span>
                            }
                          </td>
                        ))}
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          )}

          {/* ── MI PERFIL ── */}
          {activeTab === 'mi_perfil' && me && (
            <div className="space-y-5 max-w-sm">
              <div className="flex items-center gap-2">
                <Lock size={15} className="text-primary" />
                <h3 className="text-sm font-semibold">Mi perfil</h3>
              </div>

              <div className="flex items-center gap-4 p-4 rounded-xl bg-muted/20 border border-border">
                <Avatar className={`h-12 w-12 ${AVATAR_COLORS[users.indexOf(me) % AVATAR_COLORS.length]}`}>
                  <AvatarFallback className="text-white text-sm bg-transparent">{generateInitials(me.name)}</AvatarFallback>
                </Avatar>
                <div>
                  <p className="font-semibold text-sm">{me.name}</p>
                  <p className="text-xs text-muted-foreground">{me.email}</p>
                  <span className={`mt-1 inline-block px-2 py-0.5 rounded-full text-xs font-medium ${ROLE_COLORS[me.role]}`}>
                    {ROLE_LABELS[me.role]}
                  </span>
                </div>
              </div>

              <Button
                variant="outline"
                className="gap-2 w-full"
                onClick={() => setPasswordModal(me)}
              >
                <Key size={14} /> Cambiar contraseña
              </Button>
            </div>
          )}
        </div>
      </div>
    </>
  )
}

function UsuariosSkeleton() {
  return (
    <div className="bg-card border border-border rounded-xl p-5 space-y-4">
      <div className="flex gap-4 border-b border-border pb-3">
        <Skeleton className="h-5 w-20" />
        <Skeleton className="h-5 w-28" />
        <Skeleton className="h-5 w-20" />
      </div>
      {Array.from({ length: 4 }).map((_, i) => (
        <div key={i} className="flex items-center gap-3 p-3 rounded-xl border border-border">
          <Skeleton className="h-9 w-9 rounded-full" />
          <div className="flex-1 space-y-1.5">
            <Skeleton className="h-4 w-32" />
            <Skeleton className="h-3 w-48" />
          </div>
          <Skeleton className="h-6 w-24 rounded-full" />
        </div>
      ))}
    </div>
  )
}