"use client";

import { useState, useTransition } from "react";
import Link from "next/link";
import {
  Mail,
  Send,
  Eye,
  MousePointerClick,
  CheckCircle2,
  AlertTriangle,
  ArrowUpRight,
  ChevronRight,
  Calendar,
  Sparkles,
  ShieldCheck,
  Plus,
  Loader2,
  Activity,
} from "lucide-react";
import { Card, CardHeader, CardTitle, CardContent } from "@/shared/components/ui/card";
import { Badge } from "@/shared/components/ui/badge";
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartConfig,
} from "@/shared/components/ui/chart";
import { Breadcrumb } from "@/shared/components/ui/breadcrumb";
import { AreaChart, Area, XAxis, YAxis, CartesianGrid } from "recharts";
import { getCampaignStatusLabel, getCampaignStatusBadgeStyle } from "../utils/status-labels";
import { getDashboardAnalyticsAction } from "../actions/get-dashboard-analytics-action";
import {
  DashboardPeriod,
  DashboardAnalyticsResponse,
} from "../use-cases/get-dashboard-analytics-use-case";

interface CampaignItem {
  id: string;
  title: string;
  subject: string;
  status: string;
  sender?: {
    name: string;
  };
}

interface OverviewDashboardViewProps {
  campaigns: CampaignItem[];
  initialAnalytics: DashboardAnalyticsResponse | null;
  user?: {
    name?: string | null;
    email?: string | null;
  };
}

const chartConfig = {
  envios: {
    label: "Envios",
    color: "#0F9FDF", // Primary Brand Cyan-Blue
  },
  aberturas: {
    label: "Aberturas",
    color: "#10b981", // Emerald 500
  },
  cliques: {
    label: "Cliques",
    color: "#c084fc", // Violet 400
  },
} satisfies ChartConfig;

const DEFAULT_ANALYTICS: DashboardAnalyticsResponse = {
  period: "30D",
  activeCampaigns: 0,
  totalDispatches: 0,
  totalDelivered: 0,
  openRate: 0,
  clickRate: 0,
  healthRate: 100,
  bouncesCount: 0,
  timeSeriesData: [
    { label: "Semana 1", envios: 0, aberturas: 0, cliques: 0 },
    { label: "Semana 2", envios: 0, aberturas: 0, cliques: 0 },
    { label: "Semana 3", envios: 0, aberturas: 0, cliques: 0 },
    { label: "Semana 4", envios: 0, aberturas: 0, cliques: 0 },
  ],
  providerReputations: [
    { provider: "Gmail (Google)", deliveredRate: 100, deliveredText: "100% entregue" },
    { provider: "Outlook / Microsoft", deliveredRate: 100, deliveredText: "100% entregue" },
    { provider: "Yahoo / AOL", deliveredRate: 100, deliveredText: "100% entregue" },
    { provider: "Provedores Corporativos", deliveredRate: 100, deliveredText: "100% entregue" },
  ],
};

