import {
  Activity,
  BadgeDollarSign,
  BrainCircuit,
  ChartNoAxesCombined,
  Gauge,
  Keyboard,
  Repeat2,
  Sparkles,
  Target,
  Users,
} from "lucide-react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { adminApi } from "../../api/client";
import type {
  AnalyticsRate,
  ProductAnalyticsOverview,
  SortOrder,
} from "../../api/types";
import { ChartToolbar } from "../../components/chart-toolbar";
import { CohortHeatmap } from "../../components/charts/cohort-heatmap";
import { ComparisonBarChart } from "../../components/charts/comparison-bar-chart";
import { FunnelChart } from "../../components/charts/funnel-chart";
import { FilterControl, ToggleFilter } from "../../components/filter-control";
import { Card, ErrorState, LoadingState, PageHeader, StatCard } from "../../components/primitives";
import { PeriodCaption } from "../../components/period-caption";
import { RangeControl } from "../../components/range-control";
import { SortControl } from "../../components/sort-control";
import { formatNumber } from "../../lib/format";
import { stableSort } from "../../lib/sort";

export function AnalyticsPage() {
  const [range, setRange] = useState("30d");
  const [data, setData] = useState<ProductAnalyticsOverview>();
  const [error, setError] = useState<unknown>();
  const [executionMode, setExecutionMode] = useState("");
  const [aiSort, setAiSort] = useState<"successes" | "users">("successes");
  const [aiOrder, setAiOrder] = useState<SortOrder>("desc");
  const [channelSort, setChannelSort] = useState<"installs" | "activated" | "rate">("installs");
  const [channelOrder, setChannelOrder] = useState<SortOrder>("desc");
  const [hideUnknown, setHideUnknown] = useState(false);
  const [cohortOrder, setCohortOrder] = useState<SortOrder>("desc");
  const [minimumCohortSize, setMinimumCohortSize] = useState(0);
  const [matureOnly, setMatureOnly] = useState(false);
  const requestVersion = useRef(0);

  const load = useCallback(async () => {
    const version = ++requestVersion.current;
    setError(undefined);
    try {
      const response = await adminApi.productAnalytics(range);
      if (requestVersion.current === version) setData(response);
    } catch (requestError) {
      if (requestVersion.current === version) setError(requestError);
    }
  }, [range]);

  useEffect(() => {
    void load();
  }, [load]);

  const visibleAiFeatures = useMemo(
    () =>
      stableSort(
        (data?.aiFeatures ?? []).filter(
          (item) => !executionMode || item.executionMode === executionMode,
        ),
        (item) => (aiSort === "successes" ? item.successes : item.users),
        aiOrder,
      ),
    [aiOrder, aiSort, data?.aiFeatures, executionMode],
  );
  const visibleChannels = useMemo(
    () =>
      stableSort(
        (data?.growth.channels ?? []).filter(
          (channel) => !hideUnknown || channel.channel !== "UNKNOWN",
        ),
        (channel) =>
          channelSort === "installs"
            ? channel.installations
            : channelSort === "activated"
              ? channel.activated
              : channel.activationRate.percent ?? -1,
        channelOrder,
      ),
    [channelOrder, channelSort, data?.growth.channels, hideUnknown],
  );
  const visibleCohorts = useMemo(
    () =>
      stableSort(
        (data?.retention ?? []).filter(
          (cohort) =>
            cohort.size >= minimumCohortSize &&
            (!matureOnly || cohort.d30?.percent != null),
        ),
        (cohort) => cohort.cohortDate,
        cohortOrder,
      ),
    [cohortOrder, data?.retention, matureOnly, minimumCohortSize],
  );

  if (error) return <ErrorState error={error} retry={() => void load()} />;
  if (!data) return <LoadingState label="加载产品数据" />;

  const weeklyGrowth = data.northStar.weekOverWeekPercent;

  return (
    <div className="space-y-6">
      <PageHeader
        eyebrow="CEO Dashboard"
        title="产品增长与留存"
        description="围绕成功使用 AI 的核心价值事件，观察增长质量、留存、消耗与付费。"
        actions={
          <div className="flex flex-col items-end gap-2">
            <RangeControl value={range} onChange={setRange} />
            <PeriodCaption from={data.period.from} until={data.period.until} />
          </div>
        }
      />

      <section className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4" aria-label="北极星指标">
        <StatCard
          label="周 AI 活跃用户"
          value={formatNumber(data.northStar.weeklyAiActiveUsers)}
          hint={
            weeklyGrowth == null
              ? "暂无可比上周数据"
              : `较上周 ${signedPercent(weeklyGrowth)}`
          }
          icon={Sparkles}
          tone="success"
        />
        <StatCard
          label="24 小时激活率"
          value={rateLabel(data.growth.activation24h)}
          hint={`${formatNumber(data.growth.activation24h.numerator)} / ${formatNumber(data.growth.activation24h.denominator)} 位新用户`}
          icon={Target}
        />
        <StatCard
          label="D7 价值留存"
          value={latestMatureRetention(data, "d7")}
          hint="激活后第 7 天再次成功使用 AI"
          icon={Repeat2}
          tone="violet"
        />
        <StatCard
          label="每活跃用户日均消耗"
          value={optionalNumber(data.consumption.averageDailyCreditsPerActiveUser)}
          hint={`周期总消耗 ${formatNumber(data.consumption.totalCredits)} 积分`}
          icon={Gauge}
          tone="warning"
        />
      </section>

      <section className="grid gap-6 xl:grid-cols-2">
        <Card className="overflow-hidden">
          <SectionHeader
            title="增长激活漏斗"
            description="同一批已完成 24 小时观察的新安装，所有步骤必须在首次启动后 24 小时内完成"
            icon={Target}
          />
          <FunnelChart steps={data.growthFunnel} />
        </Card>
        <Card className="overflow-hidden">
          <SectionHeader
            title="留存 Cohort 热力图"
            description="按首次 AI 成功日分组，未成熟窗口显示为 —"
            icon={ChartNoAxesCombined}
          />
          <ChartToolbar label="留存 cohort 筛选与排序">
            <SortControl
              label="激活日期"
              value="date"
              order={cohortOrder}
              options={[{ value: "date", label: "激活日期" }]}
              onChange={(_, order) => setCohortOrder(order)}
            />
            <FilterControl
              label="最小样本量"
              value={String(minimumCohortSize)}
              options={[
                { value: "0", label: "不限" },
                { value: "10", label: "至少 10 人" },
                { value: "50", label: "至少 50 人" },
                { value: "100", label: "至少 100 人" },
              ]}
              onChange={(value) => setMinimumCohortSize(Number(value))}
            />
            <ToggleFilter label="仅显示 D30 已成熟" checked={matureOnly} onChange={setMatureOnly} />
          </ChartToolbar>
          <CohortHeatmap cohorts={visibleCohorts} />
        </Card>
      </section>

      <section className="grid gap-6 xl:grid-cols-[1.25fr_0.75fr]">
        <Card className="overflow-hidden">
          <SectionHeader
            title="AI 使用结构"
            description="客户端功能与执行模式，仅包含白名单元数据"
            icon={BrainCircuit}
          />
          <ChartToolbar label="AI 使用结构筛选与排序">
            <FilterControl
              label="执行模式"
              value={executionMode}
              options={[
                { value: "", label: "全部模式" },
                { value: "MANAGED", label: "托管" },
                { value: "LOCAL", label: "本地" },
                { value: "BYOK", label: "BYOK" },
              ]}
              onChange={setExecutionMode}
            />
            <SortControl
              value={aiSort}
              order={aiOrder}
              options={[
                { value: "successes", label: "成功次数" },
                { value: "users", label: "成功用户" },
              ]}
              onChange={(value, order) => {
                setAiSort(value);
                setAiOrder(order);
              }}
            />
          </ChartToolbar>
          {visibleAiFeatures.length === 0 ? (
            <p className="p-8 text-center text-sm text-muted">当前筛选条件下暂无 AI 使用数据</p>
          ) : (
            <ComparisonBarChart
              items={visibleAiFeatures.map((item) => ({
                  id: `${item.feature}-${item.executionMode}`,
                  label: featureLabel(item.feature),
                  value: item.successes,
                  secondaryValue: item.users,
                  hint: executionModeLabel(item.executionMode),
                }))}
              primaryLabel="成功次数"
              secondaryLabel="成功用户"
              primaryTone="violet"
              secondaryTone="success"
            />
          )}
        </Card>

        <Card className="overflow-hidden">
          <SectionHeader
            title="活跃与消耗"
            description="DAU / WAU / MAU 为截至统计截止时刻的滚动 1 / 7 / 30 日 AI 价值活跃用户"
            icon={Activity}
          />
          <ComparisonBarChart
            items={[
              { label: "DAU", value: data.activity.dau },
              { label: "WAU", value: data.activity.wau },
              { label: "MAU", value: data.activity.mau },
            ]}
            primaryLabel="AI 活跃用户"
            primaryTone="success"
          />
          <MetricRows
            rows={[
              ["DAU / MAU", optionalPercent(data.activity.stickinessPercent)],
              ["成功 AI 次数", formatNumber(data.activity.successfulAiRequests)],
              ["人均成功次数", optionalDecimal(data.activity.successfulRequestsPerActiveUser)],
              ["用户日消耗中位数", optionalNumber(data.consumption.medianUserDailyCredits)],
              ["单次托管请求积分", optionalDecimal(data.consumption.averageCreditsPerManagedRequest)],
            ]}
          />
        </Card>
      </section>

      <section className="grid gap-6 xl:grid-cols-2" aria-label="键盘输入统计">
        <Card className="overflow-hidden">
          <SectionHeader
            title="键盘中英文输入"
            description="仅统计 OSGKeyboard 本地聚合后的手动提交字符，不包含输入内容"
            icon={Keyboard}
          />
          <ComparisonBarChart
            items={[
              {
                label: "中文",
                value: data.keyboardUsage.chineseCharacters,
                hint: `占中英文 ${optionalPercent(data.keyboardUsage.chineseSharePercent)}`,
              },
              {
                label: "英文",
                value: data.keyboardUsage.englishCharacters,
                hint: `占中英文 ${optionalPercent(data.keyboardUsage.englishSharePercent)}`,
              },
              {
                label: "其他",
                value: data.keyboardUsage.otherCharacters,
                hint: "数字、标点与 Emoji",
              },
            ]}
            primaryLabel="提交字符数"
            primaryTone="primary"
          />
          <MetricRows
            rows={[
              ["输入活跃用户", formatNumber(data.keyboardUsage.activeUsers)],
              ["激活到输入转化", rateLabel(data.keyboardUsage.activationToInput)],
              ["中文活跃用户", formatNumber(data.keyboardUsage.chineseActiveUsers)],
              ["英文活跃用户", formatNumber(data.keyboardUsage.englishActiveUsers)],
              ["中英双语用户", formatNumber(data.keyboardUsage.bilingualActiveUsers)],
              ["总提交字符", formatNumber(data.keyboardUsage.totalCharacters)],
            ]}
          />
        </Card>

        <Card className="overflow-hidden">
          <SectionHeader
            title="输入会话结构"
            description="一次键盘激活期间至少提交一个字符才计为输入会话"
            icon={Activity}
          />
          <ComparisonBarChart
            items={[
              { label: "仅中文", value: data.keyboardUsage.chineseOnlySessions },
              { label: "仅英文", value: data.keyboardUsage.englishOnlySessions },
              { label: "中英混合", value: data.keyboardUsage.mixedLanguageSessions },
              { label: "仅其他", value: data.keyboardUsage.otherOnlySessions },
            ]}
            primaryLabel="输入会话"
            primaryTone="success"
          />
          <MetricRows
            rows={[
              ["输入会话总数", formatNumber(data.keyboardUsage.inputSessions)],
              [
                "平均每会话字符",
                optionalDecimal(data.keyboardUsage.averageCharactersPerInputSession),
              ],
            ]}
          />
        </Card>
      </section>

      <section className="grid gap-6 xl:grid-cols-3">
        <Card className="overflow-hidden">
          <SectionHeader
            title="付费转化"
            description="所选周期内完成 7 / 30 天观察窗的注册 cohort；购买以 StoreKit 验证为准"
            icon={BadgeDollarSign}
          />
          <ComparisonBarChart
            items={[
              {
                label: "7 天免费转付费",
                value: data.monetization.conversion7d.percent ?? null,
              },
              {
                label: "30 天免费转付费",
                value: data.monetization.conversion30d.percent ?? null,
              },
              {
                label: "复购率",
                value: data.monetization.repeatPurchaseRate.percent ?? null,
              },
            ]}
            primaryLabel="转化率"
            primaryTone="success"
            valueFormatter={(value) => `${value.toFixed(1)}%`}
          />
          <MetricRows
            rows={[
              ["付费用户", formatNumber(data.monetization.payingUsers)],
              ["购买次数", formatNumber(data.monetization.purchases)],
              ["购买积分", formatNumber(data.monetization.creditsPurchased)],
            ]}
          />
        </Card>

        <Card className="overflow-hidden">
          <SectionHeader
            title="推荐增长漏斗"
            description="严格绑定 cohort；分享和打开仅作为独立方向信号"
            icon={Target}
          />
          <MetricRows
            rows={[
              ["客户端分享信号", formatNumber(data.referralSignals.shared)],
              ["邀请打开信号", formatNumber(data.referralSignals.opened)],
            ]}
          />
          <FunnelChart steps={data.referralFunnel} />
        </Card>

        <Card className="overflow-hidden">
          <SectionHeader title="体验护栏" description="避免增长被失败体验抵消" icon={Users} />
          <ComparisonBarChart
            items={[
              {
                label: "客户端 AI",
                value: data.guardrails.clientAiSuccessRate.percent ?? null,
              },
              {
                label: "托管请求",
                value: data.guardrails.managedSuccessRate.percent ?? null,
              },
            ]}
            primaryLabel="成功率"
            primaryTone="primary"
            valueFormatter={(value) => `${value.toFixed(1)}%`}
          />
          <MetricRows
            rows={[
              ["积分不足阻断用户", formatNumber(data.guardrails.creditBlockedUsers)],
              ["首次价值耗时中位数", optionalMinutes(data.growth.medianTimeToValueMinutes)],
            ]}
          />
        </Card>
      </section>

      <section className="grid gap-6 xl:grid-cols-2">
        <Card className="overflow-hidden">
          <SectionHeader
            title="购买意向漏斗"
            description="同一安装依次浏览、发起购买，并由 StoreKit 服务端验证"
            icon={BadgeDollarSign}
          />
          <FunnelChart
            steps={data.monetization.purchaseFunnel}
            emptyText="客户端购买事件暂无样本"
          />
          <MetricRows
            rows={[["取消购买用户", formatNumber(data.monetization.cancelledUsers)]]}
          />
        </Card>

        <Card className="overflow-hidden">
          <SectionHeader
            title="AI 终态延迟分布"
            description="按客户端白名单耗时桶聚合；不推算虚假的精确分位数"
            icon={Gauge}
          />
          <ComparisonBarChart
            items={data.guardrails.latencyBuckets.map((item) => ({
              id: item.bucket,
              label: latencyBucketLabel(item.bucket),
              value: item.successful,
              secondaryValue: item.failed,
            }))}
            primaryLabel="成功"
            secondaryLabel="失败"
            primaryTone="success"
            secondaryTone="warning"
            emptyText="客户端 AI 终态事件暂无样本"
          />
        </Card>
      </section>

      <Card className="overflow-hidden">
        <SectionHeader title="渠道质量" description="新增不是终点，重点比较 24 小时激活" icon={Users} />
        <ChartToolbar label="渠道质量筛选与排序">
          <SortControl
            value={channelSort}
            order={channelOrder}
            options={[
              { value: "installs", label: "已完成观察安装" },
              { value: "activated", label: "激活人数" },
              { value: "rate", label: "激活率" },
            ]}
            onChange={(value, order) => {
              setChannelSort(value);
              setChannelOrder(order);
            }}
          />
          <ToggleFilter label="隐藏未知来源" checked={hideUnknown} onChange={setHideUnknown} />
        </ChartToolbar>
        <div className="grid gap-0 xl:grid-cols-[1fr_260px]">
          <ComparisonBarChart
            items={visibleChannels.map((channel) => ({
              label: channelLabel(channel.channel),
              value: channel.installations,
              secondaryValue: channel.activated,
              hint: `激活率 ${rateLabel(channel.activationRate)}`,
            }))}
            primaryLabel="已完成 24h 观察安装"
            secondaryLabel="24 小时激活"
            emptyText="当前筛选条件下暂无渠道归因数据"
          />
          <MetricRows
            rows={[
              ["新增安装", formatNumber(data.growth.newInstallations)],
              ["新增账号", formatNumber(data.growth.newAccounts)],
              ["整体激活率", rateLabel(data.growth.activation24h)],
            ]}
          />
        </div>
      </Card>
    </div>
  );
}

