'use client'

import { useState } from 'react'
import useSWR, { mutate } from 'swr'
import { Plus, MoreHorizontal, ShieldCheck, ShieldOff, Power, Edit } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { DataTable } from '@/components/ui/data-table'
import { StatusBadge } from '@/components/ui/status-badge'
import { formatRelativeTime, getRoleLabel } from '@/lib/utils-ad'
import type { PortalUser } from '@/lib/types'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { PortalUserFormModal } from './_components/portal-user-form-modal'
import { ResetMfaModal } from './_components/reset-mfa-modal'
import { arrayFetcher, apiFetch } from '@/lib/fetcher'

function mapUser(u: any): PortalUser {
  return {
    id: String(u.id),
    tenantId: u.tenant_id ? String(u.tenant_id) : null,
    tenantName: u.tenant_name ?? null,
    name: u.name,
    email: u.email,
    role: u.role,
    status: (u.status ?? 'active') as PortalUser['status'],
    mfaEnabled: !!u.mfa_enabled,
    lastLogin: u.last_login ?? null,
    createdAt: u.created_at,
    permissions: [],
  }
}

export default function PortalUsersPage() {
  const { data: rawUsers = [], isLoading } = useSWR('/api/portal-users', arrayFetcher, { refreshInterval: 15000 })
  const users = rawUsers.map(mapUser)

  const [showForm, setShowForm] = useState(false)
  const [editingUser, setEditingUser] = useState<PortalUser | null>(null)
  const [resetMfaUser, setResetMfaUser] = useState<PortalUser | null>(null)

  async function handleToggle(id: string, currentStatus: string) {
    await apiFetch(`/api/portal-users/${id}`, {
      method: 'PATCH',
      body: JSON.stringify({ status: currentStatus === 'active' ? 'inactive' : 'active' }),
    })
    mutate('/api/portal-users')
  }

  const roleColors: Record<string, string> = {
    admin_global: 'bg-primary/10 text-primary',
    admin_tenant: 'bg-blue-100 text-blue-800',
    operator_tenant: 'bg-purple-100 text-purple-800',
    viewer_tenant: 'bg-gray-100 text-gray-600',
  }

  const columns = [
    {
      key: 'name',
      header: 'Usuário',
      render: (u: PortalUser) => (
        <div className="flex items-center gap-3">
          <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
            <span className="text-xs font-bold text-primary">
              {u.name.slice(0, 2).toUpperCase()}
            </span>
          </div>
          <div>
            <p className="font-medium text-foreground">{u.name}</p>
            <p className="text-xs text-muted-foreground">{u.email}</p>
          </div>
        </div>
      ),
    },
    {
      key: 'role',
      header: 'Perfil',
      render: (u: PortalUser) => (
        <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${roleColors[u.role] ?? 'bg-gray-100 text-gray-600'}`}>
          {getRoleLabel(u.role)}
        </span>
      ),
      className: 'w-36',
    },
    {
      key: 'tenant',
      header: 'Empresa',
      render: (u: PortalUser) => (
        <span className="text-sm text-muted-foreground">
          {u.tenantName ?? <span className="italic">Admin Global</span>}
        </span>
      ),
      className: 'w-48',
    },
    {
      key: 'status',
      header: 'Status',
      render: (u: PortalUser) => <StatusBadge status={u.status} />,
      className: 'w-28',
    },
    {
      key: 'mfa',
      header: 'MFA',
      render: (u: PortalUser) => (
        <div className="flex items-center gap-1.5">
          <ShieldCheck className={`w-4 h-4 ${u.mfaEnabled ? 'text-green-600' : 'text-muted-foreground'}`} />
          <span className="text-xs text-muted-foreground">{u.mfaEnabled ? 'Ativo' : 'Inativo'}</span>
        </div>
      ),
      className: 'w-24',
    },
    {
      key: 'lastLogin',
      header: 'Último acesso',
      render: (u: PortalUser) => (
        <span className="text-sm text-muted-foreground">{formatRelativeTime(u.lastLogin)}</span>
      ),
      className: 'w-32',
    },
    {
      key: 'actions',
      header: '',
      render: (u: PortalUser) => (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" size="sm" className="w-8 h-8 p-0">
              <MoreHorizontal className="w-4 h-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuItem onClick={() => { setEditingUser(u); setShowForm(true) }}>
              <Edit className="w-4 h-4 mr-2" />
              Editar
            </DropdownMenuItem>
            {u.mfaEnabled && (
              <DropdownMenuItem
                onClick={() => setResetMfaUser(u)}
                className="text-amber-600 focus:text-amber-600"
              >
                <ShieldOff className="w-4 h-4 mr-2" />
                Remover MFA
              </DropdownMenuItem>
            )}
            <DropdownMenuSeparator />
            <DropdownMenuItem
              onClick={() => handleToggle(u.id, u.status)}
              className={u.status === 'active' ? 'text-destructive' : 'text-green-600'}
            >
              <Power className="w-4 h-4 mr-2" />
              {u.status === 'active' ? 'Bloquear' : 'Desbloquear'}
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      ),
      className: 'w-12',
    },
  ]

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-xl font-bold text-foreground">Usuários do Portal</h2>
          <p className="text-sm text-muted-foreground">{users.length} usuário(s) cadastrado(s)</p>
        </div>
        <Button onClick={() => { setEditingUser(null); setShowForm(true) }}>
          <Plus className="w-4 h-4 mr-2" />
          Novo Usuário
        </Button>
      </div>

      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
        {[
          { label: 'Total', value: users.length },
          { label: 'Ativos', value: users.filter((u) => u.status === 'active').length },
          { label: 'Bloqueados', value: users.filter((u) => u.status !== 'active').length },
          { label: 'MFA Ativo', value: users.filter((u) => u.mfaEnabled).length },
        ].map((s) => (
          <div key={s.label} className="bg-card border border-border rounded-xl p-4">
            <p className="text-2xl font-bold text-foreground">{s.value}</p>
            <p className="text-sm text-muted-foreground">{s.label}</p>
          </div>
        ))}
      </div>

      <div className="bg-card border border-border rounded-xl p-5">
        <DataTable
          data={users}
          columns={columns}
          searchPlaceholder="Pesquisar por nome ou e-mail..."
          searchKeys={['name', 'email', 'tenantName']}
          getRowKey={(u: any) => u.id}
          emptyMessage={isLoading ? 'Carregando...' : 'Nenhum usuário encontrado.'}
        />
      </div>

      <PortalUserFormModal
        open={showForm}
        onClose={() => { setShowForm(false); mutate('/api/portal-users') }}
        user={editingUser}
      />

      <ResetMfaModal
        open={!!resetMfaUser}
        user={resetMfaUser}
        onClose={() => setResetMfaUser(null)}
        onSuccess={() => { mutate('/api/portal-users'); setResetMfaUser(null) }}
      />
    </div>
  )
}