// RegionsView（地区洞察）：概要条 + 世界地图（国家粒度）+ 区域卡片网格 + 区域→国家下钻表。
// 数据契约见 SocialBiApp.jsx 的 useSocialBi()；金额为 USD 分、比例为 0-1，渲染时统一走 metrics/format 层。

import { Fragment, useMemo, useState } from "react";
import { VisualMapComponent } from "echarts/components";
import * as echarts from "echarts/core";
import { EChart } from "../../charts/EChart.jsx";
import { resolveCountryMeta } from "../../data/countryMeta.js";
import worldMap from "../../data/world.json";
import { formatCount, formatMoneyMinor, formatRatioPercent, isBlank } from "../format.js";
import { aggregateMetricMaps, appColor, formatMetric, metricChartValue, metricLabel, metricTooltip } from "../metrics.js";
import { useSocialBi } from "../SocialBiApp.jsx";
import "./regions-view.css";

// EChart.jsx 未注册 visualMap 组件，这里按需补注册（echarts.use 幂等，不影响其它图表）。
echarts.use([VisualMapComponent]);

const MAP_METRICS = [
  { key: "recharge_usd_minor", label: "充值" },
  { key: "new_users", label: "新增" },
  { key: "active_users", label: "日活" }
];

const CARD_METRICS = ["new_users", "active_users", "arppu_usd_minor"];

const TABLE_METRICS = [
  "recharge_usd_minor",
  "new_users",
  "active_users",
  "paid_users",
  "arppu_usd_minor",
  "d1_retention_rate",
  "gift_coin_spent"
];

// databi-world 的合法地名索引（小写 → 原始 feature name），用于把 ISO alpha-2 / 后端国家名归一成地图地名。
const MAP_NAME_INDEX = new Map();
(worldMap.features || []).forEach((feature) => {
  const name = feature?.properties?.name;
  if (name) {
    MAP_NAME_INDEX.set(String(name).trim().toLowerCase(), name);
  }
});

// 复用 countryMeta 的 ISO alpha-2 → 备选英文/中文名列表，再校验哪一个是 databi-world 的 feature name。
function resolveMapName(countryCode, countryName) {
  const meta = resolveCountryMeta({ code: countryCode, name: countryName });
  const candidates = [...(meta?.names || []), countryName];
  for (const candidate of candidates) {
    const hit = MAP_NAME_INDEX.get(String(candidate || "").trim().toLowerCase());
    if (hit) {
      return hit;
    }
  }
  return "";
}

function countryDisplayName(countryCode, countryName) {
  const meta = resolveCountryMeta({ code: countryCode, name: countryName });
  return meta?.label || countryName || countryCode || "未知国家";
}

function rechargeValue(row) {
  return isBlank(row?.recharge_usd_minor) ? -1 : Number(row.recharge_usd_minor);
}

function byRechargeDesc(a, b) {
  return rechargeValue(b) - rechargeValue(a);
}

