import { useEffect, useMemo, useState } from "react";
import { ExternalLink, FileSpreadsheet, Landmark, ListChecks, Loader2, Target } from "lucide-react";
import { toast } from "sonner";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { useAuthAccess } from "@/contexts/AuthAccessContext";
import { authMeService } from "@/services/fechamento/authMe";
import { fechamentoFechamentosService } from "@/services/fechamento/fechamentos";
import { useNavigate } from "react-router-dom";

const meses = [
  "Janeiro",
  "Fevereiro",
  "Março",
  "Abril",
  "Maio",
  "Junho",
  "Julho",
  "Agosto",
  "Setembro",
  "Outubro",
  "Novembro",
  "Dezembro",
];

function formatCompetenciaMes(mes: number, ano: number): string {
  return `${meses[mes - 1] ?? `Mês ${mes}`} / ${ano}`;
}

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

export default function MeuFechamento() {
  const navigate = useNavigate();
  const { me } = useAuthAccess();
  const currentYear = new Date().getFullYear();
  const [loading, setLoading] = useState(true);
  const [exportingFechamentoId, setExportingFechamentoId] = useState<string | null>(null);
  const [anoSelecionado, setAnoSelecionado] = useState<string>(String(currentYear));
  const [dados, setDados] = useState<Awaited<ReturnType<typeof authMeService.getMeuFechamento>> | null>(null);

  const semVinculo = !me?.parceiroId;
  const competenciasOrdenadas = useMemo(() => {
    if (!dados) return [];
    return [...dados.competencias].sort((a, b) => a.mes - b.mes);
  }, [dados]);
  const anosDisponiveis = useMemo(() => {
    const anos = new Set<number>([currentYear]);
    for (let i = 0; i < 4; i += 1) {
      anos.add(currentYear - i);
    }
    if (dados) {
      dados.competencias.forEach((item) => anos.add(item.ano));
    }
    return Array.from(anos).sort((a, b) => b - a).map(String);
  }, [currentYear, dados]);

  useEffect(() => {
    if (!anosDisponiveis.includes(anoSelecionado)) {
      setAnoSelecionado(anosDisponiveis[0] ?? String(currentYear));
    }
  }, [anoSelecionado, anosDisponiveis, currentYear]);

  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.getMeuFechamento(me.email, Number(anoSelecionado));
        if (!cancelled) {
          setDados(data);
        }
      } catch (error) {
        if (!cancelled) {
          const message = error instanceof Error ? error.message : "Erro ao carregar meu fechamento.";
          toast.error(message);
          setDados(null);
        }
      } finally {
        if (!cancelled) {
          setLoading(false);
        }
      }
    };
    void load();
    return () => {
      cancelled = true;
    };
  }, [me?.email, semVinculo, anoSelecionado]);

  const handleExportar = async (fechamentoId: string) => {
    try {
      setExportingFechamentoId(fechamentoId);
      const { buffer, filename } = await fechamentoFechamentosService.exportarPlanilha(fechamentoId);
      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 ?? `fechamento-${fechamentoId}.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 planilha.";
      toast.error(message);
    } finally {
      setExportingFechamentoId(null);
    }
  };

  if (loading) {
    return (
      <div className="flex h-full items-center justify-center p-6">
        <div className="inline-flex items-center gap-2 text-sm text-muted-foreground">
          <Loader2 className="h-4 w-4 animate-spin" />
          Carregando meu fechamento...
        </div>
      </div>
    );
  }

  if (semVinculo) {
    return (
      <div className="p-3 md:p-6">
        <Card className="mx-auto max-w-2xl">
          <CardHeader>
            <CardTitle>Usuário não vinculado</CardTitle>
            <CardDescription>
              Este usuário não está vinculado a um parceiro. Para consultar seu fechamento, é necessário vínculo.
            </CardDescription>
          </CardHeader>
        </Card>
      </div>
    );
  }

  return (
    <div className="flex h-full flex-col bg-background pb-16 md:pb-0">
      <div className="border-b border-border p-3 md:p-6">
        <div className="flex flex-wrap items-center justify-between gap-3">
          <h1 className="flex items-center gap-2 text-xl font-bold text-foreground md:text-3xl">
            <ListChecks className="h-5 w-5 md:h-6 md:w-6" />
            Meu Fechamento
          </h1>
          <Button onClick={() => navigate("/fechamento/meu-fechamento/banco-pontos")} className="gap-2">
            <Landmark className="h-4 w-4" />
            Banco de Pontos
          </Button>
        </div>
        <div className="mt-3 flex items-center gap-2">
          <span className="text-sm text-muted-foreground">Ano:</span>
          <Select value={anoSelecionado} onValueChange={setAnoSelecionado}>
            <SelectTrigger className="w-[140px]">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              {anosDisponiveis.map((ano) => (
                <SelectItem key={ano} value={ano}>
                  {ano}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

        <div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-3">
          <Card className="border-border/70 bg-card shadow-sm">
            <CardHeader className="space-y-2 p-4">
              <div className="flex items-start justify-between">
                <CardDescription className="text-[11px] uppercase tracking-wide">Total de pontos</CardDescription>
                <Target className="h-4 w-4 text-muted-foreground" />
              </div>
              <CardTitle className="text-2xl">{formatPontos(dados?.indicadores.totalPontos ?? 0)}</CardTitle>
            </CardHeader>
          </Card>
          <Card className="border-border/70 bg-card shadow-sm">
            <CardHeader className="space-y-2 p-4">
              <div className="flex items-start justify-between">
                <CardDescription className="text-[11px] uppercase tracking-wide">Saldo dos fechamentos</CardDescription>
                <ListChecks className="h-4 w-4 text-muted-foreground" />
              </div>
              <CardTitle className="text-2xl">{formatPontos(dados?.indicadores.saldoFechamentos ?? 0)}</CardTitle>
            </CardHeader>
          </Card>
          <Card className="border-border/70 bg-card shadow-sm">
            <CardHeader className="space-y-2 p-4">
              <div className="flex items-start justify-between">
                <CardDescription className="text-[11px] uppercase tracking-wide">Saldo banco de pontos</CardDescription>
                <Landmark className="h-4 w-4 text-muted-foreground" />
              </div>
              <CardTitle className="text-2xl">{formatPontos(dados?.indicadores.saldoBancoPontos ?? 0)}</CardTitle>
            </CardHeader>
          </Card>
        </div>
      </div>

      <div className="flex-1 overflow-auto p-3 md:p-6">
        {!dados || competenciasOrdenadas.length === 0 ? (
          <Card className="mx-auto mt-12 max-w-2xl">
            <CardHeader>
              <CardTitle>Nenhum fechamento encontrado</CardTitle>
              <CardDescription>Não há fechamento para o ano selecionado.</CardDescription>
            </CardHeader>
          </Card>
        ) : (
          <div className="overflow-x-auto rounded-lg border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="min-w-[220px]">Competência</TableHead>
                  <TableHead className="min-w-[140px]">Status fechamento</TableHead>
                  <TableHead className="min-w-[130px] text-right">Pontos</TableHead>
                  <TableHead className="min-w-[240px] text-center">Ações</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {competenciasOrdenadas.map((item) => (
                  <TableRow key={item.competenciaId}>
                    <TableCell className="font-medium">{formatCompetenciaMes(item.mes, item.ano)}</TableCell>
                    <TableCell>
                      {item.fechamento ? (
                        <Badge
                          className={
                            item.fechamento.status === "fechado"
                              ? "border-emerald-600/30 bg-emerald-50 font-normal text-emerald-800 hover:bg-emerald-50 dark:bg-emerald-950/40 dark:text-emerald-200"
                              : "border-slate-500/25 bg-slate-100 font-normal text-slate-700 hover:bg-slate-100 dark:bg-slate-800/60 dark:text-slate-200"
                          }
                        >
                          {item.fechamento.status === "fechado" ? "Fechado" : "Em aberto"}
                        </Badge>
                      ) : (
                        "—"
                      )}
                    </TableCell>
                    <TableCell className="text-right">{formatPontos(Number(item.fechamento?.pontuacaoTotalEntregue ?? 0))}</TableCell>
                    <TableCell className="text-center">
                      <div className="flex items-center justify-center gap-2">
                        <Button
                          size="sm"
                          variant="outline"
                          disabled={!item.fechamento || item.fechamento.status !== "fechado" || exportingFechamentoId === item.fechamento.id}
                          onClick={() => item.fechamento && void handleExportar(item.fechamento.id)}
                        >
                          <FileSpreadsheet className="mr-2 h-4 w-4" />
                          {exportingFechamentoId === item.fechamento?.id ? "Exportando..." : "Exportar"}
                        </Button>
                        <Button
                          size="sm"
                          variant="outline"
                          disabled={!item.fechamento || item.fechamento.status !== "fechado"}
                          onClick={() =>
                            navigate(`/fechamento/fechamentos/${item.fechamento?.id}`, {
                              state: {
                                competenciaId: item.competenciaId,
                                status: item.fechamento?.status,
                                readonlyView: true,
                              },
                            })
                          }
                        >
                          <ExternalLink className="mr-2 h-4 w-4" />
                          Detalhes
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        )}
      </div>
    </div>
  );
}

