import BreadCrumbLink from "@/layouts/shared/page.breadcrumbLink";
import { createRoleProtectedLoader } from "@/lib/features/protectedFetcher";
import { getCampaign, getCampaignRecipients, getAudienceMembers } from "@/lib/features/notifications/action";
import { FEATURE_SLUGS } from "@/lib/role-helpers";
import type { Route } from "./+types/page";
import React, { useEffect, useState, useMemo, useRef } from "react";
import {
  Button,
  Card,
  Grid,
  Group,
  Stack,
  Text,
  Title,
  Badge,
  Tabs,
  Table,
  Pagination,
  TextInput,
  LoadingOverlay,
  SegmentedControl,
  Tooltip,
  Flex,
  Box,
  Avatar,
  ActionIcon,
} from "@mantine/core";
import {
  IconArrowLeft,
  IconSearch,
  IconUser,
  IconMapPin,
  IconDeviceAnalytics,
  IconMail,
  IconSettings,
  IconCalendar,
  IconInfoCircle,
  IconDownload,
  IconPrinter,
  IconArrowsMaximize,
 
} from "@tabler/icons-react";
import ReactECharts from "echarts-for-react";
import { Chart } from "react-google-charts";
import { useNavigate, useParams } from "react-router";
import { ContextualLogs } from "@/components/blocks/activity-logs/ContextualLogs";
import type { Campaign } from "../(widgets)/CampaignsTable/types";
import * as XLSX from "xlsx";

export const handle = {
  breadcrumb: () => (
    <BreadCrumbLink
      links={[
        { label: "Notifications", to: "/admin/notifications" },
        { label: "Campaign Report" },
      ]}
    />
  ),
};

export const loader = createRoleProtectedLoader(
  FEATURE_SLUGS.notifications,
  "read",
  async ({ request, params }) => {
    const { id } = params as { id: string };
    const cookie = request.headers.get("Cookie") ?? "";
    const response = await getCampaign(id, { Cookie: cookie });
    return {
      campaign: response.success ? response.data : null,
      error: response.success ? undefined : response.message,
    };
  },
);

// ─── Custom Bar Chart with Y-axis, gridlines, and hover tooltips ─────────────
const CustomBarChart: React.FC<{
  data: { name: string; value: number }[];
  color: string;
}> = ({ data, color }) => {
  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
  const maxValue = Math.max(...data.map(d => d.value), 1);
  const BAR_AREA_HEIGHT = 180;
  const Y_AXIS_WIDTH = 40;
  const NUM_TICKS = 5;

  // Compute nice round tick values
  const tickStep = Math.ceil(maxValue / NUM_TICKS) || 1;
  const ticks = Array.from({ length: NUM_TICKS + 1 }, (_, i) => i * tickStep);

  return (
    <div style={{ width: "100%", padding: "8px 4px 0 0", fontFamily: "Inter, sans-serif" }}>
      <div style={{ display: "flex", gap: 0 }}>

        {/* ── Y-axis labels ── */}
        <div style={{
          width: Y_AXIS_WIDTH,
          height: BAR_AREA_HEIGHT,
          display: "flex",
          flexDirection: "column-reverse",
          justifyContent: "space-between",
          flexShrink: 0,
          paddingRight: 6,
          boxSizing: "border-box",
        }}>
          {ticks.map((tick) => (
            <div key={tick} style={{
              fontSize: 10,
              color: "#adb5bd",
              textAlign: "right",
              lineHeight: 1,
            }}>
              {tick >= 1000 ? `${(tick / 1000).toFixed(1)}k` : tick}
            </div>
          ))}
        </div>

        {/* ── Bars + gridlines area ── */}
        <div style={{ flex: 1, position: "relative" }}>
          {/* Horizontal gridlines */}
          <div style={{
            position: "absolute",
            inset: 0,
            height: BAR_AREA_HEIGHT,
            pointerEvents: "none",
          }}>
            {ticks.map((tick, ti) => {
              const pct = (tick / (tickStep * NUM_TICKS)) * 100;
              return (
                <div key={ti} style={{
                  position: "absolute",
                  bottom: `${pct}%`,
                  left: 0,
                  right: 0,
                  height: 1,
                  background: ti === 0 ? "#ced4da" : "#f1f3f5",
                  borderTop: ti === 0 ? "none" : "1px dashed #e9ecef",
                }} />
              );
            })}
          </div>

          {/* Bars row */}
          <div style={{
            display: "flex",
            alignItems: "flex-end",
            gap: 6,
            height: BAR_AREA_HEIGHT,
            position: "relative",
          }}>
            {data.map((item, i) => {
              const barHeightPx = Math.max((item.value / (tickStep * NUM_TICKS)) * BAR_AREA_HEIGHT, 4);
              const isHovered = hoveredIndex === i;
              return (
                <div
                  key={i}
                  style={{
                    flex: 1,
                    display: "flex",
                    flexDirection: "column",
                    alignItems: "center",
                    justifyContent: "flex-end",
                    height: "100%",
                    position: "relative",
                    cursor: "pointer",
                  }}
                  onMouseEnter={() => setHoveredIndex(i)}
                  onMouseLeave={() => setHoveredIndex(null)}
                >
                  {/* Tooltip */}
                  {isHovered && (
                    <div style={{
                      position: "absolute",
                      bottom: barHeightPx + 10,
                      left: "50%",
                      transform: "translateX(-50%)",
                      background: "rgba(15,20,40,0.93)",
                      color: "#fff",
                      borderRadius: 8,
                      padding: "8px 12px",
                      whiteSpace: "nowrap",
                      fontSize: 12,
                      zIndex: 999,
                      pointerEvents: "none",
                      boxShadow: "0 4px 16px rgba(0,0,0,0.25)",
                      lineHeight: 1.6,
                    }}>
                      <div style={{ fontWeight: 700, marginBottom: 2 }}>{item.name}</div>
                      <div style={{ color: "#adb5bd" }}>
                        Members:{" "}
                        <span style={{ color: "#fff", fontWeight: 600 }}>
                          {item.value.toLocaleString()}
                        </span>
                      </div>
                      {/* Arrow */}
                      <div style={{
                        position: "absolute",
                        top: "100%",
                        left: "50%",
                        transform: "translateX(-50%)",
                        width: 0,
                        height: 0,
                        borderLeft: "5px solid transparent",
                        borderRight: "5px solid transparent",
                        borderTop: "6px solid rgba(15,20,40,0.93)",
                      }} />
                    </div>
                  )}

                  {/* Bar */}
                  <div style={{
                    width: "70%",
                    height: barHeightPx,
                    background: isHovered ? color : `${color}b0`,
                    borderRadius: "5px 5px 0 0",
                    transition: "background 0.15s ease",
                    boxShadow: isHovered ? `0 0 0 2px ${color}44` : "none",
                  }} />
                </div>
              );
            })}
          </div>
        </div>
      </div>

      {/* Baseline */}
      <div style={{ marginLeft: Y_AXIS_WIDTH, height: 1, background: "#ced4da" }} />

      {/* X-axis labels */}
      <div style={{ display: "flex", gap: 6, marginTop: 6, marginLeft: Y_AXIS_WIDTH }}>
        {data.map((item, i) => (
          <div key={i} style={{
            flex: 1,
            fontSize: 10,
            color: hoveredIndex === i ? "#495057" : "#868e96",
            textAlign: "center",
            overflow: "hidden",
            textOverflow: "ellipsis",
            whiteSpace: "nowrap",
            fontWeight: hoveredIndex === i ? 600 : 400,
            transition: "color 0.15s ease",
          }}>
            {item.name}
          </div>
        ))}
      </div>
    </div>
  );
};

