"use client";

import { useEffect, useMemo } from "react";
import { toast } from "sonner";

import { Badge } from "@/shared/components/ui/badge";
import { Button } from "@/shared/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card";
import { Input } from "@/shared/components/ui/input";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/shared/components/ui/table";
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartConfig,
} from "@/shared/components/ui/chart";
import { AreaChart, Area, XAxis, YAxis, CartesianGrid } from "recharts";
import { Activity, MailOpen } from "lucide-react";
import { useCampaignReportStore } from "../hooks/use-campaign-report-store";
import { getLogStatusLabel } from "../utils/status-labels";

const reportChartConfig = {
  success: {
    label: "Sucessos",
    color: "#10b981",
  },
  failed: {
    label: "Falhas",
    color: "#f43f5e",
  },
  pending: {
    label: "Pendentes",
    color: "#64748b",
  },
} satisfies ChartConfig;

const opensChartConfig = {
  opens: {
    label: "Aberturas",
    color: "#0F9FDF",
  },
} satisfies ChartConfig;

function formatDateTime(value: string) {
  return new Date(value).toLocaleString("pt-BR");
}

const STATUS_VARIANT: Record<string, "default" | "secondary" | "destructive"> = {
  SUCCESS: "default",
  PENDING: "secondary",
  FAILED: "destructive",
};

function formatDate(value: string | null) {
  if (!value) return "—";
  return new Date(value).toLocaleString("pt-BR");
}

interface DashboardRelatorioProps {
  campaignId: string;
}

