"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import { Button } from "@/components/Button";
import { AnalyticsAccountTabs } from "@/components/dashboard/AnalyticsAccountTabs";
import { DashboardPageContainer } from "@/components/dashboard/DashboardPageContainer";
import { DashboardShell } from "@/components/dashboard/DashboardShell";
import { PlatformAnalyticsNav } from "@/components/dashboard/PlatformAnalyticsNav";
import {
  AudienceAgeSection,
  AudienceCountrySection,
  AudienceGenderSection,
} from "@/components/dashboard/AudienceCountrySection";
import { ConnectedSocialAccountCard } from "@/components/dashboard/SocialAccountUi";
import { useSocialAccountData } from "@/components/dashboard/useSocialAccountData";
import { useSocialAccounts } from "@/components/dashboard/useSocialAccounts";
import {
  shouldRenderAudienceAgeSection,
  shouldRenderAudienceCountrySection,
  shouldRenderAudienceGenderSection,
} from "@/lib/audience-country";
import { EmptyState } from "@/components/ui/EmptyState";
import { ErrorState } from "@/components/ui/ErrorState";
import { PageHeader, SectionHeader } from "@/components/ui/PageHeader";
import { AnalyticsDashboardSkeleton } from "@/components/ui/Skeleton";
import { socialAccountsApi } from "@/lib/api";
import { latestSucceededSyncAt } from "@/lib/analytics-overview";
import {
  groupAccountsByPlatform,
  resolveAnalyticsPageState,
  resolveSelectedAccount,
  type PlatformAnalyticsGroup,
} from "@/lib/platform-analytics";
import {
  buildAnalyticsAccountHeaderViewModel,
  listAccountForId,
  listIdentityFromDataAccount,
} from "@/lib/social-account-card-metrics";
import {
  analyticsAccountSyncControl,
  analyticsPageRefreshControl,
  providerSupportsOAuthReconnect,
  reconnectActionLabel,
  socialAccountNeedsReconnect,
  syncNeedsReconnect,
} from "@/lib/social-auth-failure";
import { formatRelativeSyncTime } from "@/lib/social-sync-progress";
import { socialProviderLabel } from "@/lib/social-providers";
import type { SocialAccount } from "@/types/social-account";

function syncButtonLabel(kind: string, label: string): string {
  if (kind === "refresh") {
    return "Sync";
  }
  if (kind === "syncing") {
    return "Syncing…";
  }
  return label;
}

function PlatformConnectedAccountSection({
  group,
  listAccounts,
  selectedAccountId,
  onSelectAccount,
  syncingId,
  onRefreshAccount,
}: {
  group: PlatformAnalyticsGroup;
  listAccounts: readonly SocialAccount[];
  selectedAccountId: number | null;
  onSelectAccount: (accountId: number) => void;
  syncingId: number | null;
  onRefreshAccount: (accountId: number) => void;
}) {
  const [reconnecting, setReconnecting] = useState(false);
  const selected = resolveSelectedAccount(group.accounts, selectedAccountId);

  if (!selected) {
    return null;
  }

  const listAccount =
    listAccountForId(listAccounts, selected.id) ?? listIdentityFromDataAccount(selected);
  const metrics = buildAnalyticsAccountHeaderViewModel(listAccounts, selected);
  const needsReconnect = socialAccountNeedsReconnect(listAccount);
  const syncControl = analyticsAccountSyncControl(selected.sync, {
    isSubmitting: syncingId === selected.id || reconnecting,
    provider: selected.provider,
  });
  const canReconnect = providerSupportsOAuthReconnect(selected.provider);
  const syncDisabled =
    needsReconnect ||
    selected.sync?.status === "pending" ||
    syncingId === selected.id ||
    reconnecting ||
    !syncControl.actionable ||
    syncControl.kind === "reconnect";

  const headingId = `${group.sectionId}-heading`;

  return (
    <section
      id={group.sectionId}
      aria-labelledby={headingId}
      className="scroll-mt-20 space-y-3"
    >
      <SectionHeader id={headingId} title={group.label} />

      {group.accounts.length > 1 ? (
        <AnalyticsAccountTabs
          accounts={group.accounts}
          selectedId={selected.id}
          onSelect={onSelectAccount}
          label={`${group.label} accounts`}
        />
      ) : null}

      <div className="space-y-3">
        <ConnectedSocialAccountCard
          account={listAccount}
          metrics={metrics}
          actions={
            <>
              {syncControl.kind === "reconnect" && canReconnect ? (
                <Button
                  type="button"
                  size="sm"
                  disabled={reconnecting}
                  aria-busy={reconnecting}
                  aria-label={reconnectActionLabel(selected.provider)}
                  onClick={() => {
                    if (reconnecting) {
                      return;
                    }
                    setReconnecting(true);
                    window.location.assign(socialAccountsApi.connectStartUrl(selected.provider));
                  }}
                >
                  {reconnecting ? "Redirecting…" : reconnectActionLabel(selected.provider)}
                </Button>
              ) : syncControl.kind === "reconnect" ? null : (
                <Button
                  type="button"
                  variant="secondary"
                  size="sm"
                  disabled={syncDisabled}
                  aria-busy={
                    syncControl.kind === "syncing" ||
                    syncControl.kind === "loading" ||
                    syncingId === selected.id
                  }
                  aria-label={`Sync ${socialProviderLabel(selected.provider)}`}
                  onClick={() => {
                    if (!syncControl.actionable || syncDisabled) {
                      return;
                    }
                    onRefreshAccount(selected.id);
                  }}
                >
                  {syncButtonLabel(syncControl.kind, syncControl.label)}
                </Button>
              )}
            </>
          }
        />

        {shouldRenderAudienceCountrySection("analytics", selected.provider) ||
        shouldRenderAudienceAgeSection("analytics", selected.provider) ||
        shouldRenderAudienceGenderSection("analytics", selected.provider) ? (
          <div className="grid gap-4 lg:grid-cols-3">
            {shouldRenderAudienceCountrySection("analytics", selected.provider) ? (
              <div className="rounded-pv border border-line bg-surface px-4 py-4 sm:px-5">
                <AudienceCountrySection account={selected} />
              </div>
            ) : null}
            {shouldRenderAudienceAgeSection("analytics", selected.provider) ? (
              <div className="rounded-pv border border-line bg-surface px-4 py-4 sm:px-5">
                <AudienceAgeSection account={selected} />
              </div>
            ) : null}
            {shouldRenderAudienceGenderSection("analytics", selected.provider) ? (
              <div className="rounded-pv border border-line bg-surface px-4 py-4 sm:px-5">
                <AudienceGenderSection account={selected} />
              </div>
            ) : null}
          </div>
        ) : null}
      </div>
    </section>
  );
}

