"use client";

import { AreaLineChart } from "@/components/dashboard/charts/area-line-chart";
import { PlatformComparisonChart } from "@/components/dashboard/charts/platform-comparison-chart";
import { SocialPieChart } from "@/components/dashboard/charts/social-pie-chart";
import {
  EyeViewIcon,
  GlobeIcon,
  TrendingUpChartIcon,
  UsersGroupIcon,
} from "@/components/icons/dashboard";
import { Link } from "@/i18n/routing";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardTitle } from "@/components/ui/card";
import { useThemeColors } from "@/hooks/use-theme-colors";
import { useFormattedDate } from "@/hooks/use-formatted-date";
import type { SocialMediaStatistics, TimeSeries } from "@/types/statistics";
import { useTranslations } from "next-intl";
import { useMemo } from "react";
import { ArrowUp, MapPin, TrendingUp } from "lucide-react";
import { cn } from "@/lib/utils";

interface SocialMediaStatsProps {
  socialMediaStats?: SocialMediaStatistics;
  timeSeries?: TimeSeries;
}

// ─── Growth badge ────────────────────────────────────────────────────────────
function GrowthBadge({ label }: { label: string }) {
  return (
    <span className="inline-flex items-center gap-0.5 rounded-full bg-emerald-50 dark:bg-emerald-950/40 px-2 py-0.5 text-[11px] font-semibold text-emerald-600 dark:text-emerald-400 shrink-0">
      <ArrowUp className="h-3 w-3" />
      {label}
    </span>
  );
}

// ─── Icon circle ─────────────────────────────────────────────────────────────
function IconCircle({
  children,
  className,
}: {
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <div
      className={cn(
        "flex h-12 w-12 shrink-0 items-center justify-center rounded-full",
        className
      )}
    >
      {children}
    </div>
  );
}