export function RegionsView() {
  const { appCodes, derived, isLoading } = useSocialBi();
  const { appTotals, countryTotals, regionTotals } = derived;
  const [mapMetric, setMapMetric] = useState("recharge_usd_minor");
  const [expandedRegions, setExpandedRegions] = useState(() => new Set());

  const regionRows = useMemo(() => [...regionTotals].sort(byRechargeDesc), [regionTotals]);

  const regionSummary = useMemo(() => aggregateMetricMaps(regionTotals), [regionTotals]);

  const regionCount = useMemo(
    () => new Set(regionTotals.map((row) => `${row.app_code}:${row.region_id}`)).size,
    [regionTotals]
  );

  const appCount = useMemo(() => new Set(regionTotals.map((row) => row.app_code)).size, [regionTotals]);

  const countryCount = useMemo(() => {
    const codes = new Set();
    countryTotals.forEach((row) => {
      const key = String(row.country_code || row.country_name || "").trim();
      if (key) {
        codes.add(key);
      }
    });
    return codes.size;
  }, [countryTotals]);

  // 每个 App 的总充值（占比条分母）：优先 appTotals 的整 App 口径，缺失时退化为可见区域行求和。
  const appRechargeTotals = useMemo(() => {
    const totals = new Map();
    appTotals.forEach((row) => {
      if (!isBlank(row.recharge_usd_minor)) {
        totals.set(row.app_code, Number(row.recharge_usd_minor));
      }
    });
    const fallback = new Map();
    regionTotals.forEach((row) => {
      if (!isBlank(row.recharge_usd_minor)) {
        fallback.set(row.app_code, (fallback.get(row.app_code) || 0) + Number(row.recharge_usd_minor));
      }
    });
    fallback.forEach((value, code) => {
      if (!totals.has(code)) {
        totals.set(code, value);
      }
    });
    return totals;
  }, [appTotals, regionTotals]);

  // 下钻子行：countryTotals 按 app_code + region_id 分组（region_id 缺失已在数据层归一成 0，对应"未划分区域"）。
  const countriesByRegion = useMemo(() => {
    const groups = new Map();
    countryTotals.forEach((row) => {
      const key = `${row.app_code}:${Number(row.region_id ?? 0)}`;
      const bucket = groups.get(key) || [];
      bucket.push(row);
      groups.set(key, bucket);
    });
    groups.forEach((rows) => rows.sort(byRechargeDesc));
    return groups;
  }, [countryTotals]);

  // 地图数据：跨 App 同国家先按地图地名合桶，再用 aggregateMetricMaps 合并（比例按分子分母重算）。
  const mapIndex = useMemo(() => {
    const buckets = new Map();
    const unmatched = new Set();
    countryTotals.forEach((row) => {
      const mapName = resolveMapName(row.country_code, row.country_name);
      if (!mapName) {
        unmatched.add(String(row.country_code || row.country_name || "?"));
        return;
      }
      const bucket = buckets.get(mapName) || { label: countryDisplayName(row.country_code, row.country_name), rows: [] };
      bucket.rows.push(row);
      buckets.set(mapName, bucket);
    });
    const entries = new Map();
    buckets.forEach((bucket, mapName) => {
      entries.set(mapName, { label: bucket.label, metrics: aggregateMetricMaps(bucket.rows) });
    });
    return { entries, unmatchedCount: unmatched.size };
  }, [countryTotals]);

  const mapOption = useMemo(() => {
    const data = [];
    mapIndex.entries.forEach((entry, mapName) => {
      const value = metricChartValue(mapMetric, entry.metrics[mapMetric]);
      if (value !== null) {
        data.push({ name: mapName, value });
      }
    });
    const max = data.reduce((acc, item) => Math.max(acc, item.value), 0) || 1;
    return {
      series: [
        {
          data,
          emphasis: { itemStyle: { areaColor: "#93b6f2" }, label: { show: false } },
          itemStyle: { areaColor: "#e9eef5", borderColor: "#d5dfeb", borderWidth: 0.6 },
          label: { show: false },
          map: "databi-world",
          name: metricLabel(mapMetric),
          roam: false,
          select: { disabled: true },
          type: "map"
        }
      ],
      tooltip: {
        backgroundColor: "#ffffff",
        borderColor: "#e3eaf3",
        extraCssText: "box-shadow: 0 4px 16px rgba(16, 34, 56, 0.12);",
        formatter: (params) => {
          const entry = mapIndex.entries.get(params.name);
          if (!entry) {
            return `${params.name}<br/>暂无数据`;
          }
          return `${entry.label}<br/>${metricLabel(mapMetric)}：${formatMetric(mapMetric, entry.metrics[mapMetric])}`;
        },
        textStyle: { color: "#14263c", fontSize: 12 }
      },
      visualMap: {
        bottom: 10,
        calculable: false,
        inRange: { color: ["#dbeafe", "#2557d6"] },
        itemHeight: 110,
        itemWidth: 10,
        left: 12,
        max,
        min: 0,
        orient: "horizontal",
        text: ["高", "低"],
        textStyle: { color: "#5b7089", fontSize: 11 }
      }
    };
  }, [mapIndex, mapMetric]);

  const toggleRegion = (key) => {
    setExpandedRegions((current) => {
      const next = new Set(current);
      if (next.has(key)) {
        next.delete(key);
      } else {
        next.add(key);
      }
      return next;
    });
  };

  if (isLoading && !regionTotals.length && !countryTotals.length) {
    return <RegionsSkeleton />;
  }

  if (!regionTotals.length) {
    return (
      <section className="sbi-card">
        <div className="sbi-empty">
          <strong>暂无区域数据</strong>
          <span>检查顶栏区域筛选，或该 App 尚未配置区域目录（legacy App 在其 Mongo sys_region_config，hyapp 在区域管理）</span>
        </div>
      </section>
    );
  }

  return (
    <>
      <div className="sbi-rg-summary">
        <section className="sbi-card sbi-rg-summary-card">
          <span className="sbi-rg-summary-label">覆盖区域数</span>
          <span className="sbi-rg-summary-value">{formatCount(regionCount)}</span>
          <span className="sbi-rg-summary-sub">按 App × 区域去重 · 覆盖 {formatCount(appCount)} 个 App</span>
        </section>
        <section className="sbi-card sbi-rg-summary-card">
          <span className="sbi-rg-summary-label">覆盖国家数</span>
          <span className="sbi-rg-summary-value">{formatCount(countryCount)}</span>
          <span className="sbi-rg-summary-sub">countryTotals 按国家去重（跨 App 合并）</span>
        </section>
        <section className="sbi-card sbi-rg-summary-card">
          <span className="sbi-rg-summary-label" title={metricTooltip("recharge_usd_minor")}>
            区域充值合计
          </span>
          <span className="sbi-rg-summary-value">{formatMoneyMinor(regionSummary.recharge_usd_minor)}</span>
          <span className="sbi-rg-summary-sub">当前区间 · 可见区域行合计</span>
        </section>
      </div>

      <section className="sbi-card sbi-rg-map-card">
        <div className="sbi-card-header">
          <strong>全球分布</strong>
          <small>
            {countryCount ? `${formatCount(countryCount)} 个国家 · 跨 App 合并` : "国家粒度"}
            {mapIndex.unmatchedCount ? ` · ${mapIndex.unmatchedCount} 个国家未匹配到地图` : ""}
          </small>
          <div className="sbi-card-toolbar">
            <div className="sbi-seg" role="radiogroup" aria-label="地图指标">
              {MAP_METRICS.map((item) => (
                <button
                  aria-checked={mapMetric === item.key}
                  className={mapMetric === item.key ? "is-active" : ""}
                  key={item.key}
                  onClick={() => setMapMetric(item.key)}
                  role="radio"
                  title={metricTooltip(item.key)}
                  type="button"
                >
                  {item.label}
                </button>
              ))}
            </div>
          </div>
        </div>
        <div className="sbi-rg-map-body">
          {mapIndex.entries.size ? (
            <EChart className="sbi-rg-map-chart" option={mapOption} />
          ) : (
            <div className="sbi-empty">
              <strong>暂无国家数据</strong>
              <span>当前区间没有国家粒度数据，或国家编码未能匹配到世界地图</span>
            </div>
          )}
        </div>
      </section>

      <div className="sbi-rg-grid">
        {regionRows.map((row) => {
          const key = `${row.app_code}:${row.region_id}`;
          const appTotal = appRechargeTotals.get(row.app_code);
          const share = appTotal && !isBlank(row.recharge_usd_minor) ? Number(row.recharge_usd_minor) / appTotal : null;
          return (
            <section className="sbi-card sbi-rg-region-card" key={key}>
              <div className="sbi-rg-region-head">
                <span className="sbi-rg-region-name" title={row.region_name}>
                  {row.region_name}
                </span>
                {row.restricted ? (
                  <span className="sbi-badge" title="数据按你的负责范围裁剪">
                    范围裁剪
                  </span>
                ) : null}
                <span className="sbi-rg-app-tag">
                  <span className="sbi-rg-app-dot" style={{ background: appColor(row.app_code, appCodes) }} />
                  {row.app_name}
                </span>
              </div>
              <div className="sbi-rg-region-money">
                <small className="sbi-metric-hint" title={metricTooltip("recharge_usd_minor")}>
                  {metricLabel("recharge_usd_minor")}
                </small>
                <strong>{formatMoneyMinor(row.recharge_usd_minor)}</strong>
              </div>
              <div className="sbi-rg-region-metrics">
                {CARD_METRICS.map((metric) => (
                  <div className="sbi-rg-region-metric" key={metric}>
                    <small className="sbi-metric-hint" title={metricTooltip(metric)}>
                      {metricLabel(metric)}
                    </small>
                    <span>{formatMetric(metric, row[metric])}</span>
                  </div>
                ))}
              </div>
              <div className="sbi-rg-share">
                <span className="sbi-rg-share-head">
                  <span>占 {row.app_name} 总充值</span>
                  <span>{share === null ? "--" : formatRatioPercent(share)}</span>
                </span>
                <span className="sbi-rg-share-track">
                  <span
                    className="sbi-rg-share-fill"
                    style={{ width: share === null ? 0 : `${Math.min(100, Math.max(0, share * 100))}%` }}
                  />
                </span>
              </div>
            </section>
          );
        })}
      </div>

      <section className="sbi-card sbi-rg-table-card">
        <div className="sbi-card-header">
          <strong>区域下钻</strong>
          <small>点击区域行展开国家明细 · 按充值降序</small>
        </div>
        <div className="sbi-table-scroll">
          <table className="sbi-table">
            <thead>
              <tr>
                <th className="is-left">地区 / 国家</th>
                <th className="is-left">App</th>
                {TABLE_METRICS.map((metric) => (
                  <th key={metric}>
                    <span className="sbi-metric-hint" title={metricTooltip(metric)}>
                      {metricLabel(metric)}
                    </span>
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              <tr className="is-total">
                <td className="is-left">全部区域</td>
                <td className="is-left">{formatCount(appCount)} 个 App</td>
                {TABLE_METRICS.map((metric) => (
                  <td key={metric}>{formatMetric(metric, regionSummary[metric])}</td>
                ))}
              </tr>
              {regionRows.map((row) => {
                const key = `${row.app_code}:${row.region_id}`;
                const isOpen = expandedRegions.has(key);
                const children = isOpen ? countriesByRegion.get(key) || [] : [];
                return (
                  <Fragment key={key}>
                    <tr aria-expanded={isOpen} className="sbi-rg-row" onClick={() => toggleRegion(key)}>
                      <td className="is-left">
                        <span className="sbi-rg-region-cell">
                          <span aria-hidden="true" className={isOpen ? "sbi-rg-caret is-open" : "sbi-rg-caret"}>
                            ▸
                          </span>
                          {row.region_name}
                          {row.restricted ? (
                            <span className="sbi-badge" title="数据按你的负责范围裁剪">
                              范围裁剪
                            </span>
                          ) : null}
                        </span>
                      </td>
                      <td className="is-left">
                        <span className="sbi-rg-app-tag">
                          <span className="sbi-rg-app-dot" style={{ background: appColor(row.app_code, appCodes) }} />
                          {row.app_name}
                        </span>
                      </td>
                      {TABLE_METRICS.map((metric) => (
                        <td key={metric}>{formatMetric(metric, row[metric])}</td>
                      ))}
                    </tr>
                    {isOpen && !children.length ? (
                      <tr className="sbi-rg-child">
                        <td className="is-left" colSpan={2 + TABLE_METRICS.length}>
                          <span className="sbi-rg-child-name">该区域暂无国家明细</span>
                        </td>
                      </tr>
                    ) : null}
                    {children.map((child) => (
                      <tr className="sbi-rg-child" key={`${key}:${child.country_code || child.country_name}`}>
                        <td className="is-left">
                          <span className="sbi-rg-child-name">{countryDisplayName(child.country_code, child.country_name)}</span>
                        </td>
                        <td className="is-left sbi-rg-child-app">{child.app_name}</td>
                        {TABLE_METRICS.map((metric) => (
                          <td key={metric}>{formatMetric(metric, child[metric])}</td>
                        ))}
                      </tr>
                    ))}
                  </Fragment>
                );
              })}
            </tbody>
          </table>
        </div>
      </section>
    </>
  );
}

function RegionsSkeleton() {
  return (
    <>
      <div className="sbi-rg-summary" aria-busy="true">
        {[0, 1, 2].map((index) => (
          <section className="sbi-card sbi-rg-summary-card" key={index}>
            <span className="sbi-skeleton" style={{ height: 12, width: 90 }} />
            <span className="sbi-skeleton" style={{ height: 26, width: 140 }} />
            <span className="sbi-skeleton" style={{ height: 11, width: 170 }} />
          </section>
        ))}
      </div>
      <section className="sbi-card sbi-rg-map-card" aria-busy="true">
        <div className="sbi-card-header">
          <span className="sbi-skeleton" style={{ height: 14, width: 120 }} />
        </div>
        <div className="sbi-rg-map-body">
          <span className="sbi-skeleton" style={{ display: "block", height: "100%", width: "100%" }} />
        </div>
      </section>
      <div className="sbi-rg-grid" aria-busy="true">
        {[0, 1, 2].map((index) => (
          <section className="sbi-card sbi-rg-region-card" key={index}>
            <span className="sbi-skeleton" style={{ height: 14, width: 150 }} />
            <span className="sbi-skeleton" style={{ height: 24, width: 130 }} />
            <span className="sbi-skeleton" style={{ height: 34, width: "100%" }} />
          </section>
        ))}
      </div>
    </>
  );
}