import { useQuery } from "@tanstack/react-query";
import DonutChart from "../DonutChart";
import { formatMetricValue } from "../platformMetrics";

interface Props {
  channelId: string;
}

async function fetchSub(channelId: string, sub: string) {
  const baseUrl = (window as any).viralyWP.restUrl.replace(/\/+$/, "");
  const nonce = (window as any).viralyWP.restNonce;
  const res = await fetch(`${baseUrl}/analytics/linkedin/${channelId}/${sub}`, {
    credentials: "same-origin",
    headers: { "X-WP-Nonce": nonce, "Content-Type": "application/json" },
  });
  try { return await res.json(); } catch { return null; }
}

const BREAKDOWN_COLORS = [
  "#3B82F6", "#10B981", "#8B5CF6", "#F59E0B", "#EC4899",
  "#06B6D4", "#EF4444", "#84CC16", "#6366F1", "#14B8A6",
];

interface BreakdownItem {
  label: string;
  organic: number;
  paid: number;
  total: number;
}

export default function LinkedInAnalytics({ channelId }: Props) {
  const { data: followerBreakdown, isLoading: followerLoading } = useQuery({
    queryKey: ["li-follower-breakdown", channelId],
    queryFn: () => fetchSub(channelId, "follower-breakdown"),
    staleTime: 600_000,
  });

  const { data: pageStats, isLoading: pageLoading } = useQuery({
    queryKey: ["li-page-stats", channelId],
    queryFn: () => fetchSub(channelId, "page-stats"),
    staleTime: 600_000,
  });

  // Parse follower breakdowns
  const followerData = parseFollowerBreakdown(followerBreakdown);
  const pageViewData = parsePageStats(pageStats);

  return (
    <div className="vr-space-y-6">
      {/* Follower Demographics */}
      {!followerLoading && followerData.length > 0 && (
        <div>
          <h4 className="vr-text-xs vr-font-semibold vr-text-gray-700 vr-mb-3">Follower Demographics</h4>
          <div className="vr-grid vr-grid-cols-1 sm:vr-grid-cols-2 lg:vr-grid-cols-3 vr-gap-4">
            {followerData.map((bd) => (
              <DonutChart
                key={bd.title}
                data={bd.segments}
                title={bd.title}
                centerValue={formatMetricValue(bd.total)}
                centerLabel="Followers"
                size={150}
              />
            ))}
          </div>
        </div>
      )}

      {/* Page View Breakdown */}
      {!pageLoading && pageViewData.length > 0 && (
        <div>
          <h4 className="vr-text-xs vr-font-semibold vr-text-gray-700 vr-mb-3">Page Views Over Time</h4>
          <div className="vr-space-y-2">
            {pageViewData.slice(0, 10).map((item, i) => {
              const total = item.desktop + item.mobile;
              const desktopPct = total > 0 ? (item.desktop / total) * 100 : 50;
              return (
                <div key={i} className="vr-flex vr-items-center vr-gap-3">
                  <span className="vr-text-xs vr-text-gray-500 vr-w-20 vr-text-right vr-flex-shrink-0">{item.date}</span>
                  <div className="vr-flex-1 vr-h-4 vr-bg-gray-100 vr-rounded-full vr-overflow-hidden vr-flex">
                    <div className="vr-h-full vr-rounded-l-full" style={{ width: `${desktopPct}%`, backgroundColor: "#3B82F6" }} />
                    <div className="vr-h-full vr-rounded-r-full" style={{ width: `${100 - desktopPct}%`, backgroundColor: "#10B981" }} />
                  </div>
                  <span className="vr-text-xs vr-text-gray-500 vr-w-12 vr-text-right vr-flex-shrink-0">{formatMetricValue(total)}</span>
                </div>
              );
            })}
            <div className="vr-flex vr-items-center vr-justify-center vr-gap-4 vr-mt-2">
              <span className="vr-flex vr-items-center vr-gap-1.5 vr-text-xs vr-text-gray-500">
                <span className="vr-w-2.5 vr-h-2.5 vr-rounded-full" style={{ backgroundColor: "#3B82F6" }} /> Desktop
              </span>
              <span className="vr-flex vr-items-center vr-gap-1.5 vr-text-xs vr-text-gray-500">
                <span className="vr-w-2.5 vr-h-2.5 vr-rounded-full" style={{ backgroundColor: "#10B981" }} /> Mobile
              </span>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function parseFollowerBreakdown(data: any): { title: string; segments: any[]; total: number }[] {
  if (!data?.data && !Array.isArray(data)) return [];

  const elements = data?.data || data;
  if (!Array.isArray(elements) || elements.length === 0) return [];

  const element = elements[0];
  const results: { title: string; segments: any[]; total: number }[] = [];

  const breakdownTypes = [
    { key: "byGeoCountry", title: "By Country", labelKey: "geo" },
    { key: "byIndustry", title: "By Industry", labelKey: "industry" },
    { key: "byStaffCountRange", title: "By Company Size", labelKey: "staffCountRange" },
    { key: "byFunction", title: "By Function", labelKey: "function" },
    { key: "bySeniority", title: "By Seniority", labelKey: "seniority" },
  ];

  for (const bt of breakdownTypes) {
    const items = element[bt.key];
    if (!Array.isArray(items) || items.length === 0) continue;

    const segments = items
      .map((item: any, i: number) => {
        const organic = item.followerCounts?.organicFollowerCount || 0;
        const paid = item.followerCounts?.paidFollowerCount || 0;
        return {
          label: item[bt.labelKey] || `Item ${i + 1}`,
          value: organic + paid,
          color: BREAKDOWN_COLORS[i % BREAKDOWN_COLORS.length],
        };
      })
      .filter((s: any) => s.value > 0)
      .sort((a: any, b: any) => b.value - a.value)
      .slice(0, 8);

    if (segments.length > 0) {
      results.push({
        title: bt.title,
        segments,
        total: segments.reduce((s: number, seg: any) => s + seg.value, 0),
      });
    }
  }

  return results;
}

function parsePageStats(data: any): { date: string; desktop: number; mobile: number }[] {
  const elements = data?.data;
  if (!Array.isArray(elements)) return [];

  return elements
    .map((el: any) => {
      const stats = el.totalPageStatistics;
      if (!stats?.views) return null;
      const start = el.timeRange?.start;
      const date = start ? new Date(start).toLocaleDateString(undefined, { month: "short", day: "numeric" }) : "";
      return {
        date,
        desktop: stats.views.allDesktopPageViews || stats.views.desktopOverviewPageViews || 0,
        mobile: stats.views.allMobilePageViews || stats.views.mobileOverviewPageViews || 0,
      };
    })
    .filter(Boolean)
    .slice(-15);
}