export function DashboardRelatorio({ campaignId }: DashboardRelatorioProps) {
  const {
    campaignTitle,
    summary,
    opens,
    logs,
    searchTerm,
    page,
    pageSize,
    isLoading,
    isRetrying,
    loadReport,
    setSearchTerm,
    setPage,
    retryFailed,
  } = useCampaignReportStore();

  useEffect(() => {
    loadReport(campaignId);
  }, [campaignId, loadReport]);

  const failedLogs = useMemo(() => logs.filter((log) => log.status === "FAILED"), [logs]);

  const filteredFailedLogs = useMemo(() => {
    const term = searchTerm.trim().toLowerCase();
    if (!term) return failedLogs;
    return failedLogs.filter((log) => log.contact.email.toLowerCase().includes(term));
  }, [failedLogs, searchTerm]);

  const totalPages = Math.max(1, Math.ceil(filteredFailedLogs.length / pageSize));
  const paginatedLogs = filteredFailedLogs.slice((page - 1) * pageSize, page * pageSize);

  const timelineData = useMemo(() => {
    if (!logs || logs.length === 0) {
      return [
        { time: "Início", success: 0, failed: 0, pending: summary.pending },
        { time: "Atual", success: summary.success, failed: summary.failed, pending: 0 },
      ];
    }

    const groups: Record<string, { time: string; success: number; failed: number; pending: number }> = {};

    logs.forEach((log) => {
      const dateObj = log.sentAt ? new Date(log.sentAt) : new Date();
      const timeKey = dateObj.toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" });
      if (!groups[timeKey]) {
        groups[timeKey] = { time: timeKey, success: 0, failed: 0, pending: 0 };
      }
      if (log.status === "SUCCESS") groups[timeKey].success += 1;
      else if (log.status === "FAILED") groups[timeKey].failed += 1;
      else groups[timeKey].pending += 1;
    });

    const items = Object.values(groups);
    if (items.length === 1) {
      return [
        { time: "Início", success: 0, failed: 0, pending: 0 },
        items[0],
      ];
    }
    return items;
  }, [logs, summary]);

  async function handleRetry() {
    const result = await retryFailed();
    if (!result) {
      toast.error("Não foi possível reenviar as falhas.");
      return;
    }
    toast.success(
      `Reenvio concluído: ${result.succeeded} de ${result.retried} recuperados.`
    );
  }

  return (
    <div className="flex flex-col gap-6">
      {/* 4-col desktop, 2-col tablet, 1-col mobile KPI grid */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card className="bg-white border border-zinc-200/80 shadow-xs rounded-2xl p-5">
          <CardHeader className="p-0 pb-2">
            <CardTitle className="text-xs font-bold uppercase tracking-wider text-zinc-500">Total</CardTitle>
          </CardHeader>
          <CardContent className="p-0 text-2xl font-extrabold text-zinc-900">{summary.total.toLocaleString("pt-BR")}</CardContent>
        </Card>

        <Card className="bg-white border border-zinc-200/80 shadow-xs rounded-2xl p-5">
          <CardHeader className="p-0 pb-2">
            <CardTitle className="text-xs font-bold uppercase tracking-wider text-zinc-500">Enviados</CardTitle>
          </CardHeader>
          <CardContent className="p-0 text-2xl font-extrabold text-emerald-600">
            {summary.success.toLocaleString("pt-BR")}
          </CardContent>
        </Card>

        <Card className="bg-white border border-zinc-200/80 shadow-xs rounded-2xl p-5">
          <CardHeader className="p-0 pb-2">
            <CardTitle className="text-xs font-bold uppercase tracking-wider text-zinc-500">Falhas</CardTitle>
          </CardHeader>
          <CardContent className="p-0 text-2xl font-extrabold text-rose-600">
            {summary.failed.toLocaleString("pt-BR")}
          </CardContent>
        </Card>

        <Card className="bg-white border border-zinc-200/80 shadow-xs rounded-2xl p-5">
          <CardHeader className="p-0 pb-2">
            <CardTitle className="text-xs font-bold uppercase tracking-wider text-zinc-500">Pendentes</CardTitle>
          </CardHeader>
          <CardContent className="p-0 text-2xl font-extrabold text-zinc-900">{summary.pending.toLocaleString("pt-BR")}</CardContent>
        </Card>
      </div>

      {/* Métricas de Abertura */}
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <Card className="bg-white border border-zinc-200/80 shadow-xs rounded-2xl p-5">
          <CardHeader className="p-0 pb-2">
            <CardTitle className="text-xs font-bold uppercase tracking-wider text-zinc-500">Total de Aberturas</CardTitle>
          </CardHeader>
          <CardContent className="p-0 text-2xl font-extrabold text-[#0F9FDF]">{opens.total.toLocaleString("pt-BR")}</CardContent>
        </Card>

        <Card className="bg-white border border-zinc-200/80 shadow-xs rounded-2xl p-5">
          <CardHeader className="p-0 pb-2">
            <CardTitle className="text-xs font-bold uppercase tracking-wider text-zinc-500">Aberturas Únicas</CardTitle>
          </CardHeader>
          <CardContent className="p-0 text-2xl font-extrabold text-[#0F9FDF]">{opens.unique.toLocaleString("pt-BR")}</CardContent>
        </Card>

        <Card className="bg-white border border-zinc-200/80 shadow-xs rounded-2xl p-5">
          <CardHeader className="p-0 pb-2">
            <CardTitle className="text-xs font-bold uppercase tracking-wider text-zinc-500">Taxa de Abertura</CardTitle>
          </CardHeader>
          <CardContent className="p-0 text-2xl font-extrabold text-[#0F9FDF]">{opens.rate.toLocaleString("pt-BR")}%</CardContent>
        </Card>
      </div>

      {/* Gráfico de Evolução Temporal com Shadcn Area Chart */}
      {summary.total > 0 && (
        <Card className="bg-white border border-zinc-200/80 shadow-xs rounded-2xl p-5 sm:p-6 space-y-4">
          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-zinc-100 pb-3">
            <div>
              <h3 className="text-base font-bold text-zinc-900 flex items-center gap-2">
                <Activity className="w-4.5 h-4.5 text-[#0F9FDF]" />
                Linha do Tempo de Processamento do Disparo
              </h3>
              <p className="text-xs text-zinc-500 mt-0.5">
                Monitoramento de volumes entregues, falhas e pendências ao longo do tempo.
              </p>
            </div>

            <div className="flex items-center gap-3 text-xs font-semibold">
              <div className="flex items-center gap-1.5">
                <span className="w-2.5 h-2.5 rounded-full bg-[#10b981]" />
                <span className="text-zinc-700">Entregues</span>
              </div>
              <div className="flex items-center gap-1.5">
                <span className="w-2.5 h-2.5 rounded-full bg-[#f43f5e]" />
                <span className="text-zinc-700">Falhas</span>
              </div>
            </div>
          </div>

          <div className="pt-2 pb-2">
            <ChartContainer config={reportChartConfig} className="h-56 w-full aspect-auto">
              <AreaChart data={timelineData} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
                <defs>
                  <linearGradient id="fillReportSuccess" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="5%" stopColor="var(--color-success)" stopOpacity={0.4} />
                    <stop offset="95%" stopColor="var(--color-success)" stopOpacity={0.01} />
                  </linearGradient>
                  <linearGradient id="fillReportFailed" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="5%" stopColor="var(--color-failed)" stopOpacity={0.4} />
                    <stop offset="95%" stopColor="var(--color-failed)" stopOpacity={0.01} />
                  </linearGradient>
                </defs>
                <CartesianGrid vertical={false} strokeDasharray="3 3" className="stroke-zinc-200/60" />
                <XAxis
                  dataKey="time"
                  tickLine={false}
                  tickMargin={8}
                  axisLine={false}
                  className="text-[11px] font-semibold fill-zinc-500"
                />
                <YAxis
                  tickLine={false}
                  axisLine={false}
                  className="text-[11px] font-semibold fill-zinc-500"
                  allowDecimals={false}
                />
                <ChartTooltip content={<ChartTooltipContent indicator="dot" />} />
                <Area
                  dataKey="success"
                  type="monotone"
                  fill="url(#fillReportSuccess)"
                  fillOpacity={0.5}
                  stroke="var(--color-success)"
                  strokeWidth={2}
                  activeDot={{ r: 4 }}
                />
                <Area
                  dataKey="failed"
                  type="monotone"
                  fill="url(#fillReportFailed)"
                  fillOpacity={0.5}
                  stroke="var(--color-failed)"
                  strokeWidth={2}
                  activeDot={{ r: 4 }}
                />
              </AreaChart>
            </ChartContainer>
          </div>
        </Card>
      )}

      {/* Gráfico de Aberturas ao Longo do Tempo */}
      {opens.timeline.length > 0 && (
        <Card className="bg-white border border-zinc-200/80 shadow-xs rounded-2xl p-5 sm:p-6 space-y-4">
          <div className="border-b border-zinc-100 pb-3">
            <h3 className="text-base font-bold text-zinc-900 flex items-center gap-2">
              <MailOpen className="w-4.5 h-4.5 text-[#0F9FDF]" />
              Aberturas ao Longo do Tempo
            </h3>
            <p className="text-xs text-zinc-500 mt-0.5">
              Por hora nas primeiras 48h após o envio, depois agregado por dia.
            </p>
          </div>

          <div className="pt-2 pb-2">
            <ChartContainer config={opensChartConfig} className="h-56 w-full aspect-auto">
              <AreaChart data={opens.timeline} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
                <defs>
                  <linearGradient id="fillReportOpens" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="5%" stopColor="var(--color-opens)" stopOpacity={0.4} />
                    <stop offset="95%" stopColor="var(--color-opens)" stopOpacity={0.01} />
                  </linearGradient>
                </defs>
                <CartesianGrid vertical={false} strokeDasharray="3 3" className="stroke-zinc-200/60" />
                <XAxis
                  dataKey="label"
                  tickLine={false}
                  tickMargin={8}
                  axisLine={false}
                  className="text-[11px] font-semibold fill-zinc-500"
                />
                <YAxis
                  tickLine={false}
                  axisLine={false}
                  className="text-[11px] font-semibold fill-zinc-500"
                  allowDecimals={false}
                />
                <ChartTooltip content={<ChartTooltipContent indicator="dot" />} />
                <Area
                  dataKey="opens"
                  type="monotone"
                  fill="url(#fillReportOpens)"
                  fillOpacity={0.5}
                  stroke="var(--color-opens)"
                  strokeWidth={2}
                  activeDot={{ r: 4 }}
                />
              </AreaChart>
            </ChartContainer>
          </div>
        </Card>
      )}

      {/* Lista de Subscribers que Abriram */}
      {opens.openers.length > 0 && (
        <Card className="bg-white border border-zinc-200/80 shadow-xs rounded-2xl overflow-hidden">
          <CardHeader className="p-5 sm:p-6 border-b border-zinc-100">
            <CardTitle className="text-base font-bold text-zinc-900">Quem abriu — {campaignTitle}</CardTitle>
          </CardHeader>
          <CardContent className="p-0">
            <div className="overflow-x-auto w-full">
              <Table className="w-full text-left text-xs">
                <TableHeader className="bg-zinc-50 border-b border-zinc-200">
                  <TableRow>
                    <TableHead className="font-bold text-zinc-700 uppercase">Contato</TableHead>
                    <TableHead className="font-bold text-zinc-700 uppercase">Primeira Abertura</TableHead>
                    <TableHead className="text-right font-bold text-zinc-700 uppercase">Aberturas</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {opens.openers.map((opener) => (
                    <TableRow key={opener.contactId} className="hover:bg-zinc-50/80 transition-colors">
                      <TableCell className="font-bold text-zinc-900">
                        {opener.name ? `${opener.name} — ${opener.email}` : opener.email}
                      </TableCell>
                      <TableCell className="text-zinc-600">{formatDateTime(opener.firstOpenedAt)}</TableCell>
                      <TableCell className="text-right font-mono font-bold text-zinc-800">{opener.openCount}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </CardContent>
        </Card>
      )}

      <Card className="bg-white border border-zinc-200/80 shadow-xs rounded-2xl overflow-hidden">
        <CardHeader className="p-5 sm:p-6 border-b border-zinc-100 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
          <div>
            <CardTitle className="text-base font-bold text-zinc-900">Falhas de envio — {campaignTitle}</CardTitle>
          </div>
          <div className="flex flex-col sm:flex-row gap-2.5 sm:items-center">
            <Input
              placeholder="Buscar por e-mail do contato..."
              value={searchTerm}
              onChange={(event) => setSearchTerm(event.target.value)}
              className="sm:w-72 h-10 text-xs rounded-xl bg-white border-zinc-300 text-zinc-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0F9FDF] focus-visible:ring-offset-2"
            />
            <Button
              onClick={handleRetry}
              disabled={isRetrying || failedLogs.length === 0}
              variant="destructive"
              className="h-10 px-4 text-xs font-bold rounded-xl shadow-xs shrink-0 cursor-pointer"
            >
              {isRetrying ? "Reenviando..." : "Reenviar falhas"}
            </Button>
          </div>
        </CardHeader>

        <CardContent className="p-0">
          <div className="overflow-x-auto w-full">
            <Table className="w-full text-left text-xs">
              <TableHeader className="bg-zinc-50 border-b border-zinc-200">
                <TableRow>
                  <TableHead className="font-bold text-zinc-700 uppercase">Contato</TableHead>
                  <TableHead className="font-bold text-zinc-700 uppercase">Status</TableHead>
                  <TableHead className="font-bold text-zinc-700 uppercase">Enviado em</TableHead>
                  <TableHead className="font-bold text-zinc-700 uppercase">Erro</TableHead>
                  <TableHead className="text-right font-bold text-zinc-700 uppercase">Tentativas</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {isLoading && (
                  <TableRow>
                    <TableCell colSpan={5} className="text-center py-8 text-zinc-500 font-medium">
                      Carregando relatório...
                    </TableCell>
                  </TableRow>
                )}

                {!isLoading && paginatedLogs.length === 0 && (
                  <TableRow>
                    <TableCell colSpan={5} className="text-center py-8 text-zinc-500 font-medium">
                      Nenhuma falha encontrada.
                    </TableCell>
                  </TableRow>
                )}

                {paginatedLogs.map((log) => (
                  <TableRow key={log.id} className="hover:bg-zinc-50/80 transition-colors">
                    <TableCell className="font-bold text-zinc-900">{log.contact.email}</TableCell>
                    <TableCell>
                      <Badge variant={STATUS_VARIANT[log.status] ?? "secondary"} className="text-[10px] uppercase font-bold">
                        {getLogStatusLabel(log.status)}
                      </Badge>
                    </TableCell>
                    <TableCell className="text-zinc-600">{formatDate(log.sentAt)}</TableCell>
                    <TableCell className="max-w-xs truncate text-rose-700 font-mono text-[11px]" title={log.errorMessage ?? undefined}>
                      {log.errorMessage ?? "—"}
                    </TableCell>
                    <TableCell className="text-right font-mono font-bold text-zinc-800">{log.retryCount}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>

          <div className="p-4 bg-zinc-50/60 border-t border-zinc-200 flex items-center justify-between gap-3 text-xs">
            <span className="text-zinc-600 font-medium">
              Página <strong>{page}</strong> de <strong>{totalPages}</strong> — {filteredFailedLogs.length} falha(s)
            </span>
            <div className="flex gap-2">
              <Button
                variant="outline"
                size="sm"
                disabled={page <= 1}
                onClick={() => setPage(page - 1)}
                className="h-9 text-xs rounded-xl font-semibold border-zinc-300"
              >
                Anterior
              </Button>
              <Button
                variant="outline"
                size="sm"
                disabled={page >= totalPages}
                onClick={() => setPage(page + 1)}
                className="h-9 text-xs rounded-xl font-semibold border-zinc-300"
              >
                Próxima
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}