"use client";

import { useEffect, useMemo, useState } from "react";
import { Button } from "@/components/Button";
import { DashboardPageContainer } from "@/components/dashboard/DashboardPageContainer";
import { DashboardShell } from "@/components/dashboard/DashboardShell";
import { SocialProviderIcon } from "@/components/dashboard/SocialProviderIcon";
import { useSocialAccountData } from "@/components/dashboard/useSocialAccountData";
import { useSocialAccounts } from "@/components/dashboard/useSocialAccounts";
import { EmptyState } from "@/components/ui/EmptyState";
import { PageHeader, SectionHeader } from "@/components/ui/PageHeader";
import { StatGridSkeleton } from "@/components/ui/Skeleton";
import { StatusBadge } from "@/components/ui/StatusBadge";
import { DashboardStatCard } from "@/components/dashboard/DashboardStatCard";
import { earningsApi } from "@/lib/api/earnings";
import { invitationApi, participantApi } from "@/lib/api/campaign-participation";
import { campaignApi } from "@/lib/api/campaigns";
import {
  brandCampaignCountsFromSummary,
  brandDashboardPrimaryActions,
  resolveBrandDashboardNextAction,
  sortBrandCampaignsForOverview,
  type BrandDashboardNextAction,
} from "@/lib/brand-dashboard";
import {
  creatorDashboardPrimaryActions,
  creatorOpportunityOpenCount,
  opportunitiesHubPath,
  resolveCreatorDashboardNextAction,
  type CreatorDashboardNextAction,
} from "@/lib/creator-dashboard";
import { resolveOpportunityDefaultTab } from "@/lib/campaign-opportunity";
import { campaignStatusBadgeVariant, campaignStatusLabel } from "@/lib/campaigns";
import { formatCount, formatMoneyMinor } from "@/lib/format";
import { socialProviderLabel } from "@/lib/social-providers";
import type { User } from "@/types/auth";
import type { CampaignListItem, CampaignListSummary } from "@/types/campaign";
import type { CampaignInvitation, CampaignParticipant } from "@/types/campaign-participation";
import type { CreatorEarningListItem, CreatorEarningsSummary } from "@/types/earnings";
import Link from "next/link";

const ZERO_EARNINGS: CreatorEarningsSummary = {
  currency: "USD",
  payable_amount: 0,
  in_progress_amount: 0,
  transferred_amount: 0,
};

const EMPTY_CAMPAIGN_SUMMARY: CampaignListSummary = {
  total: 0,
  draft: 0,
  active: 0,
  paused: 0,
  completed: 0,
  cancelled: 0,
  pending_applications: 0,
  payments_needing_authorization: 0,
  deliverables_pending_review: 0,
};

