import { useEffect, useState } from "react";
import { ArrowLeft, ChevronLeft, ChevronRight, Download, Landmark, Loader2 } from "lucide-react";
import { toast } from "sonner";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { useAuthAccess } from "@/contexts/AuthAccessContext";
import { authMeService } from "@/services/fechamento/authMe";
import { useNavigate } from "react-router-dom";

const PER_PAGE = 20;

function formatPontos(valor: number): string {
  return valor.toLocaleString("pt-BR", { minimumFractionDigits: 0, maximumFractionDigits: 4 });
}

function formatData(iso: string): string {
  try {
    const d = new Date(iso);
    return d.toLocaleString("pt-BR", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    });
  } catch {
    return iso;
  }
}

function formatCompetenciaMesAno(mes: number | null, ano: number | null): string {
  if (mes == null || ano == null) return "—";
  const m = Math.trunc(Number(mes));
  const y = Math.trunc(Number(ano));
  if (!Number.isFinite(m) || !Number.isFinite(y) || m < 1 || m > 12) return "—";
  return `${String(m).padStart(2, "0")}/${y}`;
}

function nomeExibicao(nome: string, codinome: string | null): string {
  return codinome?.trim() ? `${nome} (${codinome.trim()})` : nome;
}

export default function MeuFechamentoBancoPontos() {
  const navigate = useNavigate();
  const { me } = useAuthAccess();
  const [loading, setLoading] = useState(true);
  const [exportando, setExportando] = useState(false);
  const [page, setPage] = useState(1);
  const [dados, setDados] = useState<Awaited<ReturnType<typeof authMeService.getMeuBancoPontosExtrato>> | null>(null);
  const semVinculo = !me?.parceiroId;

  useEffect(() => {
    if (semVinculo) {
      setLoading(false);
      return;
    }
    if (!me?.email) {
      setLoading(false);
      toast.error("Não foi possível identificar o usuário logado.");
      return;
    }
    let cancelled = false;
    const load = async () => {
      try {
        setLoading(true);
        const data = await authMeService.getMeuBancoPontosExtrato(me.email, page, PER_PAGE);
        if (!cancelled) {
          setDados(data);
        }
      } catch (error) {
        if (!cancelled) {
          const message = error instanceof Error ? error.message : "Erro ao carregar extrato.";
          toast.error(message);
          setDados(null);
        }
      } finally {
        if (!cancelled) {
          setLoading(false);
        }
      }
    };
    void load();
    return () => {
      cancelled = true;
    };
  }, [me?.email, page, semVinculo]);

  const handleExportar = async () => {
    if (!me?.email) return;
    try {
      setExportando(true);
      const { buffer, filename } = await authMeService.exportarMeuBancoPontosExtrato(me.email);
      const blob = new Blob([buffer], {
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
      });
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = filename ?? "meu-banco-pontos.xlsx";
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
      toast.success("Planilha exportada com sucesso.");
    } catch (error) {
      const message = error instanceof Error ? error.message : "Erro ao exportar extrato.";
      toast.error(message);
    } finally {
      setExportando(false);
    }
  };

  if (semVinculo) {
    return (
      <div className="p-3 md:p-6">
        <Button variant="ghost" size="sm" onClick={() => navigate("/fechamento/meu-fechamento")}>
          <ArrowLeft className="mr-1 h-4 w-4" />
          Voltar
        </Button>
        <div className="mt-4 rounded-lg border p-4 text-sm text-muted-foreground">
          Usuário não está vinculado a parceiro.
        </div>
      </div>
    );
  }

  const totalPaginas = Math.max(1, dados?.meta.totalPaginas ?? 1);
  const parceiroNome =
    dados?.parceiro ? nomeExibicao(dados.parceiro.nome, dados.parceiro.codinome) : "Carregando...";

  return (
    <div className="flex h-full flex-col bg-background pb-16 md:pb-0">
      <div className="border-b border-border bg-muted/20 p-3 md:p-6">
        <div className="mb-3">
          <Button variant="ghost" size="sm" onClick={() => navigate("/fechamento/meu-fechamento")}>
            <ArrowLeft className="mr-1 h-4 w-4" />
            Voltar ao meu fechamento
          </Button>
        </div>
        <h1 className="flex items-center gap-2 text-xl font-bold text-foreground md:text-3xl">
          <Landmark className="h-5 w-5 md:h-6 md:w-6" />
          Banco de Pontos — {parceiroNome}
        </h1>
        <p className="mt-1 text-sm text-muted-foreground">Extrato detalhado do seu banco de pontos.</p>
      </div>

      <div className="flex-1 space-y-4 p-3 md:p-6">
        <div className="flex flex-wrap items-center justify-between gap-2">
          <div>
            {dados?.parceiro ? (
              <span className={`text-xl font-bold ${(dados.parceiro.saldo ?? 0) >= 0 ? "text-emerald-600" : "text-red-600"}`}>
                Saldo atual: {formatPontos(Number(dados.parceiro.saldo ?? 0))}
              </span>
            ) : null}
          </div>
          <Button type="button" variant="outline" size="sm" disabled={exportando || loading} onClick={() => void handleExportar()}>
            {exportando ? <Loader2 className="h-4 w-4 animate-spin" /> : <Download className="h-4 w-4" />}
            Exportar XLSX
          </Button>
        </div>

        <div className="overflow-x-auto rounded-lg border">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="min-w-[150px]">Data</TableHead>
                <TableHead className="min-w-[110px] whitespace-nowrap">Competência</TableHead>
                <TableHead className="min-w-[280px]">Descrição</TableHead>
                <TableHead className="min-w-[100px]">Tipo</TableHead>
                <TableHead className="min-w-[130px] text-right">Valor</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {loading ? (
                <TableRow>
                  <TableCell colSpan={5} className="py-14 text-center text-muted-foreground">
                    <Loader2 className="mx-auto mb-2 h-8 w-8 animate-spin text-primary" />
                    Carregando extrato...
                  </TableCell>
                </TableRow>
              ) : !dados || dados.data.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={5} className="py-12 text-center text-muted-foreground">
                    Nenhuma movimentação registrada.
                  </TableCell>
                </TableRow>
              ) : (
                dados.data.map((linha) => {
                  const isCredito = linha.tipo === "credito";
                  return (
                    <TableRow key={linha.id}>
                      <TableCell className="whitespace-nowrap text-sm text-muted-foreground">{formatData(linha.criadoEm)}</TableCell>
                      <TableCell className="whitespace-nowrap text-sm text-muted-foreground">
                        {formatCompetenciaMesAno(linha.competenciaMes, linha.competenciaAno)}
                      </TableCell>
                      <TableCell className="max-w-[420px] text-sm font-medium leading-snug">{linha.descricao}</TableCell>
                      <TableCell>
                        {isCredito ? (
                          <Badge className="border-emerald-600/30 bg-emerald-50 font-normal text-emerald-800 hover:bg-emerald-50">
                            Crédito
                          </Badge>
                        ) : (
                          <Badge className="border-red-600/30 bg-red-50 font-normal text-red-800 hover:bg-red-50">
                            Débito
                          </Badge>
                        )}
                      </TableCell>
                      <TableCell className={`text-right font-semibold tabular-nums ${isCredito ? "text-emerald-600" : "text-red-600"}`}>
                        {isCredito ? "+" : "−"}
                        {formatPontos(Number(linha.quantidade))}
                      </TableCell>
                    </TableRow>
                  );
                })
              )}
            </TableBody>
          </Table>
        </div>

        <div className="flex flex-wrap items-center justify-between gap-3 border-t pt-3">
          <p className="text-sm text-muted-foreground">
            Página {dados?.meta.paginaAtual ?? 1} de {totalPaginas}
          </p>
          <div className="flex gap-2">
            <Button variant="outline" size="sm" disabled={loading || page <= 1} onClick={() => setPage((p) => Math.max(1, p - 1))}>
              <ChevronLeft className="h-4 w-4" />
              Anterior
            </Button>
            <Button
              variant="outline"
              size="sm"
              disabled={loading || page >= totalPaginas}
              onClick={() => setPage((p) => Math.min(totalPaginas, p + 1))}
            >
              Próxima
              <ChevronRight className="h-4 w-4" />
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}

