// 埋点漏斗：展示 App 原始 tracking 事件的总体漏斗、失败诊断和 D1 cohort。
// 数据源为 statistics-service 的 app_tracking_events 聚合结果，视图只做跨 App 求和和排序。

import { useMemo, useState } from "react";
import { EChart } from "../../charts/EChart.jsx";
import { formatCount, formatRatioPercent, isBlank } from "../format.js";
import { rangeLabel } from "../state.js";
import { useSocialBi } from "../SocialBiApp.jsx";
import "./funnel-view.css";

const COHORT_DIMENSIONS = [
  { key: "country", label: "国家" },
  { key: "language", label: "语言" },
  { key: "channel", label: "渠道" },
  { key: "login_method", label: "登录方式" },
  { key: "first_room_stay", label: "首房停留时长" }
];

const COHORT_STEP_COLUMNS = [
  { key: "login_success", label: "登录成功" },
  { key: "profile_complete", label: "资料完成" },
  { key: "room_join_success", label: "进房成功" },
  { key: "stay_3m", label: "停留 3m" },
  { key: "stay_10m", label: "停留 10m" },
  { key: "send_message", label: "发消息" }
];

const SUMMARY_CARDS = [
  { key: "login_start_users", label: "登录开始", type: "count" },
  { key: "login_success_rate", label: "登录成功率", type: "ratio" },
  { key: "room_join_success_users", label: "进房成功", type: "count" },
  { key: "d1_retention_rate", label: "D1 留存", type: "ratio" },
  { key: "room_join_fail_users", label: "进房失败", type: "count" }
];

const SUPPORTED_FUNNEL_APPS = "Lalu / Huwaa / Fami";