function CreatorOverview({ user }: { user: User }) {
  const { accounts, isLoading: accountsLoading } = useSocialAccounts();
  const { dashboard, isLoading: dataLoading } = useSocialAccountData();

  const [invitations, setInvitations] = useState<CampaignInvitation[]>([]);
  const [participants, setParticipants] = useState<CampaignParticipant[]>([]);
  const [earnings, setEarnings] = useState<CreatorEarningListItem[]>([]);
  const [earningsSummary, setEarningsSummary] = useState<CreatorEarningsSummary>(ZERO_EARNINGS);
  const [connectReady, setConnectReady] = useState(true);
  const [activityLoading, setActivityLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;

    async function loadActivity() {
      setActivityLoading(true);
      try {
        const [invitePage, participantPage, earningsPage] = await Promise.all([
          invitationApi.listMine({ per_page: 50 }),
          participantApi.listMine({ per_page: 50 }),
          earningsApi.listMine(),
        ]);
        if (cancelled) {
          return;
        }
        setInvitations(invitePage.invitations);
        setParticipants(participantPage.participants);
        setEarnings(earningsPage.earnings);
        setEarningsSummary(earningsPage.summary);
        setConnectReady(earningsPage.connect.ready);
      } catch {
        if (!cancelled) {
          setInvitations([]);
          setParticipants([]);
          setEarnings([]);
          setEarningsSummary(ZERO_EARNINGS);
          setConnectReady(true);
        }
      } finally {
        if (!cancelled) {
          setActivityLoading(false);
        }
      }
    }

    void loadActivity();

    return () => {
      cancelled = true;
    };
  }, []);

  const metricsLoading = accountsLoading || dataLoading || activityLoading;

  const totalFollowers = accounts.reduce((sum, account) => {
    if (account.followers_count === null) {
      return sum;
    }

    return sum + account.followers_count;
  }, 0);

  const followersValue =
    !accountsLoading && totalFollowers > 0 ? formatCount(totalFollowers) : null;

  const aggregate = dashboard?.aggregate;
  const viewsValue =
    !dataLoading && aggregate && aggregate.total_views !== null
      ? formatCount(aggregate.total_views)
      : null;

  const connectedCount = accounts.length;
  const showOnboarding = !accountsLoading && connectedCount === 0;
  const opportunityCount = creatorOpportunityOpenCount(invitations, participants);
  const opportunityValue = activityLoading ? null : formatCount(opportunityCount);
  const opportunitiesHref = opportunitiesHubPath(
    resolveOpportunityDefaultTab({
      pendingInvitationCount: invitations.filter((item) => item.status === "pending").length,
      participants,
    }),
  );

  const nextAction: CreatorDashboardNextAction | null = activityLoading
    ? null
    : resolveCreatorDashboardNextAction({
        connectedAccountCount: connectedCount,
        invitations,
        participants,
        earnings,
        connectReady,
      });

  const actions = creatorDashboardPrimaryActions({
    connectedAccountCount: connectedCount,
    nextAction,
    invitations,
    participants,
  });

  const hasEarningsActivity =
    earningsSummary.payable_amount > 0 ||
    earningsSummary.in_progress_amount > 0 ||
    earningsSummary.transferred_amount > 0;

  return (
    <DashboardPageContainer>
      <PageHeader
        description="Overview of your creator activity."
        actions={
          <>
            <Button href={actions.primary.href} size="sm">
              {actions.primary.label}
            </Button>
            <Button href={actions.secondary.href} variant="secondary" size="sm">
              {actions.secondary.label}
            </Button>
          </>
        }
      />

      {nextAction ? (
        <div className="flex flex-col gap-3 rounded-pv border border-line bg-surface px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
          <div className="min-w-0">
            <p className="text-[0.8125rem] font-medium text-primary">{nextAction.title}</p>
            <p className="mt-0.5 text-[0.75rem] text-ink-60">{nextAction.description}</p>
          </div>
          <Button href={nextAction.href} size="sm" className="shrink-0">
            {nextAction.cta}
          </Button>
        </div>
      ) : null}

      {showOnboarding && !nextAction ? (
        <div className="flex flex-col gap-3 rounded-pv border border-line bg-surface px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
          <div className="min-w-0">
            <p className="text-[0.8125rem] font-medium text-primary">Connect social accounts</p>
            <p className="mt-0.5 text-[0.75rem] text-ink-60">
              Link your accounts so brands can see your reach.
            </p>
          </div>
          <div className="flex shrink-0 flex-wrap gap-2">
            <Button href="/dashboard/profile" size="sm" variant="secondary">
              Complete profile
            </Button>
            <Button href="/dashboard/social-accounts" size="sm">
              Connect accounts
            </Button>
          </div>
        </div>
      ) : null}

      {metricsLoading ? (
        <StatGridSkeleton count={3} />
      ) : (
        <section aria-labelledby="creator-metrics-heading">
          <h2 id="creator-metrics-heading" className="sr-only">
            Creator metrics
          </h2>
          <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
            <DashboardStatCard
              label="Followers"
              hint="Connect social accounts to see follower counts."
              value={followersValue}
            />
            <DashboardStatCard
              label="Views"
              hint="Views appear when provider APIs return them."
              value={viewsValue}
            />
            <DashboardStatCard
              label="Opportunities"
              hint="Browse open campaigns and invitations."
              value={opportunityValue}
              description={
                opportunityCount > 0
                  ? "Pending invitations and active campaigns."
                  : "No open invitations or active campaigns."
              }
              href={opportunitiesHref}
            />
          </div>
        </section>
      )}

      {!activityLoading && hasEarningsActivity ? (
        <section aria-labelledby="creator-earnings-heading">
          <div className="mb-2 flex items-center justify-between gap-2">
            <h2 id="creator-earnings-heading" className="text-[0.875rem] font-semibold text-primary">
              Earnings
            </h2>
            <Link
              href="/dashboard/earnings"
              className="text-[0.8125rem] font-medium text-accent hover:text-accent-hover"
            >
              View all
            </Link>
          </div>
          <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
            <DashboardStatCard
              label="Payable"
              hint="Nothing payable yet."
              value={formatMoneyMinor(earningsSummary.payable_amount, earningsSummary.currency)}
              description="Ready to transfer when Connect is ready."
              href="/dashboard/earnings"
            />
            <DashboardStatCard
              label="In progress"
              hint="No funded work in progress."
              value={formatMoneyMinor(
                earningsSummary.in_progress_amount,
                earningsSummary.currency,
              )}
              description="Funded campaign work not yet payable."
              href="/dashboard/earnings"
            />
            <DashboardStatCard
              label="Transferred"
              hint="No transfers yet."
              value={formatMoneyMinor(
                earningsSummary.transferred_amount,
                earningsSummary.currency,
              )}
              description="Moved to your Stripe Connect account."
              href="/dashboard/earnings"
            />
          </div>
        </section>
      ) : null}

      {!accountsLoading && connectedCount > 0 ? (
        <section aria-labelledby="creator-accounts-heading">
          <div className="mb-2 flex items-center justify-between gap-2">
            <h2 id="creator-accounts-heading" className="text-[0.875rem] font-semibold text-primary">
              Connected accounts
            </h2>
            <Link
              href="/dashboard/social-accounts"
              className="text-[0.8125rem] font-medium text-accent hover:text-accent-hover"
            >
              Manage
            </Link>
          </div>
          <ul className="divide-y divide-line rounded-pv border border-line bg-surface">
            {accounts.slice(0, 4).map((account) => (
              <li key={account.id} className="flex items-center justify-between gap-3 px-3 py-2.5">
                <div className="flex min-w-0 items-center gap-2.5">
                  <span className="inline-flex size-8 shrink-0 items-center justify-center rounded-full bg-bg text-primary">
                    <SocialProviderIcon provider={account.provider} className="size-4" />
                  </span>
                  <div className="min-w-0">
                    <p className="truncate text-[0.8125rem] font-medium text-primary">
                      {socialProviderLabel(account.provider)}
                    </p>
                    <p className="truncate text-[0.75rem] text-ink-60">
                      {account.username ? `@${account.username}` : account.display_name ?? "Connected"}
                    </p>
                  </div>
                </div>
                {account.followers_count !== null ? (
                  <p className="shrink-0 text-[0.8125rem] font-medium tabular-nums text-primary">
                    {formatCount(account.followers_count)}
                  </p>
                ) : (
                  <span className="shrink-0 text-[0.75rem] text-ink-40">Connected</span>
                )}
              </li>
            ))}
          </ul>
        </section>
      ) : null}

      <section aria-labelledby="creator-quick-links-heading" className="sr-only">
        <h2 id="creator-quick-links-heading">Quick links</h2>
        <p>Welcome, {user.name}</p>
      </section>
    </DashboardPageContainer>
  );
}

