"use client";

import { useMemo } from "react";
import { useLocale } from "next-intl";
import { useSearchParams, useRouter } from "next/navigation";

import {
  AccountDemographicsRow,
  AccountsDetailsTable,
  EngagementTimelineCard,
  FollowersGrowthCard,
  PlatformDistributionCard,
  PlatformStatisticsCard,
  ReportFilterCard,
  ReportFooter,
  ReportHeroStrip,
  ReportKpiTiles,
  ReportSecondaryStats,
  TopPostsList,
} from "@/components/dashboard/social-media/reports";
import { useProject } from "@/contexts/project-context";
import {
  useSocialMediaReport,
  useSocialMediaReportActions,
} from "@/hooks/use-social-media";
import type { SocialMediaReportFilters, SocialPlatform } from "@/types";

export function SocialMediaUpdatedReportContainer() {
  const locale = (useLocale() === "ar" ? "ar" : "en") as "ar" | "en";
  const { projectId, projectName } = useProject();
  const search = useSearchParams();
  const router = useRouter();

  const filters = useMemo<SocialMediaReportFilters>(
    () => ({
      preset:
        (search.get("preset") as SocialMediaReportFilters["preset"]) ?? "month",
      from: search.get("from"),
      to: search.get("to"),
      platforms: search.getAll("platforms") as SocialPlatform[],
      accounts: search.getAll("accounts").map((v) => Number(v) || v),
      account_type:
        (search.get("account_type") as SocialMediaReportFilters["account_type"]) ??
        "all",
      sort:
        (search.get("sort") as SocialMediaReportFilters["sort"]) ?? "engagement",
    }),
    [search],
  );

  const { data } = useSocialMediaReport(filters);
  const actions = useSocialMediaReportActions(projectId ?? null, locale);

  const handleApply = (next: SocialMediaReportFilters) => {
    const params = new URLSearchParams();
    if (next.preset && next.preset !== "custom") params.set("preset", next.preset);
    if (next.from) params.set("from", next.from);
    if (next.to) params.set("to", next.to);
    next.platforms?.forEach((p) => params.append("platforms", String(p)));
    next.accounts?.forEach((a) => params.append("accounts", String(a)));
    if (next.account_type) params.set("account_type", next.account_type);
    if (next.sort) params.set("sort", next.sort);
    router.replace(`?${params.toString()}`, { scroll: false });
  };

  const accountsForDemographics = useMemo(() => {
    if (!data) return [];
    const sorted = [...(data.accounts ?? [])].sort(
      (a, b) => (b.engagement ?? 0) - (a.engagement ?? 0),
    );
    return sorted;
  }, [data]);

  const hasData = data?.meta?.has_data !== false && Boolean(data?.kpis);

  return (
    <div className="space-y-6 print-report-root">
      <ReportHeroStrip
        projectName={projectName ?? ""}
        fromDate={data?.period?.from}
        toDate={data?.period?.to}
        accountsCount={data?.kpis?.total_accounts ?? 0}
        platformsCount={data?.available?.platforms?.length ?? 0}
        onExportPdf={() => actions.downloadPdf(filters)}
        onPrint={actions.openPrintView}
        onExportCsv={() => actions.downloadCsv(filters)}
        locale={locale}
      />

      <div className="print:hidden">
      <ReportFilterCard
        availableAccounts={data?.available?.accounts ?? []}
        availablePlatforms={data?.available?.platforms ?? []}
        initialFilters={filters}
        onApply={handleApply}
        locale={locale}
      />
      </div>

      {!data || !hasData ? (
        <div className="rounded-2xl border bg-muted/20 px-6 py-16 text-center text-sm text-muted-foreground">
          {locale === "ar"
            ? "لا توجد بيانات للفترة المختارة."
            : "No data for the selected period."}
        </div>
      ) : (
        <>
          <ReportKpiTiles kpis={data.kpis} locale={locale} />
          <ReportSecondaryStats kpis={data.kpis} locale={locale} />

          <div className="grid gap-4 xl:grid-cols-2">
            <PlatformDistributionCard
              distribution={data.charts.platform_distribution}
              locale={locale}
            />
            <FollowersGrowthCard
              chart={data.charts.followers_growth}
              locale={locale}
            />
          </div>

          <EngagementTimelineCard
            chart={data.charts.engagement_timeline}
            locale={locale}
          />

          <section aria-label="demographics" className="space-y-3">
            {accountsForDemographics.map((account, idx) => (
              <AccountDemographicsRow
                key={account.id}
                account={{
                  id: account.id,
                  account_name: account.account_name,
                  platform: account.platform,
                  profile_image: account.profile_image,
                  demographics: account.demographics ?? null,
                }}
                defaultOpen={idx < 3}
                locale={locale}
              />
            ))}
          </section>

          <AccountsDetailsTable accounts={data.accounts} locale={locale} />

          <PlatformStatisticsCard accounts={data.accounts} locale={locale} />

          <TopPostsList posts={data.top_posts} locale={locale} />

          <ReportFooter generatedAt={data.meta?.generated_at} locale={locale} />
        </>
      )}
    </div>
  );
}