'use client'

import { useState, useEffect } from 'react'
import { Save, Settings, Network, ShieldCheck, AlertTriangle, CheckCircle2, Zap, SlidersHorizontal, Info, Eye, EyeOff } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Switch } from '@/components/ui/switch'
import useSWR from 'swr'

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { useAuth } from '@/lib/auth-context'
import type { Tenant, TenantPolicy } from '@/lib/types'

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

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

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

  const [selectedTenantId, setSelectedTenantId] = useState(user?.tenantId ?? '')
  const effectiveTenantId = selectedTenantId || (tenants[0] ? String(tenants[0].id) : '')

  const { data: tenantConfig } = useSWR(
    effectiveTenantId ? `/api/tenant-config?tenant_id=${effectiveTenantId}` : null,
    (url: string) => apiFetch(url).then((r) => (r.ok ? r.json() : null)),
  )
  const tenant = tenantConfig?.tenant
  const policy = tenantConfig?.policies ?? tenantConfig?.policy ?? null

  const [form, setForm] = useState({
    preferredDC: '',
    ldapPort: '389',
    useSSL: false,
    baseDn: '',
    defaultUserOU: '',
    defaultGroupOU: '',
    upnSuffix: '',
    adUser: '',
    adPassword: '',
  })

  const [policyForm, setPolicyForm] = useState<Omit<TenantPolicy, 'tenantId'>>({
    mustChangePasswordOnFirstLogin: true,
    cannotChangePassword: false,
    passwordNeverExpires: false,
    accountStartsEnabled: true,
    operatorCanChooseMustChange: true,
    operatorCanChooseCannotChange: false,
    operatorCanChooseNeverExpires: true,
    operatorCanChooseEnabled: true,
  })

  const [saved, setSaved] = useState(false)
  const [testStatus, setTestStatus] = useState<'idle' | 'testing' | 'success' | 'error'>('idle')
  const [showPassword, setShowPassword] = useState(false)
  const [advancedMode, setAdvancedMode] = useState(false)
  // Modo básico: apenas domínio e DC
  const [basicDomain, setBasicDomain] = useState('')

  // Deriva Base DN e sufixo UPN a partir do domínio simples (ex: empresa.local)
  function deriveFromDomain(domain: string) {
    if (!domain.trim()) return
    const parts = domain.trim().toLowerCase().split('.')
    const baseDn = parts.map((p) => `DC=${p}`).join(',')
    setForm((prev) => ({
      ...prev,
      baseDn,
      upnSuffix: domain.trim().toLowerCase(),
    }))
  }

  // Quando entrar no modo básico, preenche o campo de domínio a partir do upnSuffix existente
  function switchToBasic() {
    setBasicDomain(form.upnSuffix || '')
    setAdvancedMode(false)
  }

  useEffect(() => {
    if (tenant) {
      setForm({
        preferredDC: tenant.preferred_dc ?? '',
        ldapPort: String(tenant.ldap_port ?? '389'),
        useSSL: !!tenant.use_ssl,
        baseDn: tenant.base_dn ?? '',
        defaultUserOU: tenant.default_user_ou ?? '',
        defaultGroupOU: tenant.default_group_ou ?? '',
        upnSuffix: tenant.upn_suffix ?? '',
        adUser: tenant.ad_service_user ?? '',
        adPassword: '', // senha nunca vem da API por segurança
      })
    }
    if (policy) {
      setPolicyForm({
        mustChangePasswordOnFirstLogin: !!policy.must_change_password_on_first_login,
        cannotChangePassword: !!policy.cannot_change_password,
        passwordNeverExpires: !!policy.password_never_expires,
        accountStartsEnabled: !!policy.account_starts_enabled,
        operatorCanChooseMustChange: !!policy.operator_can_choose_must_change,
        operatorCanChooseCannotChange: !!policy.operator_can_choose_cannot_change,
        operatorCanChooseNeverExpires: !!policy.operator_can_choose_never_expires,
        operatorCanChooseEnabled: !!policy.operator_can_choose_enabled,
      })
    }
  }, [tenant, policy])

  async function handleSave() {
    setSaved(false)
  await apiFetch('/api/tenant-config', {
    method: 'PUT',
      body: JSON.stringify({
        tenant_id: effectiveTenantId,
        preferred_dc: form.preferredDC,
        ldap_port: Number(form.ldapPort),
        use_ssl: form.useSSL,
        base_dn: form.baseDn,
        default_user_ou: form.defaultUserOU,
        default_group_ou: form.defaultGroupOU,
        upn_suffix: form.upnSuffix,
        ad_service_user: form.adUser,
        ad_service_password: form.adPassword || undefined,
        policy: policyForm,
      }),
    })
    setSaved(true)
    setTimeout(() => setSaved(false), 2000)
  }

  function handleTestConnection() {
    setTestStatus('testing')
    setTimeout(() => {
      setTestStatus('error')
      setTimeout(() => setTestStatus('idle'), 4000)
    }, 1500)
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between flex-wrap gap-4">
        <div>
          <h2 className="text-xl font-bold text-foreground">Configuração do Tenant</h2>
          <p className="text-sm text-muted-foreground">
            Ajuste as configurações de conexão e políticas do Active Directory.
          </p>
        </div>
        <div className="flex items-center gap-3">
          {isAdmin && (
            <Select value={selectedTenantId} onValueChange={setSelectedTenantId}>
              <SelectTrigger className="w-64">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {tenants.map((t: any) => (
                  <SelectItem key={t.id} value={String(t.id)}>
                    {t.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          )}
          <Button onClick={handleSave}>
            <Save className="w-4 h-4 mr-2" />
            {saved ? 'Salvo!' : 'Salvar Configurações'}
          </Button>
        </div>
      </div>

      <div className="grid lg:grid-cols-2 gap-6">
        {/* Conexão LDAP */}
        <div className="bg-card border border-border rounded-xl overflow-hidden">
          {/* Cabeçalho com toggle */}
          <div className="flex items-center justify-between px-5 py-4 border-b border-border">
            <h3 className="font-semibold text-foreground flex items-center gap-2">
              <Network className="w-4 h-4 text-primary" />
              Conexão LDAP / Active Directory
            </h3>
            <div className="flex items-center gap-1 p-0.5 bg-muted rounded-lg text-sm">
              <button
                onClick={switchToBasic}
                className={`flex items-center gap-1.5 px-3 py-1 rounded-md text-xs font-medium transition-colors ${
                  !advancedMode
                    ? 'bg-background text-foreground shadow-sm'
                    : 'text-muted-foreground hover:text-foreground'
                }`}
              >
                <Zap className="w-3 h-3" />
                Básico
              </button>
              <button
                onClick={() => setAdvancedMode(true)}
                className={`flex items-center gap-1.5 px-3 py-1 rounded-md text-xs font-medium transition-colors ${
                  advancedMode
                    ? 'bg-background text-foreground shadow-sm'
                    : 'text-muted-foreground hover:text-foreground'
                }`}
              >
                <SlidersHorizontal className="w-3 h-3" />
                Avançado
              </button>
            </div>
          </div>

          <div className="p-5 space-y-4">
            {/* ── MODO BÁSICO ── */}
            {!advancedMode && (
              <>
                <div className="flex items-start gap-2 p-3 rounded-lg bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-900">
                  <Info className="w-4 h-4 text-blue-500 shrink-0 mt-0.5" />
                  <p className="text-xs text-blue-700 dark:text-blue-400">
                    Preencha os campos abaixo. O sistema configura automaticamente as estruturas
                    internas do Active Directory (Base DN, OUs e Sufixo UPN).
                  </p>
                </div>

                <div className="space-y-2">
                  <Label>Endereço do Servidor AD (IP ou hostname)</Label>
                  <Input
                    value={form.preferredDC}
                    onChange={(e) => setForm((p) => ({ ...p, preferredDC: e.target.value }))}
                    placeholder="192.168.1.10 ou dc.empresa.local"
                  />
                  <p className="text-xs text-muted-foreground">
                    IP ou nome do servidor onde o Active Directory está instalado.
                  </p>
                </div>

                <div className="space-y-2">
                  <Label>Nome do domínio</Label>
                  <Input
                    value={basicDomain}
                    onChange={(e) => {
                      setBasicDomain(e.target.value)
                      deriveFromDomain(e.target.value)
                    }}
                    placeholder="empresa.local"
                  />
                  <p className="text-xs text-muted-foreground">
                    O domínio do Active Directory, geralmente no formato{' '}
                    <code className="bg-muted px-1 rounded">empresa.local</code> ou{' '}
                    <code className="bg-muted px-1 rounded">empresa.com.br</code>.
                  </p>
                </div>

  <div className="space-y-2">
  <Label>Usuário de serviço do AD</Label>
  <Input
  value={form.adUser}
  onChange={(e) => setForm((p) => ({ ...p, adUser: e.target.value }))}
  placeholder="svc_consultarti"
  />
                  <p className="text-xs text-muted-foreground">
                    Conta de serviço com permissão de gerenciar usuários e grupos no AD (criar, editar, desabilitar).
                  </p>
                  <details className="group mt-1">
    <summary className="flex items-center gap-1.5 cursor-pointer text-xs text-primary hover:underline list-none select-none w-fit">
      <Info className="w-3 h-3 group-open:hidden" />
      <Info className="w-3 h-3 hidden group-open:block" />
      Como criar e configurar esse usuário?
    </summary>
    <div className="mt-3 p-3 rounded-lg border border-border bg-muted/40 space-y-3">
      <p className="text-xs text-muted-foreground">
        Abra o <strong>PowerShell como Administrador</strong> no servidor AD e execute o script abaixo.
        Ele cria a conta <code className="bg-muted px-1 rounded">svc_consultarti</code> e delega as
        permissões necessárias para criar, modificar e desabilitar usuários e grupos no domínio.
      </p>
      <div className="relative">
        <pre className="text-xs font-mono bg-background border border-border rounded p-3 overflow-x-auto whitespace-pre-wrap break-all leading-relaxed select-all">{`# 1. Criar o usuário de serviço
$senha = Read-Host "Defina a senha do usuário de serviço" -AsSecureString
New-ADUser -Name "svc_consultarti" \`
  -SamAccountName "svc_consultarti" \`
  -AccountPassword $senha \`
  -Enabled $true \`
  -PasswordNeverExpires $true \`
  -Description "Conta de servico ConsultarTI"

# 2. Descobrir o Base DN do dominio automaticamente
$baseDN = (Get-ADDomain).DistinguishedName

# 3. Delegar permissão para gerenciar objetos User
dsacls "$baseDN" /I:S /G "svc_consultarti:CC;User"
dsacls "$baseDN" /I:S /G "svc_consultarti:DC;User"
dsacls "$baseDN" /I:S /G "svc_consultarti:WP;User"
dsacls "$baseDN" /I:S /G "svc_consultarti:RP;User"

# 4. Delegar permissão para gerenciar objetos Group
dsacls "$baseDN" /I:S /G "svc_consultarti:CC;Group"
dsacls "$baseDN" /I:S /G "svc_consultarti:DC;Group"
dsacls "$baseDN" /I:S /G "svc_consultarti:WP;Group"
dsacls "$baseDN" /I:S /G "svc_consultarti:RP;Group"

Write-Host "Conta de servico criada e permissoes delegadas com sucesso."`}</pre>
        <button
          type="button"
          onClick={() => navigator.clipboard.writeText(
`# 1. Criar o usuário de serviço
$senha = Read-Host "Defina a senha do usuário de serviço" -AsSecureString
New-ADUser -Name "svc_consultarti" \`
  -SamAccountName "svc_consultarti" \`
  -AccountPassword $senha \`
  -Enabled $true \`
  -PasswordNeverExpires $true \`
  -Description "Conta de servico ConsultarTI"

# 2. Descobrir o Base DN do dominio automaticamente
$baseDN = (Get-ADDomain).DistinguishedName

# 3. Delegar permissão para gerenciar objetos User
dsacls "$baseDN" /I:S /G "svc_consultarti:CC;User"
dsacls "$baseDN" /I:S /G "svc_consultarti:DC;User"
dsacls "$baseDN" /I:S /G "svc_consultarti:WP;User"
dsacls "$baseDN" /I:S /G "svc_consultarti:RP;User"

# 4. Delegar permissão para gerenciar objetos Group
dsacls "$baseDN" /I:S /G "svc_consultarti:CC;Group"
dsacls "$baseDN" /I:S /G "svc_consultarti:DC;Group"
dsacls "$baseDN" /I:S /G "svc_consultarti:WP;Group"
dsacls "$baseDN" /I:S /G "svc_consultarti:RP;Group"

Write-Host "Conta de servico criada e permissoes delegadas com sucesso."`)
          }
          className="absolute top-2 right-2 text-xs text-muted-foreground hover:text-foreground bg-muted hover:bg-muted/80 px-2 py-0.5 rounded border border-border transition-colors"
        >
          Copiar
        </button>
      </div>
      <div className="text-xs text-muted-foreground space-y-0.5">
        <p className="font-medium text-foreground">O que cada permissão faz:</p>
        <p><code className="bg-muted px-1 rounded">CC</code> — criar objetos &nbsp;|&nbsp; <code className="bg-muted px-1 rounded">DC</code> — excluir objetos &nbsp;|&nbsp; <code className="bg-muted px-1 rounded">WP</code> — editar propriedades &nbsp;|&nbsp; <code className="bg-muted px-1 rounded">RP</code> — ler propriedades</p>
      </div>
      <p className="text-xs text-muted-foreground">
        Após executar, informe o nome <code className="bg-muted px-1 rounded">svc_consultarti</code> no campo acima e a senha definida no campo abaixo.
      </p>
    </div>
  </details>
                  </div>

                <div className="space-y-2">
                  <Label>Senha do usuário de leitura</Label>
                  <div className="relative">
                    <Input
                      type={showPassword ? 'text' : 'password'}
                      value={form.adPassword}
                      onChange={(e) => setForm((p) => ({ ...p, adPassword: e.target.value }))}
                      placeholder={tenant?.has_password ? '••••••••  (senha já cadastrada)' : 'Digite a senha'}
                      className="pr-10"
                    />
                    <button
                      type="button"
                      onClick={() => setShowPassword((v) => !v)}
                      className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                      tabIndex={-1}
                    >
                      {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                    </button>
                  </div>
                  {tenant?.has_password && !form.adPassword && (
                    <p className="text-xs text-green-600 dark:text-green-400 flex items-center gap-1">
                      <CheckCircle2 className="w-3 h-3" /> Senha cadastrada. Deixe em branco para manter.
                    </p>
                  )}
                </div>

                <div className="flex items-center gap-3">
                  <Switch
                    id="ssl-basic"
                    checked={form.useSSL}
                    onCheckedChange={(v) =>
                      setForm((p) => ({ ...p, useSSL: v, ldapPort: v ? '636' : '389' }))
                    }
                  />
                  <div>
                    <Label htmlFor="ssl-basic" className="cursor-pointer">Conexão segura (SSL/TLS)</Label>
                    <p className="text-xs text-muted-foreground">
                      Recomendado se o servidor suportar LDAPS.
                    </p>
                  </div>
                </div>

                {/* Preview do Base DN derivado */}
                {basicDomain && form.baseDn && (
                  <div className="p-3 rounded-lg bg-muted/50 border border-border space-y-1">
                    <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
                      Configurado automaticamente
                    </p>
                    <div className="flex items-baseline gap-2">
                      <span className="text-xs text-muted-foreground w-16 shrink-0">Base DN</span>
                      <code className="text-xs text-foreground font-mono">{form.baseDn}</code>
                    </div>
                    <p className="text-xs text-muted-foreground pt-1">
                      As OUs serão detectadas automaticamente ao navegar em Usuários AD e Grupos AD.{' '}
                      <button
                        className="text-primary underline underline-offset-2"
                        onClick={() => setAdvancedMode(true)}
                      >
                        Configuração avançada.
                      </button>
                    </p>
                  </div>
                )}
              </>
            )}

            {/* ── MODO AVANÇADO ── */}
            {advancedMode && (
              <>
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label>Controlador de Domínio (IP/hostname)</Label>
                    <Input
                      value={form.preferredDC}
                      onChange={(e) => setForm((p) => ({ ...p, preferredDC: e.target.value }))}
                      placeholder="192.168.1.10"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label>Porta LDAP</Label>
                    <Input
                      type="number"
                      value={form.ldapPort}
                      onChange={(e) => setForm((p) => ({ ...p, ldapPort: e.target.value }))}
                    />
                  </div>
                </div>

                <div className="flex items-center gap-3">
                  <Switch
                    id="ssl"
                    checked={form.useSSL}
                    onCheckedChange={(v) =>
                      setForm((p) => ({ ...p, useSSL: v, ldapPort: v ? '636' : '389' }))
                    }
                  />
                  <Label htmlFor="ssl">Usar SSL/TLS (LDAPS — porta 636)</Label>
                </div>

                <div className="space-y-2">
                  <Label>Base DN</Label>
                  <Input
                    value={form.baseDn}
                    onChange={(e) => setForm((p) => ({ ...p, baseDn: e.target.value }))}
                    placeholder="DC=empresa,DC=local"
                    className="font-mono text-sm"
                  />
                </div>

                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label>Sufixo UPN</Label>
                    <Input
                      value={form.upnSuffix}
                      onChange={(e) => setForm((p) => ({ ...p, upnSuffix: e.target.value }))}
                      placeholder="empresa.local"
                    />
                  </div>
                  <div className="space-y-2">
                  <Label>Usuário de serviço do AD</Label>
                  <Input
                  value={form.adUser}
                  onChange={(e) => setForm((p) => ({ ...p, adUser: e.target.value }))}
                  placeholder="svc_consultarti"
                  />
                  </div>
                  </div>

                <div className="space-y-2">
                  <Label>Senha do usuário de serviço</Label>
                  <div className="relative">
                    <Input
                      type={showPassword ? 'text' : 'password'}
                      value={form.adPassword}
                      onChange={(e) => setForm((p) => ({ ...p, adPassword: e.target.value }))}
                      placeholder={tenant?.has_password ? '••••••••  (senha já cadastrada)' : 'Digite a senha'}
                      className="pr-10"
                    />
                    <button
                      type="button"
                      onClick={() => setShowPassword((v) => !v)}
                      className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                      tabIndex={-1}
                    >
                      {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                    </button>
                  </div>
                  {tenant?.has_password && !form.adPassword && (
                    <p className="text-xs text-green-600 dark:text-green-400 flex items-center gap-1">
                      <CheckCircle2 className="w-3 h-3" /> Senha cadastrada. Deixe em branco para manter.
                    </p>
                  )}
                </div>
                  </>
            )}

            {/* Testar conexão — sempre visível */}
            <div className="pt-2 border-t border-border">
              <Button
                variant="outline"
                size="sm"
                onClick={handleTestConnection}
                disabled={testStatus === 'testing'}
              >
                {testStatus === 'testing' ? (
                  <>
                    <Settings className="w-4 h-4 mr-2 animate-spin" />
                    Testando...
                  </>
                ) : (
                  <>
                    <Network className="w-4 h-4 mr-2" />
                    Testar Conexão LDAP
                  </>
                )}
              </Button>
              {testStatus === 'success' && (
                <p className="inline-flex items-center gap-1.5 ml-3 text-sm text-green-700">
                  <CheckCircle2 className="w-4 h-4" />
                  Conexão bem-sucedida
                </p>
              )}
              {testStatus === 'error' && (
                <p className="inline-flex items-center gap-1.5 ml-3 text-sm text-destructive">
                  <AlertTriangle className="w-4 h-4" />
                  Falha na conexão
                </p>
              )}
            </div>
          </div>
        </div>

        {/* Políticas */}
        <div className="space-y-4">
          <div className="bg-card border border-border rounded-xl p-5 space-y-4">
            <h3 className="font-semibold text-foreground flex items-center gap-2">
              <ShieldCheck className="w-4 h-4 text-primary" />
              Políticas de Criação de Usuário
            </h3>
            <p className="text-xs text-muted-foreground">
              Valores padrão aplicados ao criar novos usuários neste tenant.
            </p>

            <div className="space-y-4">
              <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                Valores padrão
              </p>
              {[
                {
                  id: 'mustChangePasswordOnFirstLogin',
                  label: 'Trocar senha no 1º login',
                  desc: 'O usuário deverá alterar a senha no primeiro logon.',
                },
                {
                  id: 'cannotChangePassword',
                  label: 'Não pode alterar senha',
                  desc: 'O usuário não terá permissão para alterar sua própria senha.',
                },
                {
                  id: 'passwordNeverExpires',
                  label: 'Senha nunca expira',
                  desc: 'A senha do usuário não expirará.',
                },
                {
                  id: 'accountStartsEnabled',
                  label: 'Conta iniciada como habilitada',
                  desc: 'A conta será criada habilitada no AD.',
                },
              ].map((opt) => (
                <div key={opt.id} className="flex items-start justify-between gap-4">
                  <div>
                    <p className="text-sm font-medium text-foreground">{opt.label}</p>
                    <p className="text-xs text-muted-foreground">{opt.desc}</p>
                  </div>
                  <Switch
                    checked={policyForm[opt.id as keyof typeof policyForm] as boolean}
                    onCheckedChange={(v) =>
                      setPolicyForm((p) => ({ ...p, [opt.id]: v }))
                    }
                  />
                </div>
              ))}
            </div>

            {isAdmin && (
              <>
                <div className="pt-4 border-t border-border">
                  <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-4">
                    O operador pode personalizar
                  </p>
                  {[
                    {
                      id: 'operatorCanChooseMustChange',
                      label: 'Pode configurar: Trocar senha no 1º login',
                    },
                    {
                      id: 'operatorCanChooseCannotChange',
                      label: 'Pode configurar: Não pode alterar senha',
                    },
                    {
                      id: 'operatorCanChooseNeverExpires',
                      label: 'Pode configurar: Senha nunca expira',
                    },
                    {
                      id: 'operatorCanChooseEnabled',
                      label: 'Pode configurar: Habilitar/desabilitar conta',
                    },
                  ].map((opt) => (
                    <div key={opt.id} className="flex items-center gap-3 py-1.5">
                      <Switch
                        id={opt.id}
                        checked={policyForm[opt.id as keyof typeof policyForm] as boolean}
                        onCheckedChange={(v) =>
                          setPolicyForm((p) => ({ ...p, [opt.id]: v }))
                        }
                      />
                      <Label htmlFor={opt.id} className="text-sm cursor-pointer">
                        {opt.label}
                      </Label>
                    </div>
                  ))}
                </div>
              </>
            )}
          </div>

          {/* Info tenant */}
          {tenant && (
            <div className="bg-card border border-border rounded-xl p-5 space-y-3">
              <h3 className="font-semibold text-foreground text-sm">Informações do Tenant</h3>
              <div className="grid grid-cols-2 gap-3 text-sm">
                {[
                  { label: 'Nome', value: tenant.name },
                  { label: 'Domínio', value: tenant.domain },
                  { label: 'Usuários', value: String(tenant.usersCount) },
                  { label: 'Grupos', value: String(tenant.groupsCount) },
                ].map((f) => (
                  <div key={f.label}>
                    <p className="text-xs text-muted-foreground">{f.label}</p>
                    <p className="text-sm text-foreground font-medium">{f.value}</p>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}