'use client'

import { useState, type FormEvent } from 'react'
import {
  Search,
  Loader2,
  AlertCircle,
  FileSearch,
  RefreshCw,
} from 'lucide-react'

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
import { BoletoCard, type BoletoData } from './boleto-card'

interface StatusResponse {
  success: boolean
  local: BoletoData | null
  remote: {
    success: boolean
    status?: string
    status_text?: string
    barcode?: string
    due_date?: string
    confirmed_at?: string
    error?: string
    code?: string
  } | null
  error?: string
  code?: string
}

export function BoletosConsultarTab() {
  const [txId, setTxId] = useState('')
  const [loading, setLoading] = useState(false)
  const [syncing, setSyncing] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [result, setResult] = useState<BoletoData | null>(null)

  async function handleSearch(e: FormEvent<HTMLFormElement>, sync = false) {
    e.preventDefault()
    setError(null)
    setResult(null)
    if (!txId.trim()) {
      setError('Informe o ID da transação (transaction_id).')
      return
    }
    if (sync) setSyncing(true)
    else setLoading(true)

    try {
      const url = `/api/boleto/status?id=${encodeURIComponent(
        txId.trim(),
      )}&sync=${sync ? 'true' : 'false'}`
      const resp = await fetch(url)
      const data: StatusResponse = await resp.json()

      if (!data.success) {
        setError(
          data.error || data.remote?.error || 'Boleto não encontrado.',
        )
        return
      }
      if (!data.local) {
        setError(
          'Boleto não encontrado localmente. Clique em "Consultar na API" para sincronizar.',
        )
        return
      }
      setResult(data.local)
    } catch (err) {
      setError(
        err instanceof Error
          ? `Erro de comunicação: ${err.message}`
          : 'Erro de comunicação com o servidor.',
      )
    } finally {
      setLoading(false)
      setSyncing(false)
    }
  }

  function handleSync() {
    handleSearch(new Event('submit') as unknown as FormEvent<HTMLFormElement>, true)
  }

  return (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <Card className="h-fit lg:sticky lg:top-6">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <FileSearch className="size-5 text-emerald-600" />
            Consultar boleto
          </CardTitle>
          <CardDescription>
            Informe o <span className="font-mono">transaction_id</span>{' '}
            retornado na geração. Por padrão, consulta o banco local; clique em
            "Consultar na API" para sincronizar com o DustPay.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={(e) => handleSearch(e, false)} className="space-y-4">
            <div className="space-y-1.5">
              <Label htmlFor="tx-id" className="text-sm font-medium">
                ID da transação *
              </Label>
              <Input
                id="tx-id"
                placeholder="Ex.: BOL_1734567890_abc123"
                value={txId}
                onChange={(e) => setTxId(e.target.value)}
                className="font-mono"
                required
              />
              <p className="text-xs text-muted-foreground mt-1">
                Cole aqui o ID retornado quando o boleto foi gerado.
              </p>
            </div>

            {error ? (
              <Alert variant="destructive">
                <AlertCircle className="size-4" />
                <AlertTitle>Erro</AlertTitle>
                <AlertDescription>{error}</AlertDescription>
              </Alert>
            ) : null}

            <div className="flex flex-col sm:flex-row gap-2">
              <Button
                type="submit"
                disabled={loading}
                className="gap-2 flex-1 bg-emerald-600 hover:bg-emerald-700 text-white"
              >
                {loading ? (
                  <Loader2 className="size-4 animate-spin" />
                ) : (
                  <Search className="size-4" />
                )}
                {loading ? 'Consultando…' : 'Consultar local'}
              </Button>
              <Button
                type="button"
                variant="outline"
                onClick={handleSync}
                disabled={syncing || loading}
                className="gap-2"
              >
                {syncing ? (
                  <Loader2 className="size-4 animate-spin" />
                ) : (
                  <RefreshCw className="size-4" />
                )}
                {syncing ? 'Sincronizando…' : 'Consultar na API'}
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>

      <div className="space-y-4">
        {result ? (
          <BoletoCard
            boleto={result}
            onSync={handleSync}
            syncing={syncing || loading}
          />
        ) : (
          <Card className="min-h-[280px] flex items-center justify-center border-dashed">
            <CardContent className="flex flex-col items-center text-center gap-3 py-10">
              <div className="size-12 rounded-full bg-muted flex items-center justify-center">
                <FileSearch className="size-6 text-muted-foreground" />
              </div>
              <div>
                <p className="font-medium">Nenhum boleto consultado</p>
                <p className="text-sm text-muted-foreground mt-1 max-w-xs">
                  Informe o <span className="font-mono">transaction_id</span>{' '}
                  ao lado para buscar o status atual do boleto.
                </p>
              </div>
            </CardContent>
          </Card>
        )}
      </div>
    </div>
  )
}