'use client'

import { Download, FileCode, Server, Info, CheckCircle2 } from 'lucide-react'
import { Button } from '@/components/ui/button'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { useState } from 'react'
import { AgentStatusBadge } from '@/components/ui/status-badge'
import Link from 'next/link'
import useSWR from 'swr'
import { arrayFetcher } from '@/lib/fetcher'
import { useAuth } from '@/lib/auth-context'

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

  const { data: tenants = [] } = useSWR(isAdmin ? '/api/tenants' : null, arrayFetcher)

  const defaultId = isAdmin ? (tenants[0]?.id ?? '') : (user?.tenantId ?? '')
  const [selectedTenantId, setSelectedTenantId] = useState<string>('')

  const activeId = selectedTenantId || defaultId
  const tenant = tenants.find((t: any) => t.id === String(activeId))
    ?? (isAdmin ? null : { id: user?.tenantId, name: user?.tenantName ?? 'Minha Empresa', domain: '' })

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-xl font-bold text-foreground">Download do Agente</h2>
          <p className="text-sm text-muted-foreground">
            Baixe o conector e instale no servidor Windows do cliente.
          </p>
        </div>
        {isAdmin && tenants.length > 0 && (
          <Select value={activeId} onValueChange={setSelectedTenantId}>
            <SelectTrigger className="w-64">
              <SelectValue placeholder="Selecione uma empresa..." />
            </SelectTrigger>
            <SelectContent>
              {tenants.map((t: any) => (
                <SelectItem key={t.id} value={t.id}>{t.name}</SelectItem>
              ))}
            </SelectContent>
          </Select>
        )}
      </div>

      {tenant && (
        <div className="bg-card border border-border rounded-xl p-6 space-y-5">
          <div className="flex items-start gap-4">
            <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
              <Server className="w-6 h-6 text-primary" />
            </div>
            <div>
              <h3 className="font-semibold text-foreground text-lg">{tenant.name}</h3>
              <p className="text-sm text-muted-foreground">{tenant.domain}</p>
              {tenant.agentStatus && (
                <div className="mt-2">
                  <AgentStatusBadge status={tenant.agent_status ?? 'offline'} />
                </div>
              )}
            </div>
          </div>

          <div className="grid lg:grid-cols-2 gap-4 pt-4">
            <Button className="h-auto p-4 flex-col items-start gap-2">
              <div className="flex items-center gap-2 w-full">
                <Download className="w-5 h-5" />
                <span className="font-semibold">Baixar Agente (Windows)</span>
              </div>
              <span className="text-xs opacity-90">cti-agent-v1.0.0-win64.zip (12 MB)</span>
            </Button>
            <Button variant="outline" className="h-auto p-4 flex-col items-start gap-2">
              <div className="flex items-center gap-2 w-full">
                <FileCode className="w-5 h-5" />
                <span className="font-semibold">Baixar Configuração</span>
              </div>
              <span className="text-xs text-muted-foreground">config-{tenant.id}.json (1 KB)</span>
            </Button>
          </div>
        </div>
      )}

      <div className="bg-card border border-border rounded-xl p-6 space-y-5">
        <h3 className="font-semibold text-foreground flex items-center gap-2">
          <Info className="w-4 h-4 text-primary" />
          Instruções de Instalação
        </h3>

        <ol className="space-y-4 text-sm">
          {[
            { title: 'Baixar os arquivos', desc: 'Faça download do agente e do arquivo de configuração acima.' },
            { title: 'Extrair no servidor', desc: 'Extraia o arquivo ZIP em C:\\Program Files\\CTIAgent\\' },
            { title: 'Copiar configuração', desc: 'Coloque o arquivo config.json na pasta do agente.' },
            {
              title: 'Gerar token',
              desc: (
                <>Acesse a página <Link href="/agent" className="text-primary hover:underline">Conector / Agente</Link> e gere um novo token.</>
              ),
            },
            { title: 'Configurar variáveis', desc: 'Edite o arquivo config.json e insira o token no campo "token".' },
            { title: 'Instalar serviço', desc: 'Execute o instalador como administrador: install-service.bat' },
            { title: 'Iniciar serviço', desc: 'Inicie o serviço "CTI Agent" no Gerenciador de Serviços do Windows.' },
            { title: 'Verificar status', desc: 'Aguarde alguns segundos e verifique se o status mudou para "Online" no portal.' },
          ].map((step, i) => (
            <li key={i} className="flex items-start gap-4">
              <div className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-primary-foreground text-xs font-bold shrink-0 mt-0.5">
                {i + 1}
              </div>
              <div>
                <p className="font-medium text-foreground">{step.title}</p>
                <p className="text-muted-foreground mt-0.5">{step.desc}</p>
              </div>
            </li>
          ))}
        </ol>
      </div>

      <div className="bg-card border border-border rounded-xl p-5">
        <h3 className="font-semibold text-foreground mb-4 flex items-center gap-2">
          <CheckCircle2 className="w-4 h-4 text-green-600" />
          Requisitos do Servidor
        </h3>
        <ul className="grid lg:grid-cols-2 gap-3 text-sm">
          {[
            'Windows Server 2012 ou superior',
            '.NET Framework 4.8 ou .NET 6+',
            'Acesso de leitura/escrita no Active Directory',
            'Conectividade HTTPS de saída (porta 443)',
            'Usuário de serviço com permissões adequadas',
            'Certificado SSL válido (LDAPS, se configurado)',
          ].map((req) => (
            <li key={req} className="flex items-center gap-2">
              <span className="w-1.5 h-1.5 rounded-full bg-primary shrink-0" />
              {req}
            </li>
          ))}
        </ul>
      </div>
    </div>
  )
}