const CampaignReportPage: React.FC<Route.ComponentProps> = ({ loaderData }) => {

  const { campaign: initialCampaign, error } = loaderData as { campaign: Campaign | null; error?: string };
  const navigate = useNavigate();
  const params = useParams();
  const campaignId = params.id as string;

  const [campaign, setCampaign] = useState<Campaign | null>(initialCampaign);

  // Recipient list states
  const [recipients, setRecipients] = useState<any[]>([]);
  const [recipientsLoading, setRecipientsLoading] = useState(false);
  const [recipientsTotal, setRecipientsTotal] = useState(0);
  const [recipientsPage, setRecipientsPage] = useState(1);
  const [recipientsSearch, setRecipientsSearch] = useState("");
  const [recipientsTab, setRecipientsTab] = useState<string>("ALL");
  const [seenFilter, setSeenFilter] = useState<"ALL" | "SEEN" | "UNSEEN">("ALL");
  const recipientsPageSize = 10;
  const requestIdRef = useRef(0);
  const [exporting, setExporting] = useState(false);

  // Demographic display state
  const [demoMetric, setDemoMetric] = useState<"country" | "accountType" | "status">("country");
  const [demographicsFullscreen, setDemographicsFullscreen] = useState(false);
  const [pieFullscreen, setPieFullscreen] = useState(false);


  // Fetch recipients
  const loadRecipients = async (p: number, s?: string, st?: string, seen?: "ALL" | "SEEN" | "UNSEEN") => {
    if (!campaign) return;
    const reqId = ++requestIdRef.current;
    setRecipientsLoading(true);
    try {
      const offset = (p - 1) * recipientsPageSize;
      const searchTerm = s ?? recipientsSearch;
      const statusFilter = st === "ALL" ? undefined : st;
      const seenStatusFilter = seen === "ALL" ? undefined : seen === "SEEN" ? "seen" : seen === "UNSEEN" ? "unseen" : undefined;
      const res = await getCampaignRecipients(campaign.id, offset, recipientsPageSize, searchTerm, statusFilter, seenStatusFilter);
      if (reqId !== requestIdRef.current) return;

      if (res.success && res.data && (res.data.total > 0 || (searchTerm || statusFilter) && res.data.items && res.data.items.length === 0)) {
        setRecipients(res.data.items || []);
        setRecipientsTotal(res.data.total || 0);
        setRecipientsPage(p);
      } else if (['DRAFT', 'SCHEDULED', 'QUEUED', 'SENDING'].includes(campaign.status) && !statusFilter) {
        const criteria = typeof campaign.target_criteria === 'string' ? JSON.parse(campaign.target_criteria) : campaign.target_criteria;
        const targetRes = await getAudienceMembers(criteria, recipientsPageSize, offset, searchTerm);
        if (reqId !== requestIdRef.current) return;
        if (targetRes.success && targetRes.data) {
          setRecipients(targetRes.data.items || []);
          setRecipientsTotal(targetRes.data.total || 0);
          setRecipientsPage(p);
        }
      } else if (res.success && res.data) {
        setRecipients(res.data.items || []);
        setRecipientsTotal(res.data.total || 0);
        setRecipientsPage(p);
      } else {
        setRecipients([]);
        setRecipientsTotal(0);
        setRecipientsPage(1);
      }
    } catch (e) {
      console.error("Failed to load recipients", e);
    } finally {
      if (reqId === requestIdRef.current) setRecipientsLoading(false);
    }
  };

  useEffect(() => {
    if (campaign) {
      loadRecipients(1, "", "ALL");
    }
  }, [campaign?.id]);

  const handleSearchChange = (val: string) => {
    setRecipientsSearch(val);
    setRecipientsPage(1);
    loadRecipients(1, val, recipientsTab, seenFilter);
  };

  const handleTabChange = (val: string | null) => {
    const nextTab = val || "ALL";
    setRecipientsTab(nextTab);
    setRecipientsPage(1);
    loadRecipients(1, recipientsSearch, nextTab, seenFilter);
  };

  const exportToExcel = async () => {
    if (!campaign) return;
    setExporting(true);
    try {
      const limit = 100000;
      let allRecipients: any[] = [];
      const res = await getCampaignRecipients(campaign.id, 0, limit);
      if (res.success && res.data && res.data.items) {
        allRecipients = res.data.items;
      }

      // 1. Create a workbook
      const wb = XLSX.utils.book_new();

      // 2. Prepare data for Campaign Summary sheet
      const summaryData = [
        ["CAMPAIGN SUMMARY REPORT", ""],
        ["Campaign Name", campaign.name || campaign.title],
        ["Campaign ID", campaign.id],
        ["Status", campaign.status],
        ["Notification Title", campaign.title],
        ["Notification Body", campaign.body],
        ["Scheduled At", campaign.scheduled_at ? new Date(campaign.scheduled_at).toLocaleString() : "Immediately"],
        ["Total Dispatched", statsSummary.totalSent],
        ["Seen Rate", `${statsSummary.openRate}%`],
        ["Clicks", campaign.click_count]
      ];
      const wsSummary = XLSX.utils.aoa_to_sheet(summaryData);

      // Auto-fit column widths helper
      const fitToColumn = (data: any[][]) => {
        if (!data || data.length === 0) return [];
        return data[0].map((_, colIndex) => {
          const maxLen = data.reduce((max, row) => {
            const cellVal = row[colIndex] ? String(row[colIndex]) : "";
            return Math.max(max, cellVal.length);
          }, 10);
          return { wch: maxLen + 2 };
        });
      };

      wsSummary["!cols"] = fitToColumn(summaryData);
      XLSX.utils.book_append_sheet(wb, wsSummary, "Campaign Summary");

      // 3. Prepare data for Demographics sheet (flat horizontal table)
          const demo = campaign.additional_data?.demographics;
          const demoRows: any[][] = [["Country", "Account Type", "Account Status", "Members"]];

          const countries = demo?.countries || [];
          const accountTypes = demo?.accountTypes || [];
          const statuses = demo?.statuses || [];

          if (countries.length > 0 || accountTypes.length > 0 || statuses.length > 0) {
            const countryList = countries.length > 0 ? countries : [{ name: "", value: null }];
            const typeList = accountTypes.length > 0 ? accountTypes : [{ name: "", value: null }];
            const statusList = statuses.length > 0 ? statuses : [{ name: "", value: null }];

            countryList.forEach((c: any) => {
              typeList.forEach((t: any) => {
                statusList.forEach((s: any, si: number) => {
                  demoRows.push([
                    si === 0 ? c.name : "",
                    si === 0 ? t.name : "",
                    s.name,
                    s.value ?? 0
                  ]);
                });
              });
            });
          } else {
            demoRows.push(["No demographic data available", "", "", ""]);
          }

          const wsDemo = XLSX.utils.aoa_to_sheet(demoRows);
          wsDemo["!cols"] = fitToColumn(demoRows);
          XLSX.utils.book_append_sheet(wb, wsDemo, "Demographics");

      // 4. Prepare data for Recipients sheet
      const recipientsData = [
        ["Email", "Status", "Seen / Unseen", "Dispatched Time"]
      ];
      allRecipients.forEach((r: any) => {
        recipientsData.push([
          r.email,
          r.status,
          r.seen_status === "seen" ? "Seen" : "Unseen",
          r.sent_at ? new Date(r.sent_at).toLocaleString() : "-"
        ]);
      });
      const wsRecipients = XLSX.utils.aoa_to_sheet(recipientsData);
      wsRecipients["!cols"] = fitToColumn(recipientsData);
      XLSX.utils.book_append_sheet(wb, wsRecipients, "Recipients List");

      // 5. Write workbook and download file
      XLSX.writeFile(wb, `campaign_report_${campaign.id}.xlsx`);
    } catch (e) {
      console.error("Excel Export failed", e);
    } finally {
      setExporting(false);
    }
  };

  // Pie chart calculation
  const pieChartData = useMemo(() => {
    if (!campaign) return [["Status", "Count"]];
    const seen = campaign.additional_data?.seen_count ?? campaign.open_count ?? 0;
    const total = campaign.sent_count ?? 0;
    const unseen = Math.max(0, total - seen);
    return [
      ["Status", "Count"],
      ["Seen / Opened", seen],
      ["Unseen", unseen]
    ];
  }, [campaign]);

  // Bar chart demographics calculation
  const barChartData = useMemo(() => {
    if (!campaign?.additional_data?.demographics) return [];
    const demo = campaign.additional_data.demographics;
    let list: { name: string; value: number }[] = [];
    if (demoMetric === "country") list = demo.countries || [];
    else if (demoMetric === "accountType") list = demo.accountTypes || [];
    else if (demoMetric === "status") list = demo.statuses || [];
    return [...list].sort((a, b) => b.value - a.value);
  }, [campaign, demoMetric]);

  const getStatusColor = (status: string) => {
    switch (status) {
      case "DRAFT": return "gray";
      case "SCHEDULED": return "blue";
      case "SENDING": return "yellow";
      case "SENT": return "green";
      case "COMPLETED": return "teal";
      case "FAILED": return "red";
      case "STOPPED": return "orange";
      case "DELETED": return "gray";
      default: return "gray";
    }
  };

  // Delivery breakdown metrics
  const statsSummary = useMemo(() => {
    if (!campaign) return { successRate: 0, openRate: 0, totalSent: 0 };
    const total = campaign?.total_count || 0;
    const sent = campaign.sent_count || 0;
    const opened = campaign.open_count || 0;
    const successRate = total > 0 ? Math.round((sent / total) * 100) : 0;
    const openRate = sent > 0 ? Math.round((opened / sent) * 100) : 0;

    return {
      successRate,
      openRate,
      totalSent: sent
    };
  }, [campaign]);

  const renderSpecifications = () => {
    if (!campaign) return null;
    return (
      <Card padding="xl" radius="lg" withBorder style={{ boxShadow: "0 4px 12px rgba(0,0,0,0.03)" }}>
        <Stack gap="lg">
          <Text fw={700} size="md" style={{ borderBottom: "1px solid var(--mantine-color-gray-1)", paddingBottom: "8px" }}>
            Campaign Specifications
          </Text>

          <Grid gutter="md">
            <Grid.Col span={6}>
              <Text size="xs" c="dimmed" fw={600}>CAMPAIGN NAME</Text>
              <Text size="sm" fw={600} mt={2}>{campaign.name || "-"}</Text>
            </Grid.Col>
            <Grid.Col span={6}>
              <Text size="xs" c="dimmed" fw={600}>STATUS</Text>
              <Group gap={6} mt={2}>
                <Badge color={getStatusColor(campaign.status)} variant="light">{campaign.status}</Badge>
              </Group>
            </Grid.Col>

            <Grid.Col span={12}>
              <Text size="xs" c="dimmed" fw={600}>NOTIFICATION TITLE</Text>
              <Text size="sm" fw={600} mt={2} style={{ color: "var(--mantine-color-blue-9)" }}>{campaign.title}</Text>
            </Grid.Col>

            <Grid.Col span={12}>
              <Text size="xs" c="dimmed" fw={600}>NOTIFICATION BODY</Text>
              <Text size="sm" mt={2} style={{ whiteSpace: "pre-wrap", lineHeight: 1.5, backgroundColor: "#f8f9fa", padding: "12px", borderRadius: "8px" }}>
                {campaign.body}
              </Text>
            </Grid.Col>

            {campaign.image_url && (
              <Grid.Col span={12}>
                <Text size="xs" c="dimmed" fw={600} mb={6}>ATTACHED IMAGE PREVIEW</Text>
                <img
                  src={campaign.image_url}
                  alt="Notification banner"
                  style={{ maxWidth: "100%", maxHeight: 200, borderRadius: "8px", border: "1px solid var(--mantine-color-gray-2)", objectFit: "cover" }}
                />
              </Grid.Col>
            )}

            <Grid.Col span={6}>
              <Text size="xs" c="dimmed" fw={600}>SCHEDULED AT</Text>
              <Group gap={6} mt={2} wrap="nowrap">
                <IconCalendar size={14} color="var(--mantine-color-gray-5)" />
                <Text size="sm" fw={600}>
                  {campaign.scheduled_at ? new Date(campaign.scheduled_at).toLocaleString() : "Immediately on trigger"}
                </Text>
              </Group>
            </Grid.Col>

            <Grid.Col span={6}>
              <Text size="xs" c="dimmed" fw={600}>PUBLISHED BY</Text>
              <Text size="sm" fw={600} mt={2}>{campaign.published_by || "System Admin"}</Text>
            </Grid.Col>

            <Grid.Col span={12} style={{ borderTop: "1px solid var(--mantine-color-gray-1)", paddingTop: "16px" }}>
              <Text size="xs" c="dimmed" fw={600} mb={8}>TARGET SEGMENTATION CRITERIA</Text>
              <Stack gap="xs">
                <Group gap="xs" wrap="wrap">
                  <Text size="xs" fw={700} c="gray.7" w={110}>Platforms:</Text>
                  {(() => {
                    let segments = parsedCriteria?.userSegment || [];
                    if (segments.length === 0) segments = ["iOS", "Android", "Web"];
                    return segments.map((seg: string) => (
                      <Badge key={seg} size="xs" variant="light" color="indigo">{seg}</Badge>
                    ));
                  })()}
                </Group>

                {parsedCriteria?.country && parsedCriteria.country.length > 0 && (
                  <Group gap="xs" wrap="wrap">
                    <Text size="xs" fw={700} c="gray.7" w={110}>Countries:</Text>
                    {parsedCriteria.country.map((c: string) => (
                      <Badge key={c} size="xs" variant="light" color="gray">{c}</Badge>
                    ))}
                  </Group>
                )}

                {parsedCriteria?.city && parsedCriteria.city.length > 0 && (
                  <Group gap="xs" wrap="wrap">
                    <Text size="xs" fw={700} c="gray.7" w={110}>Cities:</Text>
                    {parsedCriteria.city.map((c: string) => (
                      <Badge key={c} size="xs" variant="light" color="gray">{c}</Badge>
                    ))}
                  </Group>
                )}

                {parsedCriteria?.membershipType && parsedCriteria.membershipType.length > 0 && (
                  <Group gap="xs" wrap="wrap">
                    <Text size="xs" fw={700} c="gray.7" w={110}>Account Types:</Text>
                    {parsedCriteria.membershipType.map((t: any) => (
                      <Badge key={t} size="xs" variant="light" color="grape">Type ID: {t}</Badge>
                    ))}
                  </Group>
                )}

                {parsedCriteria?.membershipStatus && parsedCriteria.membershipStatus.length > 0 && (
                  <Group gap="xs" wrap="wrap">
                    <Text size="xs" fw={700} c="gray.7" w={110}>Statuses:</Text>
                    {parsedCriteria.membershipStatus.map((s: any) => (
                      <Badge key={s} size="xs" variant="light" color="teal">Status ID: {s}</Badge>
                    ))}
                  </Group>
                )}
              </Stack>
            </Grid.Col>
          </Grid>
        </Stack>
      </Card>
    );
  };

         const renderDemographics = () => {
       return (
        <Card
         padding="xl"
        radius={demographicsFullscreen ? 0 : "lg"}
        withBorder
        style={
    demographicsFullscreen
      ? {
          position: "fixed",
          top: 0,
          left: 60,
          right: 0,
          bottom: 0,
          zIndex: 200,
          overflowY: "auto",
          boxShadow: "0 8px 24px rgba(0,0,0,0.04)",
        }
      : {
          height: "100%",
          boxShadow: "0 4px 12px rgba(0,0,0,0.03)",
        }
  }
>
   <Stack gap="md">
  <Flex justify="space-between" align="center" wrap="wrap" gap="xs">
    <Stack gap={2}>
      <Text size="sm" fw={700} c="gray.8">
        Target Audience Demographics
      </Text>
      <Text size="xs" c="dimmed">
        User segmentation distributions mapping real member db criteria
      </Text>
    </Stack>

    <Group gap="xs">
      <SegmentedControl
        className="no-print"
        value={demoMetric}
        onChange={(val: any) => setDemoMetric(val)}
        data={[
          { label: "Country", value: "country" },
          { label: "Account Type", value: "accountType" },
          { label: "Account Status", value: "status" }
        ]}
        radius="xl"
        size="xs"
        styles={{
          root: { backgroundColor: "var(--mantine-color-gray-1)", padding: "2px" },
          indicator: { boxShadow: "var(--mantine-shadow-xs)" },
          label: { fontWeight: 600, fontSize: "11px" }
        }}
      />

      <ActionIcon
        variant="subtle"
        color="gray"
        size="lg"
        onClick={() => setDemographicsFullscreen(prev => !prev)}
      >
        <IconArrowsMaximize size={16} />
      </ActionIcon>
    </Group>
  </Flex>

  <Box
  style={{
    position: "relative",
    minHeight: demographicsFullscreen ? "75vh" : 250,
    overflow: "visible"
  }}
>
            {barChartData.length === 0 ? (
              <Flex align="center" justify="center" direction="column" style={{ minHeight: 250 }}>
                <IconMapPin size={48} stroke={1.2} opacity={0.3} color="var(--mantine-color-gray-5)" />
                <Text c="dimmed" size="sm" mt="md" ta="center">
                  No demographic attributes found under this filter.<br />Verify if the campaign has active criteria.
                </Text>
              </Flex>
        ) : (
          <ReactECharts
              option={{
              tooltip: {
              trigger: "axis",
               axisPointer: {
               type: "shadow",
           },
         },
  xAxis: {
    type: "category",
    data: barChartData.map(item => item.name),
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      type: "bar",
      data: barChartData.map(item => item.value),
      itemStyle: {
        color:
          demoMetric === "country"
            ? "#3b5bdb"
            : demoMetric === "accountType"
            ? "#862e9c"
            : "#087f5b",
      },
    },
  ],
}}
    style={{
      height: demographicsFullscreen ? "80vh" : 300,
      width: "100%",
    }}
  />
)}
          </Box>
        </Stack>
      </Card>
    );
  };



  if (error || !campaign) {
    return (
      <Stack px={28} py={20} gap="lg">
        <Button
          variant="light"
          color="gray"
          leftSection={<IconArrowLeft size={16} />}
          onClick={() => navigate(-1)}
          style={{ width: 140 }}
        >
          Back to List
        </Button>
        <Card padding="xl" radius="lg" withBorder ta="center">
          <Text size="lg" fw={600} c="red">
            {error || "Campaign not found"}
          </Text>
        </Card>
      </Stack>
    );
  }

  // Parse targeted segments and configurations safely
  const parsedCriteria = typeof campaign.target_criteria === 'string'
    ? JSON.parse(campaign.target_criteria || '{}')
    : campaign.target_criteria || {};

  return (
    <Stack px={28} py={20} gap="lg" style={{ minHeight: "100vh", backgroundColor: "#f8f9fa" }}>
      <style dangerouslySetInnerHTML={{
        __html: `
        .chart-tooltip-visible .google-visualization-tooltip {
          display: block !important;
        }
        @media print {
          /* Hide unnecessary UI elements */
          aside, nav, header, .no-print,
          .mantine-Breadcrumbs-root, 
          .mantine-Button-root,
          .mantine-LoadingOverlay-root {
            display: none !important;
          }
          
          /* Reset page backgrounds and container paddings */
          body, html {
            background-color: #ffffff !important;
            background: #ffffff !important;
            color: #212529 !important;
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
          }
          
          .mantine-Stack-root {
            padding: 0 !important;
            margin: 0 !important;
            background-color: #ffffff !important;
          }
          
          /* Ensure grids and charts fit nicely on A4 page sizes */
          .mantine-Grid-root {
            display: block !important;
          }
          .mantine-GridCol-root {
            width: 100% !important;
            max-width: 100% !important;
            flex-basis: 100% !important;
            margin-bottom: 20px !important;
            page-break-inside: avoid;
          }
          
          .print-only {
            display: block !important;
          }
          
          /* Cards layout */
          .mantine-Card-root {
            border: 1px solid #dee2e6 !important;
            box-shadow: none !important;
            page-break-inside: avoid;
            margin-bottom: 20px !important;
            background-color: #ffffff !important;
          }
          
          /* Table layout */
          table {
            width: 100% !important;
            border-collapse: collapse !important;
          }
          tr {
            page-break-inside: avoid !important;
          }
        }
        @media screen {
          .print-only {
            display: none !important;
          }
        }
      ` }} />
      {/* Top Action Header */}
      <Flex justify="space-between" align="center" wrap="wrap" gap="sm">
        <Group gap="md">
          <Button
            variant="subtle"
            color="gray"
            leftSection={<IconArrowLeft size={16} />}
            onClick={() => navigate(-1)}
            radius="md"
            className="no-print"
          >
            Back to Campaigns
          </Button>
          <Stack gap={2}>
            <Group gap="sm">
              <Title order={3} fw={800} style={{ color: "#212529" }}>
                {campaign.name || campaign.title}
              </Title>
              <Badge color={getStatusColor(campaign.status)} variant="filled" radius="md">
                {campaign.status}
              </Badge>
            </Group>
            <Text size="sm" c="dimmed">
              <span className="no-print">ID: {campaign.id} | </span>
              Created: {new Date(campaign.created_at).toLocaleString()}
            </Text>
          </Stack>
        </Group>

        <Group gap="sm" className="no-print">
          <Button variant="outline" color="gray" leftSection={<IconPrinter size={16} />} onClick={() => window.print()} radius="md">
            Print Report
          </Button>
          <Button
            variant="filled"
            color="teal"
            leftSection={<IconDownload size={16} />}
            onClick={exportToExcel}
            loading={exporting}
            radius="md"
          >
            Export to Excel
          </Button>
        </Group>
      </Flex>

      {/* Main Reporting Charts Grid */}
      <Grid gutter="lg">
        {/* Left Column: Pie Chart (Seen vs Unseen status) */}
        <Grid.Col span={{ base: 12, md: 5 }}>
          <Card padding="xl" radius="lg" withBorder style={pieFullscreen ? { position: 'fixed', top: 0, left: 60, right: 0, bottom: 0, zIndex: 200, overflowY: 'auto', boxShadow: '0 8px 24px rgba(0,0,0,0.04)', borderRadius: 0 } : { height: "100%", boxShadow: "0 4px 12px rgba(0,0,0,0.03)" }}>
            <Stack gap="md" style={{ height: "100%" }}>
              <Group justify="space-between">
                <Stack gap={2}>
                  <Text size="sm" fw={700} c="gray.8">Seen vs Unseen Audience</Text>
                  <Text size="xs" c="dimmed">Breakdown of delivered push notification opens</Text>
                </Stack>
                <Group gap="xs">
                  <Tooltip label="Seen status represents users who have tapped/opened the notification. Unseen represents notifications still visible or cleared.">
                    <IconInfoCircle size={16} color="var(--mantine-color-gray-5)" />
                  </Tooltip>
                  <ActionIcon variant="subtle" color="gray" size="lg" onClick={() => setPieFullscreen(prev => !prev)}>
                    <IconArrowsMaximize size={16} />
                  </ActionIcon>
                </Group>
              </Group>

              {statsSummary.totalSent === 0 ? (
                <Flex align="center" justify="center" direction="column" style={{ flex: 1, minHeight: 250 }}>
                  <IconDeviceAnalytics size={48} stroke={1.2} opacity={0.3} color="var(--mantine-color-blue-5)" />
                  <Text c="dimmed" size="sm" mt="md" ta="center">
                    This campaign hasn't been sent yet.<br />Delivery metrics will map once notifications are dispatched.
                  </Text>
                </Flex>
              ) : (
                <Stack gap="md" justify="center" align="center" style={{ flex: 1, minHeight: 250 }}>
                  <Chart
                    chartType="PieChart"
                    width="100%"
                    height="200px"
                    data={pieChartData}
                    options={{
                      pieHole: 0.4,
                      is3D: false,
                      legend: { position: "bottom", textStyle: { color: "#495057", fontSize: 11 } },
                      colors: ["#0c8599", "#dee2e6"],
                      chartArea: { width: "90%", height: "80%" },
                      backgroundColor: "transparent",
                    }}
                  />
                  <Group justify="space-around" w="100%" mt="xs" style={{ borderTop: "1px solid var(--mantine-color-gray-1)", paddingTop: "12px" }}>
                    <Stack gap={0} align="center">
                      <Text size="xs" c="dimmed" fw={500}>DELIVERED</Text>
                      <Text size="md" fw={800} c="dark.6">{statsSummary.totalSent.toLocaleString()}</Text>
                    </Stack>
                    <Stack gap={0} align="center">
                      <Text size="xs" c="dimmed" fw={500}>SEEN RATE</Text>  
                      <Text size="md" fw={800} c="cyan.9">{statsSummary.openRate}%</Text>
                    </Stack>
                    <Stack gap={0} align="center">
                      <Text size="xs" c="dimmed" fw={500}>SEEN</Text>
                      <Text size="md" fw={800} c="blue.7">{campaign.click_count.toLocaleString()}</Text>
                    </Stack>
                  </Group>
                </Stack>
              )}
            </Stack>
          </Card>
        </Grid.Col>

       
        <Grid.Col span={{ base: 12, md: 7 }} className="no-print">
          {renderDemographics()}

        </Grid.Col>
      </Grid>

      {/* Details, History & Recipients Section Tabs */}
      <Tabs className="no-print" defaultValue="details" radius="lg" styles={{
        list: { borderBottom: "2px solid var(--mantine-color-gray-2)", marginBottom: "20px" },
        tab: {
          fontSize: "14px",
          fontWeight: 600,
          padding: "12px 20px",
          color: "var(--mantine-color-gray-6)",
          "&[data-active]": {
            color: "var(--mantine-color-blue-7)",
            borderBottom: "2px solid var(--mantine-color-blue-7)"
          }
        }
      }}>
        <Tabs.List>
          <Tabs.Tab value="details">Campaign Details & History</Tabs.Tab>
          <Tabs.Tab value="recipients">All Recipients ({campaign.total_count})</Tabs.Tab>
        </Tabs.List>

        {/* TAB 1: Campaign Details & History */}
        <Tabs.Panel value="details">
          <Grid gutter="lg">
            {/* Left Column: All Fields Grid */}
            <Grid.Col span={{ base: 12, md: 7 }}>
              {renderSpecifications()}
            </Grid.Col>

            {/* Right Column: History / Contextual Logs */}
            <Grid.Col span={{ base: 12, md: 5 }}>
              <Card padding="xl" radius="lg" withBorder style={{ boxShadow: "0 4px 12px rgba(0,0,0,0.03)" }}>
                <ContextualLogs
                  entityId={campaign.id}
                  title="Campaign History & Event Logs"
                  limit={30}
                />
              </Card>
            </Grid.Col>
          </Grid>
        </Tabs.Panel>

        {/* TAB 2: All Recipients */}
        <Tabs.Panel value="recipients">
          <Card padding="xl" radius="lg" withBorder style={{ position: "relative", minHeight: 400, boxShadow: "0 4px 12px rgba(0,0,0,0.03)" }}>
            <LoadingOverlay visible={recipientsLoading} zIndex={1000} overlayProps={{ radius: "md", blur: 1.5 }} />

            <Stack gap="lg">
              {/* Search & Stats Header */}
            <Flex justify="space-between" align="center" wrap="nowrap" gap="md">
            <Group gap="sm" wrap="nowrap">
              <TextInput
                placeholder="Search recipient by email..."
                leftSection={<IconSearch size={16} />}
                value={recipientsSearch}
                onChange={(e) => handleSearchChange(e.currentTarget.value)}
                size="sm"
                radius="md"
                style={{ width: 350, flexShrink: 0 }}
              />

              <SegmentedControl
                value={seenFilter}
                  onChange={(val: any) => {
                  setSeenFilter(val);
                  setRecipientsPage(1);
                  loadRecipients(1, recipientsSearch, recipientsTab, val);
                }}
                data={[
                  { label: "All", value: "ALL" },
                  { label: "Seen", value: "SEEN" },
                  { label: "Unseen", value: "UNSEEN" }
                ]}
                radius="xl"
                size="xs"
                style={{ flexShrink: 0 }}
                styles={{
                  root: {
                    backgroundColor: "var(--mantine-color-gray-1)",
                    padding: "2px"
                  },
                  indicator: {
                    boxShadow: "var(--mantine-shadow-xs)"
                  },
                  label: {
                    fontWeight: 600,
                    fontSize: "11px"
                  }
                }}
              />
            </Group>

            <Group gap="xs">
              <Text size="xs" c="gray.6" fw={600}>FILTER STATUS:</Text>
              <SegmentedControl
                value={recipientsTab}
                onChange={handleTabChange}
                data={[
                  { label: "All", value: "ALL" },
                  { label: "Sent", value: "SENT" },
                  { label: "Invalid", value: "INVALID" },
                  { label: "Non-Processable", value: "NON_PROCESSABLE" }
                ]}
                radius="xl"
                size="xs"
                styles={{
                      root: { backgroundColor: "var(--mantine-color-gray-1)", padding: "2px" },
                      indicator: { boxShadow: "var(--mantine-shadow-xs)" },
                      label: { fontWeight: 600, fontSize: "11px" }
                }}
              />
            </Group>
          </Flex>

              <Group justify="space-between" align="center" style={{ backgroundColor: "#f8f9fa", padding: "10px 16px", borderRadius: "8px" }}>
                <Text size="sm" fw={600} c="gray.7">
                  Showing {recipients.length} of {recipientsTotal.toLocaleString()} Recipients
                </Text>
              </Group>

              {/* Recipients Table */}
              <Table striped highlightOnHover verticalSpacing="md" variant="simple">
                <Table.Thead>
                  <Table.Tr style={{ borderBottom: "1.5px solid var(--mantine-color-gray-2)" }}>
                    <Table.Th style={{ color: "var(--mantine-color-gray-6)", fontWeight: 600 }}>Recipient Email</Table.Th>
                    <Table.Th style={{ color: "var(--mantine-color-gray-6)", fontWeight: 600 }}>Status</Table.Th>
                    <Table.Th style={{ color: "var(--mantine-color-gray-6)", fontWeight: 600 }}>Seen / Unseen</Table.Th>
                    <Table.Th style={{ color: "var(--mantine-color-gray-6)", fontWeight: 600 }}>Dispatched Time</Table.Th>
                  </Table.Tr>
                </Table.Thead>
                <Table.Tbody>
                  {recipients.map((r, idx) => (
                    <Table.Tr key={idx} style={{ borderBottom: "1px solid var(--mantine-color-gray-1)" }}>
                      <Table.Td>
                        <Group gap="xs" wrap="nowrap">
                          <Avatar size={24} radius="xl" color="blue">
                            <IconMail size={12} />
                          </Avatar>
                          <Text size="sm" fw={600}>{r.email}</Text>
                        </Group>
                      </Table.Td>
                      <Table.Td>
                        <Badge
                          color={
                            r.status === 'SENT' ? 'green' :
                              r.status === 'INVALID' ? 'red' :
                                r.status === 'NON_PROCESSABLE' ? 'orange' :
                                  'blue'
                          }
                          size="sm"
                          variant="light"
                        >
                          {r.status.replace('_', ' ')}
                        </Badge>
                      </Table.Td>
                      <Table.Td>
                        <Badge
                          color={r.seen_status === 'seen' ? 'teal' : 'gray'}
                          size="sm"
                          variant="light"
                        >
                          {r.seen_status === 'seen' ? 'Seen' : 'Unseen'}
                        </Badge>
                      </Table.Td>
                      <Table.Td>
                        <Text size="sm" c="dimmed">
                          {r.sent_at ? new Date(r.sent_at).toLocaleString() : "-"}
                        </Text>
                      </Table.Td>
                    </Table.Tr>
                  ))}
                  {recipients.length === 0 && !recipientsLoading && (
                    <Table.Tr>
                      <Table.Td colSpan={4} style={{ textAlign: "center", py: 32 }}>
                        <Text c="dimmed" size="sm">No recipients matched the search criteria.</Text>
                      </Table.Td>
                    </Table.Tr>
                  )}
                </Table.Tbody>
              </Table>

              {/* Pagination */}
              {recipientsTotal > recipientsPageSize && (
                <Group justify="center" mt="md">
                  <Pagination
                    total={Math.ceil(recipientsTotal / recipientsPageSize)}
                    value={recipientsPage}
                    onChange={(p) => loadRecipients(p, recipientsSearch, recipientsTab, seenFilter)}
                  />
                </Group>
              )}
            </Stack>
          </Card>
        </Tabs.Panel>
      </Tabs>
   
      {/* Print-only layout */}
      <div className="print-only">
        <Stack gap="lg">
          <Card padding="xl" radius="lg" withBorder style={{ boxShadow: "0 4px 12px rgba(0,0,0,0.03)" }}>
            <Stack gap="xl">
              <Text fw={700} size="md" style={{ borderBottom: "1px solid var(--mantine-color-gray-1)", paddingBottom: "8px" }}>
                Target Audience Demographics
              </Text>
              
              <Grid gutter="xl">
                {/* Country */}
                <Grid.Col span={12}>
                  <Text size="sm" fw={600} mb="md">By Country</Text>
                  {campaign?.additional_data?.demographics?.countries?.length ? (
                    <CustomBarChart data={[...(campaign.additional_data.demographics.countries)].sort((a,b)=>b.value-a.value)} color="#3b5bdb" />
                  ) : (
                    <Text size="sm" c="dimmed">No country data available</Text>
                  )}
                </Grid.Col>
                {/* Account Type */}
                <Grid.Col span={12}>
                  <Text size="sm" fw={600} mb="md">By Account Type</Text>
                  {campaign?.additional_data?.demographics?.accountTypes?.length ? (
                    <CustomBarChart data={[...(campaign.additional_data.demographics.accountTypes)].sort((a,b)=>b.value-a.value)} color="#862e9c" />
                  ) : (
                    <Text size="sm" c="dimmed">No account type data available</Text>
                  )}
                </Grid.Col>
                {/* Account Status */}
                <Grid.Col span={12}>
                  <Text size="sm" fw={600} mb="md">By Account Status</Text>
                  {campaign?.additional_data?.demographics?.statuses?.length ? (
                    <CustomBarChart data={[...(campaign.additional_data.demographics.statuses)].sort((a,b)=>b.value-a.value)} color="#087f5b" />
                  ) : (
                    <Text size="sm" c="dimmed">No account status data available</Text>
                  )}
                </Grid.Col>
              </Grid>
            </Stack>
          </Card>
          {renderSpecifications()}
        </Stack>
      </div>
    </Stack>
  );
};

export default CampaignReportPage;