'use client'

import { useState } from 'react'
import {
  RefreshCw,
  CheckCircle2,
  AlertTriangle,
  Clock,
  Play,
  Users,
  UsersRound,
  Loader2,
} from 'lucide-react'
import { Button } from '@/components/ui/button'
import useSWR, { mutate } from 'swr'
import { apiFetch } from '@/lib/fetcher'
import { formatDate, formatRelativeTime } from '@/lib/utils-ad'
import { cn } from '@/lib/utils'
import { useAuth } from '@/lib/auth-context'

import { arrayFetcher } from '@/lib/fetcher'

type SyncStatusValue = SyncStatus['syncStatus']

function SyncStatusBadge({ status }: { status: SyncStatusValue }) {
  const map = {
    idle: { label: 'Normal', icon: CheckCircle2, className: 'bg-green-100 text-green-800' },
    running: { label: 'Executando', icon: Loader2, className: 'bg-blue-100 text-blue-800' },
    error: { label: 'Erro', icon: AlertTriangle, className: 'bg-red-100 text-red-800' },
    never: { label: 'Nunca', icon: Clock, className: 'bg-gray-100 text-gray-600' },
  }
  const { label, icon: Icon, className } = map[status]
  return (
    <span
      className={cn(
        'inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium',
        className,
      )}
    >
      <Icon className={cn('w-3.5 h-3.5', status === 'running' && 'animate-spin')} />
      {label}
    </span>
  )
}