export function FunnelView() {
  const { funnel, isLoading, range } = useSocialBi();
  const [dimension, setDimension] = useState("country");
  const appRows = useMemo(() => (funnel?.apps || []).filter((app) => !app.error), [funnel]);
  const appErrors = useMemo(() => (funnel?.apps || []).filter((app) => app.error), [funnel]);
  const steps = useMemo(() => aggregateSteps(appRows), [appRows]);
  const totals = useMemo(() => aggregateTotals(appRows), [appRows]);
  const cohorts = useMemo(() => aggregateCohorts(appRows), [appRows]);
  const selectedCohorts = useMemo(
    () => (cohorts.get(dimension) || []).slice(0, 50),
    [cohorts, dimension]
  );
  const chartOption = useMemo(() => funnelChartOption(steps), [steps]);

  if (isLoading && !appRows.length) {
    return (
      <div className="sbi-funnel" aria-label="埋点漏斗加载中">
        <div className="sbi-funnel-skeleton">
          {["70%", "92%", "84%", "76%", "88%"].map((width) => (
            <span className="sbi-skeleton" key={width} style={{ width }} />
          ))}
        </div>
      </div>
    );
  }

  if (!appRows.length) {
    return (
      <div className="sbi-funnel">
        <div className="sbi-empty">
          <strong>当前无埋点漏斗数据</strong>
          <span>
            {appErrors.length
              ? "所选 App 暂未接入漏斗或统计服务返回错误"
              : `埋点漏斗 App 筛选目前仅支持 ${SUPPORTED_FUNNEL_APPS}`}
          </span>
        </div>
      </div>
    );
  }

  return (
    <div className="sbi-funnel">
      <div className="sbi-funnel-head">
        <div>
          <h1>埋点漏斗</h1>
          <span>
            {rangeLabel(range)} · 仅支持 {SUPPORTED_FUNNEL_APPS}
          </span>
        </div>
        <div className="sbi-funnel-apps">
          {appRows.map((app) => (
            <span key={app.app_code}>{app.app_name || app.app_code}</span>
          ))}
        </div>
      </div>

      {appErrors.length ? (
        <div className="sbi-funnel-warning">
          {appErrors.map((app) => (
            <span key={app.app_code}>
              {app.app_name || app.app_code}: {app.error}
            </span>
          ))}
        </div>
      ) : null}

      <section className="sbi-funnel-summary" aria-label="漏斗核心指标">
        {SUMMARY_CARDS.map((item) => (
          <article className="sbi-card sbi-funnel-kpi" key={item.key}>
            <span>{item.label}</span>
            <strong>{item.type === "ratio" ? formatRatioPercent(totals[item.key]) : formatCount(totals[item.key])}</strong>
          </article>
        ))}
      </section>

      <section className="sbi-funnel-grid">
        <article className="sbi-card sbi-funnel-chart-card">
          <div className="sbi-card-title">
            <div>
              <h2>主路径转化</h2>
              <span>按去重用户数计算</span>
            </div>
          </div>
          <EChart className="sbi-funnel-chart" option={chartOption} />
        </article>

        <article className="sbi-card sbi-funnel-table-card">
          <div className="sbi-card-title">
            <div>
              <h2>事件明细</h2>
              <span>含进房失败和互动动作</span>
            </div>
          </div>
          <div className="sbi-table-scroll sbi-funnel-step-scroll">
            <table className="sbi-table sbi-funnel-step-table">
              <thead>
                <tr>
                  <th className="is-left">事件</th>
                  <th>用户</th>
                  <th>次数</th>
                  <th>上一步</th>
                  <th>总转化</th>
                  <th>流失</th>
                </tr>
              </thead>
              <tbody>
                {steps.map((step) => (
                  <tr className={step.is_failure ? "is-failure" : ""} key={step.event_name}>
                    <td className="is-left">
                      <strong>{step.label || step.event_name}</strong>
                      <span>{step.event_name}</span>
                    </td>
                    <td>{formatCount(step.user_count)}</td>
                    <td>{formatCount(step.event_count)}</td>
                    <td>{formatRatioPercent(step.previous_conversion_rate)}</td>
                    <td>{formatRatioPercent(step.overall_conversion_rate)}</td>
                    <td>{formatCount(step.dropoff_users)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </article>
      </section>

      <section className="sbi-card sbi-funnel-cohort-card">
        <div className="sbi-card-title sbi-funnel-cohort-title">
          <div>
            <h2>D1 Cohort</h2>
            <span>基准用户为登录成功用户</span>
          </div>
          <div className="sbi-funnel-tabs" role="tablist" aria-label="D1 cohort 维度">
            {COHORT_DIMENSIONS.map((item) => (
              <button
                aria-selected={dimension === item.key}
                className={dimension === item.key ? "is-active" : ""}
                key={item.key}
                onClick={() => setDimension(item.key)}
                role="tab"
                type="button"
              >
                {item.label}
              </button>
            ))}
          </div>
        </div>
        <div className="sbi-table-scroll sbi-funnel-cohort-scroll">
          <table className="sbi-table sbi-funnel-cohort-table">
            <thead>
              <tr>
                <th className="is-left">{COHORT_DIMENSIONS.find((item) => item.key === dimension)?.label || "Cohort"}</th>
                <th>基准用户</th>
                <th>D1 用户</th>
                <th>D1 留存</th>
                {COHORT_STEP_COLUMNS.map((item) => (
                  <th key={item.key}>{item.label}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {selectedCohorts.length ? (
                selectedCohorts.map((row) => (
                  <tr key={`${row.dimension}:${row.value}`}>
                    <td className="is-left">
                      <strong>{row.label || row.value || "unknown"}</strong>
                    </td>
                    <td>{formatCount(row.base_users)}</td>
                    <td>{formatCount(row.d1_retention_users)}</td>
                    <td>{formatRatioPercent(row.d1_retention_rate)}</td>
                    {COHORT_STEP_COLUMNS.map((item) => (
                      <td key={item.key}>{formatCount(stepUserCount(row, item.key))}</td>
                    ))}
                  </tr>
                ))
              ) : (
                <tr>
                  <td className="sbi-funnel-empty-cell" colSpan={4 + COHORT_STEP_COLUMNS.length}>
                    当前维度暂无 cohort 数据
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </section>
    </div>
  );
}

function aggregateSteps(appRows) {
  const order = [];
  const byEvent = new Map();
  appRows.forEach((app) => {
    (app.steps || []).forEach((step) => {
      const key = step.event_name || step.key;
      if (!key) {
        return;
      }
      if (!byEvent.has(key)) {
        order.push(key);
        byEvent.set(key, {
          ...step,
          device_count: 0,
          event_count: 0,
          user_count: 0
        });
      }
      const current = byEvent.get(key);
      current.device_count += Number(step.device_count || 0);
      current.event_count += Number(step.event_count || 0);
      current.user_count += Number(step.user_count || 0);
      current.is_failure = Boolean(current.is_failure || step.is_failure);
      if (!current.label) {
        current.label = step.label;
      }
    });
  });
  const baseUsers = Number(byEvent.get("login_start")?.user_count || (order.length ? byEvent.get(order[0])?.user_count || 0 : 0));
  let previousUsers = 0;
  return order.map((key) => {
    const step = byEvent.get(key);
    const userCount = Number(step.user_count || 0);
    const out = {
      ...step,
      dropoff_users: previousUsers > userCount ? previousUsers - userCount : 0,
      overall_conversion_rate: ratio(userCount, baseUsers),
      previous_conversion_rate: ratio(userCount, previousUsers)
    };
    previousUsers = userCount;
    return out;
  });
}

function aggregateTotals(appRows) {
  const totals = {};
  let d1Base = 0;
  let d1Users = 0;
  appRows.forEach((app) => {
    Object.entries(app.totals || {}).forEach(([key, value]) => {
      if (key.endsWith("_rate")) {
        return;
      }
      totals[key] = Number(totals[key] || 0) + Number(value || 0);
    });
    d1Base += Number(app.totals?.d1_retention_base_users || 0);
    d1Users += Number(app.totals?.d1_retention_users || 0);
  });
  totals.login_success_rate = ratio(totals.login_success_users, totals.login_start_users);
  totals.d1_retention_rate = ratio(d1Users, d1Base);
  return totals;
}

function aggregateCohorts(appRows) {
  const grouped = new Map();
  appRows.forEach((app) => {
    (app.cohorts || []).forEach((cohort) => {
      const dimension = cohort.dimension || "unknown";
      const value = cohort.value || cohort.label || "unknown";
      if (!grouped.has(dimension)) {
        grouped.set(dimension, new Map());
      }
      const bucket = grouped.get(dimension);
      if (!bucket.has(value)) {
        bucket.set(value, {
          dimension,
          label: cohort.label || value,
          value,
          base_users: 0,
          d1_retention_users: 0,
          d1_retention_rate: 0,
          steps: new Map()
        });
      }
      const row = bucket.get(value);
      row.base_users += Number(cohort.base_users || 0);
      row.d1_retention_users += Number(cohort.d1_retention_users || 0);
      (cohort.steps || []).forEach((step) => {
        const eventName = step.event_name;
        if (!eventName) {
          return;
        }
        row.steps.set(eventName, Number(row.steps.get(eventName) || 0) + Number(step.user_count || 0));
      });
    });
  });
  const out = new Map();
  grouped.forEach((bucket, dimension) => {
    const rows = [...bucket.values()].map((row) => ({
      ...row,
      d1_retention_rate: ratio(row.d1_retention_users, row.base_users),
      steps: [...row.steps.entries()].map(([event_name, user_count]) => ({ event_name, user_count }))
    }));
    rows.sort((left, right) => Number(right.base_users || 0) - Number(left.base_users || 0));
    out.set(dimension, rows);
  });
  return out;
}

function stepUserCount(row, eventName) {
  const step = (row.steps || []).find((item) => item.event_name === eventName);
  return step?.user_count;
}

function funnelChartOption(steps) {
  const data = steps
    .filter((step) => !step.is_failure && Number(step.user_count || 0) > 0)
    .map((step) => ({
      name: step.label || step.event_name,
      value: Number(step.user_count || 0)
    }));
  return {
    color: ["#3056d3", "#3b82f6", "#14b8a6", "#22c55e", "#f59e0b", "#ef4444"],
    series: [
      {
        bottom: 18,
        data,
        gap: 4,
        label: {
          color: "#1f2a44",
          formatter: ({ name, value }) => `${name}\n${formatCount(value)}`
        },
        left: 18,
        minSize: "8%",
        right: 18,
        sort: "none",
        top: 10,
        type: "funnel"
      }
    ],
    tooltip: {
      backgroundColor: "#ffffff",
      borderColor: "#e3eaf3",
      textStyle: { color: "#263246" },
      valueFormatter: (value) => formatCount(value)
    }
  };
}

function ratio(numerator, denominator) {
  if (isBlank(denominator) || Number(denominator) <= 0) {
    return null;
  }
  return Number(numerator || 0) / Number(denominator);
}