function BrandOverview({ user }: { user: User }) {
  const [campaigns, setCampaigns] = useState<CampaignListItem[]>([]);
  const [summary, setSummary] = useState<CampaignListSummary>(EMPTY_CAMPAIGN_SUMMARY);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;

    async function loadCampaigns() {
      setIsLoading(true);
      try {
        const page = await campaignApi.list({ per_page: 20 });
        if (!cancelled) {
          setCampaigns(page.campaigns);
          setSummary(page.summary);
        }
      } catch {
        if (!cancelled) {
          setCampaigns([]);
          setSummary(EMPTY_CAMPAIGN_SUMMARY);
        }
      } finally {
        if (!cancelled) {
          setIsLoading(false);
        }
      }
    }

    void loadCampaigns();

    return () => {
      cancelled = true;
    };
  }, []);

  const counts = useMemo(
    () => brandCampaignCountsFromSummary(summary, campaigns),
    [summary, campaigns],
  );
  const overviewCampaigns = useMemo(
    () => sortBrandCampaignsForOverview(campaigns).slice(0, 5),
    [campaigns],
  );

  const nextAction: BrandDashboardNextAction | null = isLoading
    ? null
    : resolveBrandDashboardNextAction({ campaigns, summary });

  const actions = brandDashboardPrimaryActions({
    campaignCount: counts.total,
    nextAction,
  });

  const needsReviewCount =
    summary.pending_applications +
    summary.payments_needing_authorization +
    summary.deliverables_pending_review;

  return (
    <DashboardPageContainer>
      <PageHeader
        description="Manage your creator campaigns and partnerships."
        actions={
          <>
            <Button href={actions.primary.href} size="sm">
              {actions.primary.label}
            </Button>
            <Button href={actions.secondary.href} variant="secondary" size="sm">
              {actions.secondary.label}
            </Button>
          </>
        }
      />

      {nextAction ? (
        <div className="flex flex-col gap-3 rounded-pv border border-line bg-surface px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
          <div className="min-w-0">
            <p className="text-[0.8125rem] font-medium text-primary">{nextAction.title}</p>
            <p className="mt-0.5 text-[0.75rem] text-ink-60">{nextAction.description}</p>
          </div>
          <Button href={nextAction.href} size="sm" className="shrink-0">
            {nextAction.cta}
          </Button>
        </div>
      ) : null}

      {isLoading ? (
        <StatGridSkeleton count={3} />
      ) : (
        <section aria-labelledby="brand-metrics-heading">
          <h2 id="brand-metrics-heading" className="sr-only">
            Campaign metrics
          </h2>
          <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
            <DashboardStatCard
              label="Active"
              hint="No active campaigns yet."
              value={formatCount(counts.active)}
              description={
                counts.active > 0
                  ? "Live campaigns accepting creators."
                  : "Activate a draft to start collaborating."
              }
              href="/dashboard/campaigns"
            />
            <DashboardStatCard
              label={needsReviewCount > 0 ? "Needs attention" : "Drafts"}
              hint={
                needsReviewCount > 0
                  ? "No applications, payments, or deliverables waiting."
                  : "No drafts in progress."
              }
              value={formatCount(
                needsReviewCount > 0 ? needsReviewCount : counts.draft,
              )}
              description={
                needsReviewCount > 0
                  ? "Applications, payments, and deliverables waiting for your action."
                  : counts.draft > 0
                    ? "Briefs waiting to be finished or activated."
                    : "Create a campaign to save a draft."
              }
              href={
                nextAction?.href.includes("tab=applications") ||
                nextAction?.href.includes("tab=payments") ||
                nextAction?.href.includes("tab=deliverables")
                  ? nextAction.href
                  : "/dashboard/campaigns"
              }
            />
            <DashboardStatCard
              label="Total"
              hint="No campaigns yet."
              value={formatCount(counts.total)}
              description={
                counts.total > 0
                  ? "All campaigns including paused and completed."
                  : "Campaigns you create will appear here."
              }
              href="/dashboard/campaigns"
            />
          </div>
        </section>
      )}

      <section aria-labelledby="brand-campaigns-heading" className="space-y-2">
        <SectionHeader
          id="brand-campaigns-heading"
          title="Campaigns"
          description="Recent briefs and their status."
          action={
            <Link
              href="/dashboard/campaigns"
              className="text-[0.8125rem] font-medium text-accent hover:text-accent-hover"
            >
              View all
            </Link>
          }
        />

        {isLoading ? (
          <StatGridSkeleton count={2} />
        ) : overviewCampaigns.length === 0 ? (
          <EmptyState
            title="No campaigns yet"
            description="Create a brief, set budget and timeline, then discover creators that fit."
            action={
              <Button href="/dashboard/campaigns/new" size="sm">
                Create campaign
              </Button>
            }
          />
        ) : (
          <ul className="divide-y divide-line rounded-pv border border-line bg-surface">
            {overviewCampaigns.map((campaign) => {
              const attention =
                campaign.pending_applications_count +
                campaign.payments_needing_authorization_count +
                campaign.deliverables_pending_review_count;
              return (
                <li key={campaign.id}>
                  <Link
                    href={
                      campaign.pending_applications_count > 0
                        ? `/dashboard/campaigns/${campaign.id}?tab=applications`
                        : campaign.payments_needing_authorization_count > 0
                          ? `/dashboard/campaigns/${campaign.id}?tab=payments`
                          : campaign.deliverables_pending_review_count > 0
                            ? `/dashboard/campaigns/${campaign.id}?tab=deliverables`
                            : `/dashboard/campaigns/${campaign.id}`
                    }
                    className="flex items-center justify-between gap-3 px-3 py-2.5 transition-colors hover:bg-bg"
                  >
                    <div className="min-w-0">
                      <p className="truncate text-[0.8125rem] font-medium text-primary">
                        {campaign.name}
                      </p>
                      <p className="mt-0.5 text-[0.75rem] text-ink-60">
                        {formatMoneyMinor(campaign.budget_amount, campaign.currency)}
                        {attention > 0
                          ? ` · ${attention} waiting`
                          : null}
                      </p>
                    </div>
                    <StatusBadge variant={campaignStatusBadgeVariant(campaign.status)}>
                      {campaignStatusLabel(campaign.status)}
                    </StatusBadge>
                  </Link>
                </li>
              );
            })}
          </ul>
        )}
      </section>

      <section aria-labelledby="brand-welcome-heading" className="sr-only">
        <h2 id="brand-welcome-heading">Welcome</h2>
        <p>Welcome, {user.name}</p>
      </section>
    </DashboardPageContainer>
  );
}

export function DashboardPage() {
  return (
    <DashboardShell title="Dashboard">
      {(user) =>
        user.account_type === "creator" ? (
          <CreatorOverview user={user} />
        ) : (
          <BrandOverview user={user} />
        )
      }
    </DashboardShell>
  );
}