export function SocialMediaStats({
  socialMediaStats,
}: SocialMediaStatsProps) {
  const t = useTranslations();
  const { formatDate: formatAppDate } = useFormattedDate();

  // Prefer dashboard_cards fields, fall back to root-level fields
  const dc = socialMediaStats?.dashboard_cards;

  const totalFollowers = dc?.total_followers ?? socialMediaStats?.total_followers ?? 0;
  const newFollowers = dc?.new_followers ?? 0;
  const engagementRate = dc?.engagement_rate ?? socialMediaStats?.engagement_rate ?? 0;
  const engagementLastMonth = dc?.engagement_last_month ?? 0;
  const totalPlatforms = dc?.total_platforms ?? socialMediaStats?.total_accounts ?? 0;
  const totalReachThisMonth = dc?.total_reach_this_month ?? 0;
  const totalReachLastMonth = dc?.total_reach_last_month ?? 0;
  const overallGrowthRate = dc?.overall_growth_rate ?? socialMediaStats?.average_growth_rate ?? 0;
  const growthTarget = dc?.growth_target ?? 5;

  // Reach growth badge
  const reachGrowthLabel =
    totalReachLastMonth === 0 && totalReachThisMonth > 0
      ? "100%+"
      : totalReachLastMonth > 0
      ? `${(((totalReachThisMonth - totalReachLastMonth) / totalReachLastMonth) * 100).toFixed(0)}%+`
      : null;

  // % of growth target achieved
  const pctOfTarget =
    growthTarget > 0
      ? Math.min(100, (overallGrowthRate / growthTarget) * 100).toFixed(0)
      : "0";

  // Get dynamic colors from settings (for other charts)
  const colors = useThemeColors();

  // Build a platform → color map from growth_chart datasets
  const platformColorMap = useMemo<Record<string, string>>(() => {
    const datasets = socialMediaStats?.growth_chart?.datasets;
    if (!datasets) return {};
    return Object.fromEntries(
      datasets.map((ds) => [
        ds.label.toLowerCase(),
        ds.borderColor || ds.backgroundColor || "",
      ])
    );
  }, [socialMediaStats?.growth_chart?.datasets]);

  // Platform list with colors from accounts
  const platformTags = useMemo(() => {
    return (socialMediaStats?.accounts ?? []).map((acc) => {
      const dataset = socialMediaStats?.growth_chart?.datasets?.find(
        (ds) =>
          ds.label === acc.account_name ||
          ds.label.toLowerCase().includes(acc.platform.toLowerCase())
      );
      const color =
        dataset?.borderColor ||
        dataset?.backgroundColor ||
        platformColorMap[acc.platform.toLowerCase()] ||
        "var(--primary)";

      // Localize platform name
      const platformKey = `dashboard.socialStats.platforms.${acc.platform.toLowerCase()}`;
      const translated = t(platformKey);
      const displayName =
        translated !== platformKey
          ? translated
          : acc.platform.charAt(0).toUpperCase() + acc.platform.slice(1);

      return { platform: acc.platform, displayName, color };
    });
  }, [socialMediaStats?.accounts, socialMediaStats?.growth_chart?.datasets, platformColorMap, t]);

  // Transform platform_distribution to pie chart data
  const pieChartData = useMemo(() => {
    const distribution = socialMediaStats?.platform_distribution;
    const datasets = socialMediaStats?.growth_chart?.datasets;

    if (!distribution) return [];

    const platformOrder = [
      "twitter", "facebook", "instagram", "youtube", "linkedin", "snapchat", "tiktok",
    ];

    return Object.entries(distribution).map(([platform, data]) => {
      const isObject = typeof data === "object" && data !== null;
      const value = typeof data === "number" ? data : data.value;
      let color = isObject ? data.color : null;

      if (!color && datasets) {
        const platformIndex = platformOrder.indexOf(platform.toLowerCase());
        if (platformIndex >= 0 && platformIndex < datasets.length) {
          const dataset = datasets[platformIndex];
          color = dataset?.borderColor || dataset?.backgroundColor;
        }
      }
      if (!color) color = colors.primary;

      const platformKey = `dashboard.socialStats.platforms.${platform.toLowerCase()}`;
      const translatedName = t(platformKey);
      const displayName =
        translatedName !== platformKey
          ? translatedName
          : platform.charAt(0).toUpperCase() + platform.slice(1);

      return { name: displayName, value, color };
    });
  }, [
    socialMediaStats?.platform_distribution,
    socialMediaStats?.growth_chart?.datasets,
    colors.primary,
    t,
  ]);

  // Transform growth_chart to area chart data format
  const areaChartData = useMemo(() => {
    const growthChart = socialMediaStats?.growth_chart;
    if (!growthChart?.labels || !growthChart?.datasets?.length) return [];

    return growthChart.labels.map((label, index) => {
      const totalFollowersVal = growthChart.datasets.reduce(
        (sum, dataset) => sum + (dataset.data[index] || 0),
        0
      );
      return { date: formatAppDate(label), value: totalFollowersVal };
    });
  }, [socialMediaStats?.growth_chart, formatAppDate]);

  return (
    <div>
      <div className="flex items-center justify-between gap-3 p-4">
        <CardTitle className="text-start text-base sm:text-lg">
          {t("dashboard.socialStats.title")}
        </CardTitle>

        <Link href="/social-media">
          <Button
            variant="link"
            size="sm"
            className="h-auto px-0 text-xs sm:text-sm"
          >
            {t("dashboard.socialStats.showMoreDetails")}
          </Button>
        </Link>
      </div>

      <CardContent className="p-3 sm:p-6 space-y-4 sm:space-y-6">

        {/* ── Row 1: 3 cards ─────────────────────────────────────────────── */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5">

          {/* Card 1 — Platforms */}
          <Card className="p-4 sm:p-5 flex flex-col gap-3">
            <div className="flex items-start justify-between gap-3">
              <div className="flex-1 min-w-0">
                <p className="text-xs sm:text-sm text-muted-foreground leading-snug mb-1">
                  {t("dashboard.socialStats.totalPlatforms")}
                </p>
                <p className="text-2xl sm:text-3xl font-bold text-foreground tabular-nums">
                  {totalPlatforms}
                </p>
              </div>
              <IconCircle className="bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400">
                <GlobeIcon className="h-6 w-6" />
              </IconCircle>
            </div>

            {/* Platform tags */}
            {platformTags.length > 0 && (
              <div className="flex flex-wrap gap-1.5">
                {platformTags.map(({ platform, displayName, color }) => (
                  <span
                    key={platform}
                    className="inline-flex items-center gap-1 rounded-full border border-border/60 bg-muted/40 px-2 py-0.5 text-[11px] text-foreground"
                  >
                    <span
                      className="inline-block h-2 w-2 rounded-full shrink-0"
                      style={{ backgroundColor: color }}
                    />
                    {displayName}
                  </span>
                ))}
              </div>
            )}
          </Card>

          {/* Card 2 — Total Followers */}
          <Card className="p-4 sm:p-5 flex flex-col gap-2">
            <div className="flex items-start justify-between gap-3">
              <div className="flex-1 min-w-0">
                {newFollowers > 0 && (
                  <div className="mb-1">
                    <GrowthBadge label={`${newFollowers.toLocaleString()}+`} />
                  </div>
                )}
                <p className="text-xs sm:text-sm text-muted-foreground leading-snug mb-1">
                  {t("dashboard.socialStats.totalFollowers")}
                </p>
                <p className="text-2xl sm:text-3xl font-bold text-foreground tabular-nums">
                  {totalFollowers.toLocaleString()}
                </p>
              </div>
              <IconCircle className="bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400">
                <UsersGroupIcon className="h-6 w-6" />
              </IconCircle>
            </div>
            <p className="text-[11px] text-muted-foreground">
              {t("dashboard.socialStats.newFollowersDuringPeriod")}
            </p>
          </Card>

          {/* Card 3 — Engagement Rate */}
          <Card className="p-4 sm:p-5 flex flex-col gap-2">
            <div className="flex items-start justify-between gap-3">
              <div className="flex-1 min-w-0">
                {engagementRate > 0 && (
                  <div className="mb-1">
                    <GrowthBadge label={`${engagementRate.toFixed(1)}%+`} />
                  </div>
                )}
                <p className="text-xs sm:text-sm text-muted-foreground leading-snug mb-1">
                  {t("dashboard.socialStats.engagementRate")}
                </p>
                <p className="text-2xl sm:text-3xl font-bold text-foreground tabular-nums">
                  {engagementRate.toFixed(1)}%
                </p>
              </div>
              <IconCircle className="bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400">
                <TrendingUpChartIcon className="h-6 w-6" />
              </IconCircle>
            </div>
            <p className="text-[11px] text-muted-foreground">
              {t("dashboard.socialStats.previousPeriod")}: {engagementLastMonth}%
            </p>
          </Card>
        </div>

        {/* ── Row 2: 2 cards ─────────────────────────────────────────────── */}
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-5">

          {/* Card 4 — Total Reach */}
          <Card className="p-4 sm:p-5 flex flex-col gap-2">
            <div className="flex items-start justify-between gap-3">
              <div className="flex-1 min-w-0">
                {reachGrowthLabel && (
                  <div className="mb-1">
                    <GrowthBadge label={reachGrowthLabel} />
                  </div>
                )}
                <p className="text-xs sm:text-sm text-muted-foreground leading-snug mb-1">
                  {t("dashboard.socialStats.totalReach")}
                </p>
                <p className="text-2xl sm:text-3xl font-bold text-foreground tabular-nums">
                  {totalReachThisMonth.toLocaleString()}
                </p>
              </div>
              <IconCircle className="bg-sky-100 dark:bg-sky-900/30 text-sky-600 dark:text-sky-400">
                <MapPin className="h-6 w-6" />
              </IconCircle>
            </div>
            <p className="text-[11px] text-muted-foreground">
              {t("dashboard.socialStats.previousPeriod")}: {totalReachLastMonth.toLocaleString()}
            </p>
          </Card>

          {/* Card 5 — Overall Growth Rate */}
          <Card className="p-4 sm:p-5 flex flex-col gap-2">
            <div className="flex items-start justify-between gap-3">
              <div className="flex-1 min-w-0">
                <p className="text-xs sm:text-sm text-muted-foreground leading-snug mb-1">
                  {t("dashboard.socialStats.totalGrowthRate")}
                </p>
                <p className="text-2xl sm:text-3xl font-bold text-foreground tabular-nums">
                  {overallGrowthRate.toFixed(2)}%
                </p>
              </div>
              <IconCircle className="bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400">
                <TrendingUp className="h-6 w-6" />
              </IconCircle>
            </div>
            <div className="space-y-0.5">
              <p className="text-[11px] text-muted-foreground">
                {t("dashboard.socialStats.target")}: {growthTarget.toFixed(1)}%
              </p>
              <p className="text-[11px] text-muted-foreground">
                {pctOfTarget}% {t("dashboard.socialStats.fromTarget")}
              </p>
            </div>
          </Card>
        </div>

        {/* ── Charts Section ─────────────────────────────────────────────── */}
        <div className="space-y-4 sm:space-y-6">
          {/* Area Chart - Full Width */}
          <AreaLineChart
            title={t("dashboard.socialStats.followerGrowth")}
            data={areaChartData}
            series={[
              { dataKey: "value", label: t("dashboard.socialStats.followers") },
            ]}
            xAxisKey="date"
          />

          {/* Bottom Row: Pie Chart + Horizontal Bar Chart */}
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
            {socialMediaStats?.accounts && socialMediaStats.accounts.length > 0 && (
              <div className="lg:col-span-2">
                <PlatformComparisonChart
                  title={t("dashboard.socialStats.platformComparison")}
                  accounts={socialMediaStats.accounts}
                  reachLabel={t("dashboard.socialStats.reach")}
                  impressionsLabel={t("dashboard.socialStats.impressions")}
                  followersLabel={t("dashboard.socialStats.followers")}
                  platformColors={platformColorMap}
                />
              </div>
            )}
            {pieChartData.length > 0 && (
              <div className="lg:col-span-1">
                <SocialPieChart
                  title={t("dashboard.socialStats.platformDistribution")}
                  data={pieChartData}
                />
              </div>
            )}
          </div>
        </div>
      </CardContent>
    </div>
  );
}