import { DemographicBar } from "@/components/dashboard/AudienceDemographicsSection";
import { EmptyState } from "@/components/ui/EmptyState";
import {
  audienceCountrySourceLabel,
  audienceDimensionUnavailableDescription,
  resolveAudienceAgeRanges,
  resolveAudienceCountries,
  resolveAudienceGender,
  type AudienceDemographicView,
} from "@/lib/audience-country";
import type { SocialAccountData } from "@/types/social-data";

function AudienceDimensionUnavailable({
  account,
  dimension,
}: {
  account: SocialAccountData;
  dimension: "countries" | "age" | "gender";
}) {
  const title =
    dimension === "countries"
      ? "Audience country data unavailable"
      : dimension === "age"
        ? "Audience age data unavailable"
        : "Audience gender data unavailable";

  return (
    <EmptyState
      variant="dashed"
      title={title}
      description={audienceDimensionUnavailableDescription(
        account.provider,
        dimension,
        account.audience?.followers,
      )}
    />
  );
}

function AudienceDimensionPanel({
  account,
  headingId,
  title,
  dimension,
  view,
}: {
  account: SocialAccountData;
  headingId: string;
  title: string;
  dimension: "countries" | "age" | "gender";
  view: AudienceDemographicView;
}) {
  const source = audienceCountrySourceLabel(view.source, account.provider);

  return (
    <section aria-labelledby={headingId}>
      <div className="flex flex-wrap items-baseline justify-between gap-2">
        <div>
          <h4 id={headingId} className="text-[0.8125rem] font-semibold text-primary">
            {title}
          </h4>
          {view.available && source ? (
            <p className="mt-0.5 text-[0.75rem] text-ink-60">Source: {source}</p>
          ) : null}
        </div>
        {view.available && view.capturedAt ? (
          <p className="text-[0.75rem] text-ink-60">
            Updated{" "}
            {new Intl.DateTimeFormat(undefined, {
              dateStyle: "medium",
              timeStyle: "short",
            }).format(new Date(view.capturedAt))}
          </p>
        ) : null}
      </div>

      <div className="mt-3">
        {!view.available || !view.items ? (
          <AudienceDimensionUnavailable account={account} dimension={dimension} />
        ) : (
          <div className="space-y-2.5">
            <div className="flex items-center justify-between gap-3 text-[0.75rem] font-medium text-ink-40">
              <span>{dimension === "countries" ? "Country" : dimension === "age" ? "Age" : "Gender"}</span>
              <span>Percentage / count</span>
            </div>
            {view.items.map((item) => (
              <DemographicBar key={`${item.code ?? item.label}`} item={item} />
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

/**
 * Analytics-only Audience Country panel.
 * Uses the existing social-accounts data API demographics.countries payload.
 */
export function AudienceCountrySection({
  account,
}: {
  account: SocialAccountData;
}) {
  return (
    <AudienceDimensionPanel
      account={account}
      headingId={`audience-country-${account.id}`}
      title="Audience Country"
      dimension="countries"
      view={resolveAudienceCountries(account)}
    />
  );
}

/**
 * Analytics-only Audience Age panel (Instagram Insights age ranges when present).
 */
export function AudienceAgeSection({
  account,
}: {
  account: SocialAccountData;
}) {
  return (
    <AudienceDimensionPanel
      account={account}
      headingId={`audience-age-${account.id}`}
      title="Audience Age"
      dimension="age"
      view={resolveAudienceAgeRanges(account)}
    />
  );
}

/**
 * Analytics-only Audience Gender panel (Instagram Insights gender when present).
 */
export function AudienceGenderSection({
  account,
}: {
  account: SocialAccountData;
}) {
  return (
    <AudienceDimensionPanel
      account={account}
      headingId={`audience-gender-${account.id}`}
      title="Audience Gender"
      dimension="gender"
      view={resolveAudienceGender(account)}
    />
  );
}