function DashboardContent() {
  const { dashboard, isLoading, error, retry, syncingId, refreshAccount } = useSocialAccountData();
  const { accounts: listAccounts } = useSocialAccounts();
  const [selectedByProvider, setSelectedByProvider] = useState<Record<string, number>>({});

  const platformGroups = useMemo(
    () => groupAccountsByPlatform(dashboard?.accounts ?? []),
    [dashboard?.accounts],
  );

  useEffect(() => {
    if (!dashboard?.accounts.length) {
      setSelectedByProvider({});
      return;
    }

    setSelectedByProvider((current) => {
      const next: Record<string, number> = {};
      for (const group of platformGroups) {
        const existingId = current[group.provider];
        const stillValid =
          existingId !== undefined && group.accounts.some((account) => account.id === existingId);
        next[group.provider] = stillValid ? existingId : group.accounts[0].id;
      }
      return next;
    });
  }, [dashboard, platformGroups]);

  const handleSelectAccount = useCallback((provider: string, accountId: number) => {
    setSelectedByProvider((current) => ({
      ...current,
      [provider]: accountId,
    }));
  }, []);

  const handleRefreshAccount = useCallback(
    (accountId: number) => {
      void refreshAccount(accountId);
    },
    [refreshAccount],
  );

  const handleRefreshAll = useCallback(() => {
    if (!dashboard) {
      return;
    }

    for (const account of dashboard.accounts) {
      if (syncNeedsReconnect(account.sync)) {
        continue;
      }

      if (account.sync?.status !== "pending" && syncingId !== account.id) {
        void refreshAccount(account.id);
      }
    }
  }, [dashboard, refreshAccount, syncingId]);

  const isAnySyncing =
    syncingId !== null || dashboard?.accounts.some((account) => account.sync?.status === "pending");

  const pageState = resolveAnalyticsPageState({
    isLoading,
    hasDashboard: Boolean(dashboard),
    error,
    accountCount: dashboard?.accounts.length ?? 0,
  });

  if (pageState === "loading") {
    return (
      <DashboardPageContainer>
        <AnalyticsDashboardSkeleton />
      </DashboardPageContainer>
    );
  }

  if (pageState === "error") {
    return (
      <DashboardPageContainer>
        <ErrorState
          title="Unable to load analytics"
          message={error || "Something went wrong."}
          onRetry={retry}
        />
      </DashboardPageContainer>
    );
  }

  if (pageState === "empty") {
    return (
      <DashboardPageContainer>
        <PageHeader description="Review connected Instagram, Facebook, TikTok, and X accounts with profile metrics and audience country when available." />
        <EmptyState
          title="No connected accounts"
          description="Connect a social account to view synced analytics for Instagram, Facebook, TikTok, or X."
          action={
            <Button href="/dashboard/social-accounts" size="sm">
              Manage social accounts
            </Button>
          }
        />
      </DashboardPageContainer>
    );
  }

  if (!dashboard) {
    return null;
  }

  const lastSynced = formatRelativeSyncTime(latestSucceededSyncAt(dashboard.accounts));
  const pageRefresh = analyticsPageRefreshControl(dashboard.accounts, Boolean(isAnySyncing));

  return (
    <DashboardPageContainer>
      <PageHeader
        description="Connected social accounts by platform — profile metrics plus audience country from official Insights when available."
        actions={
          <div className="flex flex-col items-stretch gap-1 sm:items-end">
            <Button
              type="button"
              variant="secondary"
              size="sm"
              disabled={!pageRefresh.actionable}
              aria-busy={!pageRefresh.actionable}
              onClick={() => {
                if (!pageRefresh.actionable) {
                  return;
                }
                handleRefreshAll();
              }}
            >
              {pageRefresh.label}
            </Button>
            {lastSynced ? (
              <p className="text-[0.6875rem] text-ink-40">Last synced {lastSynced}</p>
            ) : null}
          </div>
        }
      />

      <PlatformAnalyticsNav groups={platformGroups} />

      <div className="space-y-6">
        {platformGroups.map((group) => (
          <PlatformConnectedAccountSection
            key={group.provider}
            group={group}
            listAccounts={listAccounts}
            selectedAccountId={selectedByProvider[group.provider] ?? null}
            onSelectAccount={(accountId) => handleSelectAccount(group.provider, accountId)}
            syncingId={syncingId}
            onRefreshAccount={handleRefreshAccount}
          />
        ))}
      </div>
    </DashboardPageContainer>
  );
}

const CREATOR_ONLY = ["creator"] as const;

export function SocialAccountDataDashboardPage() {
  return (
    <DashboardShell title="Analytics" allowedAccountTypes={CREATOR_ONLY}>
      {() => <DashboardContent />}
    </DashboardShell>
  );
}