function SectionHeader({
  title,
  description,
  icon: Icon,
}: {
  title: string;
  description: string;
  icon: typeof Activity;
}) {
  return (
    <div className="flex items-center justify-between border-b border-border px-5 py-5">
      <div>
        <h2 className="text-base font-bold">{title}</h2>
        <p className="mt-1 text-xs text-muted">{description}</p>
      </div>
      <span className="grid size-10 place-items-center rounded-2xl bg-primary-soft text-primary">
        <Icon className="size-4" aria-hidden />
      </span>
    </div>
  );
}

function MetricRows({ rows }: { rows: Array<[string, string]> }) {
  return (
    <dl className="divide-y divide-border">
      {rows.map(([label, value]) => (
        <div className="flex items-center justify-between gap-4 px-5 py-3.5" key={label}>
          <dt className="text-sm text-muted">{label}</dt>
          <dd className="text-right text-sm font-semibold tabular-nums">{value}</dd>
        </div>
      ))}
    </dl>
  );
}

function rateLabel(rate?: AnalyticsRate): string {
  return rate?.percent == null ? "—" : `${rate.percent.toFixed(1)}%`;
}

function optionalPercent(value?: number): string {
  return value == null ? "—" : `${value.toFixed(1)}%`;
}

function optionalDecimal(value?: number): string {
  return value == null ? "—" : value.toFixed(2);
}