export default function SyncPage() {
  const { user } = useAuth()
  const isAdmin = user?.role === 'admin_global'

  const { data: rawHistory = [], isLoading } = useSWR('/api/sync', arrayFetcher, { refreshInterval: 15000 })

  const [syncing, setSyncing] = useState<Record<string, boolean>>({})

  async function startSync(tenantId: string) {
    setSyncing((prev) => ({ ...prev, [tenantId]: true }))
    await apiFetch('/api/sync', {
      method: 'POST',
      body: JSON.stringify({ tenant_id: tenantId }),
    })
    await mutate('/api/sync')
    setSyncing((prev) => ({ ...prev, [tenantId]: false }))
  }

  // Agrupa por tenant para mostrar última sincronização de cada um
  const byTenant = rawHistory.reduce((acc: Record<string, any>, s: any) => {
    const key = String(s.tenant_id)
    if (!acc[key]) acc[key] = s
    return acc
  }, {})
  const allSync = Object.values(byTenant)

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-xl font-bold text-foreground">Sincronização</h2>
          <p className="text-sm text-muted-foreground">
            Gerencie a sincronização do cache local com o Active Directory.
          </p>
        </div>
        {isAdmin && (
          <Button
            variant="outline"
            onClick={() => allSync.forEach((s: any) => startSync(String(s.tenant_id)))}
          >
            <RefreshCw className="w-4 h-4 mr-2" />
            Sincronizar todos
          </Button>
        )}
      </div>

      {/* Cards resumo (admin global) */}
      {isAdmin && (
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
          {[
            {
              label: 'Concluídas',
              value: allSync.filter((s: any) => s.status === 'completed').length,
              color: 'text-green-600',
            },
            {
              label: 'Com erro',
              value: allSync.filter((s: any) => s.status === 'error').length,
              color: 'text-red-600',
            },
            {
              label: 'Em execução',
              value: allSync.filter((s: any) => s.status === 'running').length,
              color: 'text-blue-600',
            },
            {
              label: 'Total',
              value: allSync.length,
              color: 'text-foreground',
            },
          ].map((s) => (
            <div key={s.label} className="bg-card border border-border rounded-xl p-4">
              <p className={`text-2xl font-bold ${s.color}`}>{s.value}</p>
              <p className="text-sm text-muted-foreground">{s.label}</p>
            </div>
          ))}
        </div>
      )}

      {/* Lista de tenants */}
      <div className="space-y-4">
        {isLoading && (
          <div className="text-center py-12 text-muted-foreground text-sm">Carregando...</div>
        )}
        {!isLoading && allSync.length === 0 && (
          <div className="text-center py-12 text-muted-foreground text-sm">
            Nenhum histórico de sincronização encontrado.
          </div>
        )}
        {allSync.map((sync: any) => {
          const tenantId = String(sync.tenant_id)
          const isSyncing = !!syncing[tenantId]
          const syncStatus: string = isSyncing ? 'running' : (sync.status ?? 'idle')

          return (
            <div
              key={tenantId}
              className="bg-card border border-border rounded-xl p-6 space-y-5"
            >
              <div className="flex items-start justify-between gap-4">
                <div>
                  <h3 className="font-semibold text-foreground text-base">
                    {sync.tenant_name ?? `Tenant ${tenantId}`}
                  </h3>
                  <p className="text-sm text-muted-foreground">
                    {formatRelativeTime(sync.completed_at ?? sync.started_at)}
                  </p>
                </div>
                <div className="flex items-center gap-3">
                  <SyncStatusBadge status={syncStatus} />
                  <Button
                    size="sm"
                    onClick={() => startSync(tenantId)}
                    disabled={isSyncing}
                  >
                    {isSyncing ? (
                      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                    ) : (
                      <Play className="w-4 h-4 mr-2" />
                    )}
                    {isSyncing ? 'Sincronizando...' : 'Sincronizar'}
                  </Button>
                </div>
              </div>

              {isSyncing && (
                <div className="flex items-center gap-3 p-3 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800">
                  <Loader2 className="w-4 h-4 text-blue-600 animate-spin shrink-0" />
                  <p className="text-sm text-blue-800 dark:text-blue-400">
                    Sincronizacao em andamento...
                  </p>
                </div>
              )}

              {!isSyncing && sync.error_message && (
                <div className="flex items-start gap-3 p-3 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800">
                  <AlertTriangle className="w-4 h-4 text-red-600 shrink-0 mt-0.5" />
                  <p className="text-sm text-red-800 dark:text-red-400">{sync.error_message}</p>
                </div>
              )}

              <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
                <div className="bg-muted/30 rounded-lg p-3">
                  <p className="text-xs text-muted-foreground">Iniciada em</p>
                  <p className="text-sm font-medium text-foreground mt-0.5">
                    {sync.started_at ? formatDate(sync.started_at) : '—'}
                  </p>
                </div>
                <div className="bg-muted/30 rounded-lg p-3">
                  <p className="text-xs text-muted-foreground">Concluida em</p>
                  <p className="text-sm font-medium text-foreground mt-0.5">
                    {sync.completed_at ? formatDate(sync.completed_at) : '—'}
                  </p>
                </div>
                <div className="bg-muted/30 rounded-lg p-3 flex items-start gap-2">
                  <Users className="w-4 h-4 text-muted-foreground shrink-0 mt-0.5" />
                  <div>
                    <p className="text-xs text-muted-foreground">Usuarios sincronizados</p>
                    <p className="text-lg font-bold text-foreground">{sync.users_synced ?? 0}</p>
                  </div>
                </div>
                <div className="bg-muted/30 rounded-lg p-3 flex items-start gap-2">
                  <UsersRound className="w-4 h-4 text-muted-foreground shrink-0 mt-0.5" />
                  <div>
                    <p className="text-xs text-muted-foreground">Grupos sincronizados</p>
                    <p className="text-lg font-bold text-foreground">{sync.groups_synced ?? 0}</p>
                  </div>
                </div>
              </div>
            </div>
          )
        })}
      </div>

      {/* Informações sobre tipos de sinc */}
      <div className="bg-card border border-border rounded-xl p-5 space-y-4">
        <h3 className="font-semibold text-foreground">Sobre os tipos de sincronização</h3>
        <div className="grid lg:grid-cols-2 gap-4 text-sm">
          <div className="space-y-2">
            <p className="font-medium text-foreground">Sincronização Parcial</p>
            <p className="text-muted-foreground leading-relaxed">
              Atualiza apenas os objetos modificados desde a última sincronização. Mais rápida
              e com menor impacto no servidor do AD. Recomendada para atualizações frequentes.
            </p>
          </div>
          <div className="space-y-2">
            <p className="font-medium text-foreground">Sincronização Completa</p>
            <p className="text-muted-foreground leading-relaxed">
              Recarrega todos os usuários e grupos do Active Directory. Útil após grandes
              mudanças na estrutura do AD ou quando há inconsistências no cache.
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}