'use client'

import { useCallback, useEffect, useState } from 'react'
import {
  Banknote,
  CheckCircle2,
  AlertTriangle,
  Loader2,
  RefreshCw,
} from 'lucide-react'

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from '@/components/ui/tabs'
import { Button } from '@/components/ui/button'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
import { BoletosGerarTab } from '@/components/boleto/gerar-tab'
import { BoletosConsultarTab } from '@/components/boleto/consultar-tab'
import { BoletosHistoricoTab } from '@/components/boleto/historico-tab'

interface AuthCheckResponse {
  success: boolean
  user?: { name: string; email: string; documents_checked: number }
  key?: { name: string; domain: string; last_used_at: string }
  message?: string
  error?: string
  code?: string
}

export default function Home() {
  const [authStatus, setAuthStatus] = useState<
    'idle' | 'checking' | 'ok' | 'error'
  >('checking')
  const [authData, setAuthData] = useState<AuthCheckResponse | null>(null)
  const [activeTab, setActiveTab] = useState('gerar')

  const checkAuth = useCallback(async () => {
    try {
      const resp = await fetch('/api/boleto/auth-check')
      const data: AuthCheckResponse = await resp.json()
      setAuthData(data)
      setAuthStatus(data.success ? 'ok' : 'error')
    } catch (err) {
      setAuthData({
        success: false,
        error:
          err instanceof Error
            ? `Erro de comunicação: ${err.message}`
            : 'Erro de comunicação com o servidor.',
        code: 'NETWORK_ERROR',
      })
      setAuthStatus('error')
    }
  }, [])

  useEffect(() => {
    const t = setTimeout(() => void checkAuth(), 0)
    return () => clearTimeout(t)
  }, [checkAuth])

  return (
    <main className="min-h-screen flex flex-col bg-gradient-to-b from-emerald-50/30 via-background to-background">
      <header className="border-b bg-background/80 backdrop-blur-sm sticky top-0 z-10">
        <div className="container mx-auto max-w-6xl px-4 py-4 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
          <div className="flex items-center gap-3">
            <div className="size-10 rounded-xl bg-emerald-600 text-white flex items-center justify-center shadow-md">
              <Banknote className="size-5" />
            </div>
            <div>
              <h1 className="text-xl font-bold leading-tight">
                Gerador de Boletos
              </h1>
              <p className="text-xs text-muted-foreground">
                Powered by Dust Payments API
              </p>
            </div>
          </div>
          <AuthBadge
            status={authStatus}
            data={authData}
            onRetry={checkAuth}
          />
        </div>
      </header>

      <section className="container mx-auto max-w-6xl px-4 py-6 flex-1">
        <div className="mb-6">
          <h2 className="text-2xl font-bold tracking-tight">
            Emissão de boletos bancários
          </h2>
          <p className="text-sm text-muted-foreground mt-1 max-w-2xl">
            Crie boletos automaticamente com a API do Dust Payments, consulte
            o status de cobranças já emitidas e acompanhe o histórico completo
            — tudo em uma única interface.
          </p>
        </div>

        <Tabs
          value={activeTab}
          onValueChange={setActiveTab}
          className="w-full"
        >
          <TabsList className="grid grid-cols-3 w-full max-w-md mb-6">
            <TabsTrigger value="gerar">Gerar</TabsTrigger>
            <TabsTrigger value="consultar">Consultar</TabsTrigger>
            <TabsTrigger value="historico">Histórico</TabsTrigger>
          </TabsList>

          <TabsContent value="gerar" className="outline-none">
            <BoletosGerarTab />
          </TabsContent>
          <TabsContent value="consultar" className="outline-none">
            <BoletosConsultarTab />
          </TabsContent>
          <TabsContent value="historico" className="outline-none">
            <BoletosHistoricoTab />
          </TabsContent>
        </Tabs>
      </section>

      <footer className="border-t bg-background/80 mt-auto">
        <div className="container mx-auto max-w-6xl px-4 py-4 text-xs text-muted-foreground flex flex-col sm:flex-row gap-2 sm:justify-between">
          <span>
            Integração: <span className="font-mono">POST /api/v1/boleto/criar</span>{' '}
            · <span className="font-mono">dustpay.com.br</span>
          </span>
          <span>Ambiente de produção — transações reais</span>
        </div>
      </footer>
    </main>
  )
}

function AuthBadge({
  status,
  data,
  onRetry,
}: {
  status: 'idle' | 'checking' | 'ok' | 'error'
  data: AuthCheckResponse | null
  onRetry: () => void
}) {
  if (status === 'idle' || status === 'checking') {
    return (
      <div className="inline-flex items-center gap-2 text-sm text-muted-foreground">
        <Loader2 className="size-4 animate-spin" />
        Verificando credenciais…
      </div>
    )
  }

  if (status === 'error') {
    return (
      <Alert variant="destructive" className="py-2 px-3">
        <AlertTriangle className="size-4" />
        <AlertTitle className="text-xs">Credenciais</AlertTitle>
        <AlertDescription className="text-xs flex items-center gap-2">
          <span className="flex-1 truncate">
            {data?.error || 'Não autenticado.'}
          </span>
          <Button
            size="sm"
            variant="outline"
            className="h-6 px-2 text-xs"
            onClick={onRetry}
          >
            <RefreshCw className="size-3" />
            Retry
          </Button>
        </AlertDescription>
      </Alert>
    )
  }

  return (
    <Card className="border-emerald-300 dark:border-emerald-800 bg-emerald-50/60 dark:bg-emerald-950/30 py-2 px-3 shadow-none">
      <CardContent className="p-0 flex items-center gap-2">
        <CheckCircle2 className="size-4 text-emerald-600" />
        <div className="text-xs leading-tight">
          <div className="font-medium text-emerald-700 dark:text-emerald-300">
            Credenciais válidas
          </div>
          <div className="text-muted-foreground">
            {data?.user?.name ? data.user.name : 'Autenticado'}{' '}
            {data?.key?.name ? `· ${data.key.name}` : ''}
          </div>
        </div>
      </CardContent>
    </Card>
  )
}