function optionalNumber(value?: number): string {
  return value == null ? "—" : formatNumber(Math.round(value));
}

function optionalMinutes(value?: number): string {
  return value == null ? "—" : `${Math.round(value)} 分钟`;
}

function signedPercent(value: number): string {
  return `${value >= 0 ? "+" : ""}${value.toFixed(1)}%`;
}

function latestMatureRetention(
  data: ProductAnalyticsOverview,
  key: "d1" | "d7" | "d30",
): string {
  return rateLabel(data.retention.find((cohort) => cohort[key]?.percent != null)?.[key]);
}

function channelLabel(channel: string): string {
  return {
    APP_STORE_ORGANIC: "App Store 自然量",
    REFERRAL: "用户邀请",
    SOCIAL_CONTENT: "社交 / 内容",
    UNKNOWN: "未知来源",
  }[channel] ?? channel;
}

function featureLabel(feature: string): string {
  return {
    TRANSCRIPTION: "语音转写",
    POLISH: "文字润色",
    AI_ASSISTANT: "AI 助手",
    AGENT: "Agent",
    HOTWORD: "快捷指令",
    OTHER: "其他",
  }[feature] ?? feature;
}

function executionModeLabel(mode: string): string {
  return {
    MANAGED: "托管",
    LOCAL: "本地",
    BYOK: "BYOK",
  }[mode] ?? mode;
}

function latencyBucketLabel(bucket: string): string {
  return {
    LT_1S: "< 1 秒",
    S1_TO_3: "1–3 秒",
    S3_TO_10: "3–10 秒",
    S10_TO_30: "10–30 秒",
    GTE_30S: "≥ 30 秒",
  }[bucket] ?? bucket;
}