export function OverviewDashboardView({
  campaigns,
  initialAnalytics,
}: OverviewDashboardViewProps) {
  const [analytics, setAnalytics] = useState<DashboardAnalyticsResponse>(
    initialAnalytics || DEFAULT_ANALYTICS
  );
  const [period, setPeriod] = useState<DashboardPeriod>(analytics.period || "30D");
  const [activeMetric, setActiveMetric] = useState<"all" | "envios" | "aberturas" | "cliques">("all");
  const [isPending, startTransition] = useTransition();

  const handlePeriodChange = (newPeriod: DashboardPeriod) => {
    setPeriod(newPeriod);
    startTransition(async () => {
      const data = await getDashboardAnalyticsAction(newPeriod);
      if (data) {
        setAnalytics(data);
      }
    });
  };

  return (
    <div className="w-full max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-6 pb-12">
      {/* ── HEADER DA VISÃO GERAL & FILTROS DE PERÍODO ───────────────────── */}
      <div className="flex items-center justify-between gap-4 pb-4 border-b border-zinc-200/80">
        <Breadcrumb
          items={[
            { label: "Início", href: "/" },
            { label: "Visão Geral & Performance" },
          ]}
        />

        {/* Filtros por Período */}
        <div className="flex items-center gap-1.5 bg-zinc-100 p-1.5 rounded-2xl border border-zinc-200/80 shrink-0 overflow-x-auto max-w-full scrollbar-none">
          {(["7D", "30D", "90D", "CUSTOM"] as DashboardPeriod[]).map((p) => {
            const labels: Record<DashboardPeriod, string> = {
              "7D": "Últimos 7 dias",
              "30D": "Últimos 30 dias",
              "90D": "Últimos 90 dias",
              CUSTOM: "Personalizado",
            };

            const isSelected = period === p;

            return (
              <button
                key={p}
                type="button"
                disabled={isPending}
                onClick={() => handlePeriodChange(p)}
                className={`px-3 py-1.5 text-xs font-bold rounded-xl transition-all flex items-center gap-1.5 ${
                  isSelected
                    ? "bg-[#0F9FDF] text-white shadow-2xs"
                    : "text-zinc-600 hover:text-zinc-900 hover:bg-zinc-200/60"
                } ${isPending ? "opacity-70 cursor-not-allowed" : ""}`}
              >
                {p === "CUSTOM" && <Calendar className="w-3.5 h-3.5" />}
                <span>{labels[p]}</span>
                {isPending && isSelected && <Loader2 className="w-3 h-3 animate-spin ml-1" />}
              </button>
            );
          })}
        </div>
      </div>

      {/* ── CARDS DE KPIS CONSOLIDADOS (GRID 5 COLS DESKTOP) ─────────────── */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
        {/* KPI 1: Campanhas Ativas */}
        <Card className="bg-white border border-zinc-200/80 shadow-xs rounded-2xl p-5 space-y-2">
          <CardHeader className="p-0 flex flex-row items-center justify-between">
            <CardTitle className="text-xs font-bold uppercase tracking-wider text-zinc-500">
              Campanhas Ativas
            </CardTitle>
            <div className="p-2 rounded-xl bg-[#E7F6FD] text-[#0F9FDF] border border-[#0F9FDF]/20">
              <Mail className="w-4 h-4" />
            </div>
          </CardHeader>
          <CardContent className="p-0">
            <div className="text-2xl font-extrabold text-zinc-900">{analytics.activeCampaigns}</div>
            <div className="flex items-center gap-1 text-[11px] font-semibold text-emerald-700 mt-1">
              <ArrowUpRight className="w-3.5 h-3.5" />
              <span>Base em atividade</span>
            </div>
          </CardContent>
        </Card>

        {/* KPI 2: E-mails Enviados */}
        <Card className="bg-white border border-zinc-200/80 shadow-xs rounded-2xl p-5 space-y-2">
          <CardHeader className="p-0 flex flex-row items-center justify-between">
            <CardTitle className="text-xs font-bold uppercase tracking-wider text-zinc-500">
              E-mails Enviados
            </CardTitle>
            <div className="p-2 rounded-xl bg-[#E7F6FD] text-[#0F9FDF] border border-[#0F9FDF]/20">
              <Send className="w-4 h-4" />
            </div>
          </CardHeader>
          <CardContent className="p-0">
            <div className="text-2xl font-extrabold text-zinc-900">
              {analytics.totalDispatches.toLocaleString("pt-BR")}
            </div>
            <div className="flex items-center gap-1 text-[11px] font-semibold text-[#0F9FDF] mt-1">
              <CheckCircle2 className="w-3.5 h-3.5 text-emerald-600" />
              <span>{analytics.totalDelivered.toLocaleString("pt-BR")} entregues</span>
            </div>
          </CardContent>
        </Card>

        {/* KPI 3: Taxa de Abertura */}
        <Card className="bg-white border border-zinc-200/80 shadow-xs rounded-2xl p-5 space-y-2">
          <CardHeader className="p-0 flex flex-row items-center justify-between">
            <CardTitle className="text-xs font-bold uppercase tracking-wider text-zinc-500">
              Taxa de Abertura
            </CardTitle>
            <div className="p-2 rounded-xl bg-emerald-50 text-emerald-600 border border-emerald-100">
              <Eye className="w-4 h-4" />
            </div>
          </CardHeader>
          <CardContent className="p-0">
            <div className="text-2xl font-extrabold text-emerald-600">{analytics.openRate}%</div>
            <div className="flex items-center gap-1 text-[11px] font-semibold text-emerald-700 mt-1">
              <ArrowUpRight className="w-3.5 h-3.5 text-emerald-600" />
              <span>Entregabilidade direta</span>
            </div>
          </CardContent>
        </Card>

        {/* KPI 4: Taxa de Cliques (CTR) */}
        <Card className="bg-white border border-zinc-200/80 shadow-xs rounded-2xl p-5 space-y-2">
          <CardHeader className="p-0 flex flex-row items-center justify-between">
            <CardTitle className="text-xs font-bold uppercase tracking-wider text-zinc-500">
              Taxa de Cliques (CTR)
            </CardTitle>
            <div className="p-2 rounded-xl bg-[#E7F6FD] text-[#0F9FDF] border border-[#0F9FDF]/20">
              <MousePointerClick className="w-4 h-4" />
            </div>
          </CardHeader>
          <CardContent className="p-0">
            <div className="text-2xl font-extrabold text-[#0F9FDF]">{analytics.clickRate}%</div>
            <div className="flex items-center gap-1 text-[11px] font-semibold text-[#0F9FDF] mt-1">
              <Sparkles className="w-3.5 h-3.5 text-[#0F9FDF]" />
              <span>Engajamento calculado</span>
            </div>
          </CardContent>
        </Card>

        {/* KPI 5: Saúde da Entregabilidade */}
        <Card className="bg-white border border-zinc-200/80 shadow-xs rounded-2xl p-5 space-y-2">
          <CardHeader className="p-0 flex flex-row items-center justify-between">
            <CardTitle className="text-xs font-bold uppercase tracking-wider text-zinc-500">
              Saúde de Entrega
            </CardTitle>
            <div className="p-2 rounded-xl bg-emerald-50 text-emerald-600 border border-emerald-100">
              <ShieldCheck className="w-4 h-4" />
            </div>
          </CardHeader>
          <CardContent className="p-0">
            <div className="text-2xl font-extrabold text-emerald-600">{analytics.healthRate}%</div>
            <div className="flex items-center gap-1 text-[11px] font-semibold text-rose-600 mt-1">
              <AlertTriangle className="w-3.5 h-3.5 text-rose-500" />
              <span>{analytics.bouncesCount} bounces / falhas</span>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* ── GRÁFICOS DE DESEMPEHO AO LONGO DO TEMPO ───────────────────────── */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Gráfico Recharts do Shadcn UI (Area Chart com Linear Gradients) */}
        <Card className="lg:col-span-2 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]" />
                Desempenho de Disparos, Aberturas e Cliques
              </h3>
              <p className="text-xs text-zinc-500 mt-0.5">
                Evolução comparativa por período (
                {period === "7D" ? "Diário" : period === "90D" ? "Trimestral" : "Mensal"})
              </p>
            </div>

            {/* Filtros interativos de métrica para o Area Chart */}
            <div className="flex items-center gap-1.5 bg-zinc-100 p-1 rounded-xl border border-zinc-200/80 shrink-0 flex-wrap">
              <button
                type="button"
                onClick={() => setActiveMetric("all")}
                className={`px-2.5 py-1 text-[11px] font-bold rounded-lg transition-all ${
                  activeMetric === "all"
                    ? "bg-white text-zinc-900 shadow-2xs"
                    : "text-zinc-600 hover:text-zinc-900"
                }`}
              >
                Todas
              </button>
              <button
                type="button"
                onClick={() => setActiveMetric("envios")}
                className={`px-2.5 py-1 text-[11px] font-bold rounded-lg transition-all flex items-center gap-1.5 ${
                  activeMetric === "envios"
                    ? "bg-white text-[#0F9FDF] shadow-2xs"
                    : "text-zinc-600 hover:text-zinc-900"
                }`}
              >
                <span className="w-2 h-2 rounded-full bg-[#0F9FDF]" />
                Envios
              </button>
              <button
                type="button"
                onClick={() => setActiveMetric("aberturas")}
                className={`px-2.5 py-1 text-[11px] font-bold rounded-lg transition-all flex items-center gap-1.5 ${
                  activeMetric === "aberturas"
                    ? "bg-white text-emerald-600 shadow-2xs"
                    : "text-zinc-600 hover:text-zinc-900"
                }`}
              >
                <span className="w-2 h-2 rounded-full bg-[#10b981]" />
                Aberturas
              </button>
              <button
                type="button"
                onClick={() => setActiveMetric("cliques")}
                className={`px-2.5 py-1 text-[11px] font-bold rounded-lg transition-all flex items-center gap-1.5 ${
                  activeMetric === "cliques"
                    ? "bg-white text-violet-600 shadow-2xs"
                    : "text-zinc-600 hover:text-zinc-900"
                }`}
              >
                <span className="w-2 h-2 rounded-full bg-[#c084fc]" />
                Cliques
              </button>
            </div>
          </div>

          {/* Renderizador Shadcn Area Chart com Gradiente Linear */}
          <div className="pt-2 pb-2">
            <ChartContainer config={chartConfig} className="h-72 w-full aspect-auto">
              <AreaChart data={analytics.timeSeriesData} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
                <defs>
                  <linearGradient id="fillEnvios" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="5%" stopColor="var(--color-envios)" stopOpacity={0.4} />
                    <stop offset="95%" stopColor="var(--color-envios)" stopOpacity={0.01} />
                  </linearGradient>
                  <linearGradient id="fillAberturas" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="5%" stopColor="var(--color-aberturas)" stopOpacity={0.4} />
                    <stop offset="95%" stopColor="var(--color-aberturas)" stopOpacity={0.01} />
                  </linearGradient>
                  <linearGradient id="fillCliques" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="5%" stopColor="var(--color-cliques)" stopOpacity={0.4} />
                    <stop offset="95%" stopColor="var(--color-cliques)" stopOpacity={0.01} />
                  </linearGradient>
                </defs>
                <CartesianGrid vertical={false} strokeDasharray="3 3" className="stroke-zinc-200/60" />
                <XAxis
                  dataKey="label"
                  tickLine={false}
                  tickMargin={10}
                  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" />} />
                {(activeMetric === "all" || activeMetric === "envios") && (
                  <Area
                    dataKey="envios"
                    type="natural"
                    fill="url(#fillEnvios)"
                    fillOpacity={0.6}
                    stroke="var(--color-envios)"
                    strokeWidth={2.5}
                    activeDot={{ r: 5, strokeWidth: 0 }}
                  />
                )}
                {(activeMetric === "all" || activeMetric === "aberturas") && (
                  <Area
                    dataKey="aberturas"
                    type="natural"
                    fill="url(#fillAberturas)"
                    fillOpacity={0.6}
                    stroke="var(--color-aberturas)"
                    strokeWidth={2.5}
                    activeDot={{ r: 5, strokeWidth: 0 }}
                  />
                )}
                {(activeMetric === "all" || activeMetric === "cliques") && (
                  <Area
                    dataKey="cliques"
                    type="natural"
                    fill="url(#fillCliques)"
                    fillOpacity={0.6}
                    stroke="var(--color-cliques)"
                    strokeWidth={2.5}
                    activeDot={{ r: 5, strokeWidth: 0 }}
                  />
                )}
              </AreaChart>
            </ChartContainer>
          </div>
        </Card>

        {/* Card Lateral: Saúde de Entregabilidade por Provedor */}
        <Card className="bg-white border border-zinc-200/80 shadow-xs rounded-2xl p-5 sm:p-6 space-y-4 flex flex-col justify-between">
          <div>
            <h3 className="text-base font-bold text-zinc-900 flex items-center gap-2 border-b border-zinc-100 pb-3">
              <ShieldCheck className="w-4.5 h-4.5 text-emerald-600" />
              Provedores de Destino (Reputações)
            </h3>
            <p className="text-xs text-zinc-500 mt-2 leading-relaxed">
              Monitoramento automático dos algoritmos de segurança anti-spam e inbox placement.
            </p>

            <div className="mt-4 space-y-3.5 text-xs">
              {analytics.providerReputations.map((provider) => (
                <div key={provider.provider}>
                  <div className="flex justify-between font-bold text-zinc-800 mb-1">
                    <span>{provider.provider}</span>
                    <span className="text-emerald-700">{provider.deliveredText}</span>
                  </div>
                  <div className="w-full bg-zinc-100 h-2 rounded-full overflow-hidden">
                    <div
                      className="bg-emerald-500 h-full rounded-full transition-all duration-500"
                      style={{ width: `${Math.max(0, Math.min(100, provider.deliveredRate))}%` }}
                    />
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="pt-3 border-t border-zinc-100">
            <Link
              href="/settings/domains"
              className="w-full py-2.5 px-4 bg-[#E7F6FD] hover:bg-[#D4F0FC] text-[#0F9FDF] text-xs font-bold rounded-xl transition-colors flex items-center justify-center gap-1.5"
            >
              <span>Gerenciar Autenticação SPF/DKIM</span>
              <ChevronRight className="w-4 h-4" />
            </Link>
          </div>
        </Card>
      </div>

      {/* ── RESUMO DAS CAMPANHAS MAIS RECENTES ───────────────────────────── */}
      <div className="bg-white rounded-2xl border border-zinc-200/80 shadow-xs 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">
              <Mail className="w-4.5 h-4.5 text-[#0F9FDF]" />
              Campanhas Recentes
            </h3>
            <p className="text-xs text-zinc-500 mt-0.5">
              Acesso rápido e status das suas últimas newsletters.
            </p>
          </div>

          <Link
            href="/campaigns"
            className="text-xs font-bold text-[#0F9FDF] hover:text-[#0C87BD] flex items-center gap-1 hover:underline self-start sm:self-auto"
          >
            <span>Ver todas no menu Campanhas</span>
            <ChevronRight className="w-4 h-4" />
          </Link>
        </div>

        <div className="space-y-3">
          {campaigns.length === 0 ? (
            <div className="p-6 text-center text-zinc-500 space-y-2">
              <p className="text-xs font-semibold text-zinc-700">Nenhuma campanha criada ainda.</p>
              <Link
                href="/campaigns/new"
                className="inline-flex items-center gap-1.5 text-xs font-bold text-[#0F9FDF] hover:underline"
              >
                <Plus className="w-3.5 h-3.5" />
                <span>Criar primeira campanha agora</span>
              </Link>
            </div>
          ) : (
            campaigns.slice(0, 5).map((campaign) => (
              <Link key={campaign.id} href={`/campaigns/${campaign.id}`} className="block group">
                <div className="p-4 rounded-xl bg-zinc-50/60 hover:bg-[#E7F6FD]/50 border border-zinc-200/80 hover:border-[#0F9FDF]/30 transition-all flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                  <div className="space-y-0.5 min-w-0">
                    <h4 className="text-sm font-bold text-zinc-900 group-hover:text-[#0F9FDF] transition-colors truncate">
                      {campaign.title}
                    </h4>
                    <p className="text-xs text-zinc-500 truncate">
                      Remetente: <span className="text-zinc-800 font-semibold">{campaign.sender?.name || "Padrão"}</span> · Assunto: <span className="text-zinc-800 font-semibold">{campaign.subject}</span>
                    </p>
                  </div>

                  <div className="flex items-center gap-3 shrink-0">
                    <Badge
                      variant="outline"
                      className={`text-[10px] font-bold px-2.5 py-0.5 rounded-full uppercase ${getCampaignStatusBadgeStyle(campaign.status)}`}
                    >
                      {getCampaignStatusLabel(campaign.status)}
                    </Badge>
                    <ChevronRight className="w-4 h-4 text-zinc-400 group-hover:text-[#0F9FDF] group-hover:translate-x-0.5 transition-all" />
                  </div>
                </div>
              </Link>
            ))
          )}
        </div>
      </div>
    </div>
  );
}