"use client";

import { useMemo, useState } from "react";
import Link from "next/link";
import { ArrowRight, Coins, Flame, Gift, TrendingUp } from "lucide-react";
import type { EconomyStats, LedgerParty, PointLedgerItem } from "@/lib/api";
import { postTypeLabel } from "@/lib/postMeta";
import { pointReasonLabel } from "@/lib/points";
import { formatRelative } from "@/lib/format";
import { AdminPageHeader, AdminSegmented, AdminStatCard } from "@/components/admin";
import Avatar from "@/components/Avatar";
import {
  AdminChartCard,
  DeltaBarChart,
  NamedBarChart,
  NamedPieChart,
  SingleAreaChart,
} from "@/components/admin/charts";

const fmt = (n: number) => n.toLocaleString("zh-CN");

function netDeltaLabel(n: number) {
  if (n > 0) return `+${fmt(n)}`;
  return fmt(n);
}

type LedgerKind = "checkin" | "bounty" | "file" | "typed" | "system";
type LedgerFilter =
  | "all"
  | "granted"
  | "spent"
  | "poll"
  | "lottery"
  | "discussion"
  | "question";

const LEDGER_FILTERS: { key: LedgerFilter; label: string }[] = [
  { key: "all", label: "全部" },
  { key: "granted", label: "发放" },
  { key: "spent", label: "消耗" },
  { key: "poll", label: "投票" },
  { key: "lottery", label: "抽奖" },
  { key: "discussion", label: "讨论" },
  { key: "question", label: "问答" },
];

const EMPTY_LEDGER: PointLedgerItem[] = [];

const NOTE_STRIP_EXTRAS = [
  "解锁帖子",
  "下载附件",
  "附件收益",
  "正文解锁收益",
  "悬赏采纳",
  "悬赏截止后采纳扣款",
  "悬赏过期退回",
  "历史签到积分回填",
  "每日签到",
];

function partyName(u: LedgerParty) {
  return u.nickname || u.username || `#${u.id}`;
}

function isToday(iso: string) {
  const d = new Date(iso);
  if (Number.isNaN(d.getTime())) return false;
  const n = new Date();
  return (
    d.getFullYear() === n.getFullYear() &&
    d.getMonth() === n.getMonth() &&
    d.getDate() === n.getDate()
  );
}

function ledgerKind(reason: string): LedgerKind {
  switch (reason) {
    case "checkin":
    case "migrate_checkin":
      return "checkin";
    case "bounty_escrow":
    case "bounty_refund":
    case "bounty_award":
      return "bounty";
    case "download_file":
      return "file";
    default: {
      const blob = pointReasonLabel(reason);
      if (/投票|抽奖|问答/.test(blob)) return "typed";
      return "system";
    }
  }
}

function ledgerKindEmoji(kind: LedgerKind) {
  if (kind === "checkin") return "📅";
  if (kind === "bounty") return "🎯";
  if (kind === "file") return "📎";
  if (kind === "typed") return "🗳";
  return "⚙";
}

function blobOf(it: PointLedgerItem) {
  return `${pointReasonLabel(it.reason)} ${it.note || ""} ${it.reason}`;
}

function matchLedgerFilter(it: PointLedgerItem, filter: LedgerFilter) {
  if (filter === "all") return true;
  const delta = Number(it.delta) || 0;
  const transfer = Boolean(it.from && it.to);
  if (filter === "granted") return transfer || delta > 0;
  if (filter === "spent") return transfer || delta < 0;
  const blob = blobOf(it);
  if (filter === "poll") return /投票/.test(blob);
  if (filter === "lottery") return /抽奖/.test(blob);
  if (filter === "question") return /问答/.test(blob);
  if (filter === "discussion") return it.reason === "unlock_post" || /讨论/.test(blob);
  return true;
}

/** 去掉与类型标签重复的前缀，避免「悬赏托管：悬赏托管：悬赏」 */
function ledgerDesc(reason: string, note: string) {
  const label = pointReasonLabel(reason);
  let s = (note || "").trim();
  const prefixes = [label, ...NOTE_STRIP_EXTRAS].filter(Boolean);
  let guard = 0;
  let changed = true;
  while (changed && s && guard < 8) {
    changed = false;
    guard += 1;
    for (const p of prefixes) {
      if (s.startsWith(p)) {
        s = s.slice(p.length).replace(/^[\s:：·\-—]+/, "");
        changed = true;
      }
    }
  }
  if (s === label) return "";
  return s;
}

function todayDelta(items: PointLedgerItem[]) {
  let granted = 0;
  let spent = 0;
  for (const it of items) {
    if (!isToday(it.created_at)) continue;
    const n = Math.abs(Number(it.delta) || 0);
    if (n === 0) continue;
    if (it.from && it.to) {
      granted += n;
      spent += n;
      continue;
    }
    if ((it.delta || 0) > 0) granted += n;
    else spent += n;
  }
  return { granted, spent };
}

function LedgerUserLink({ user, compact }: { user: LedgerParty; compact?: boolean }) {
  const name = partyName(user);
  return (
    <Link
      href={`/u/${user.id}`}
      className="flex items-center gap-1.5 min-w-0 max-w-[128px] rounded-md hover:bg-[var(--panel-2)] -mx-0.5 px-0.5 py-0.5 transition-colors"
      title={`${name} @${user.username}`}
    >
      <Avatar name={name} src={user.avatar || undefined} size={compact ? 22 : 24} />
      <span className="text-[13px] truncate" style={{ color: "var(--ink)" }}>
        {name}
      </span>
    </Link>
  );
}

function ledgerAria(it: PointLedgerItem) {
  const reason = pointReasonLabel(it.reason);
  const delta = Number(it.delta) || 0;
  const signed = delta > 0 ? `+${fmt(delta)}` : fmt(delta);
  if (it.from && it.to) {
    return `${partyName(it.from)} 向 ${partyName(it.to)} 支付 ${fmt(Math.abs(delta))} 积分，${reason}`;
  }
  const who = it.user ? partyName(it.user) : "未知用户";
  return `${who} ${signed} 积分，${reason}`;
}

function RecentLedgerRow({ it }: { it: PointLedgerItem }) {
  const payer = it.from || it.user;
  const payee = it.from && it.to ? it.to : undefined;
  const kind = ledgerKind(it.reason);
  const desc = ledgerDesc(it.reason, it.note || "");
  const delta = Number(it.delta);
  const showAmount = Number.isFinite(delta) && delta !== 0;

  return (
    <li className="ledger-row" aria-label={ledgerAria(it)}>
      <span className={`ledger-kind-icon is-${kind}`} aria-hidden>
        {ledgerKindEmoji(kind)}
      </span>

      {payer ? (
        <LedgerUserLink user={payer} />
      ) : (
        <span className="text-[13px] shrink-0" style={{ color: "var(--ink-3)" }}>
          未知用户
        </span>
      )}

      {payee ? (
        <span className="hidden md:flex items-center gap-1.5 min-w-0 shrink-0">
          <ArrowRight size={13} className="shrink-0" style={{ color: "var(--ink-3)" }} aria-hidden />
          <LedgerUserLink user={payee} compact />
        </span>
      ) : null}

      <div className="min-w-0 flex-1 flex items-center gap-2">
        <span className={`ledger-kind-tag is-${kind}`}>{pointReasonLabel(it.reason)}</span>
        {desc ? (
          <span className="min-w-0 flex-1 truncate text-[12.5px]" style={{ color: "var(--ink-2)" }}>
            {desc}
          </span>
        ) : (
          <span className="min-w-0 flex-1" />
        )}
        <span className="shrink-0 text-[12px] tabular-nums" style={{ color: "var(--ink-3)" }}>
          {formatRelative(it.created_at)}
        </span>
      </div>

      <span
        className="ledger-amount"
        style={showAmount ? { color: delta > 0 ? "var(--ledger-in)" : "var(--ledger-out)" } : undefined}
      >
        {showAmount ? (delta > 0 ? `+${fmt(delta)}` : fmt(delta)) : null}
      </span>
    </li>
  );
}

export default function EconomyClient({ stats }: { stats: EconomyStats }) {
  const [filter, setFilter] = useState<LedgerFilter>("all");
  const ledger = stats.recent_ledger ?? EMPTY_LEDGER;

  const checkinSeries = (stats.checkin_series || []).map((d) => ({
    date: d.date,
    count: d.count,
  }));

  const ledgerByReason = (stats.ledger_by_reason || []).map((r) => ({
    label: pointReasonLabel(r.key || r.label),
    count: r.count,
  }));

  const deltaSeries = stats.delta_series || [];

  const postsByType = Object.entries(stats.posts_by_type || {})
    .map(([t, n]) => ({ label: postTypeLabel(t), count: Number(n) || 0 }))
    .filter((d) => d.count > 0)
    .sort((a, b) => b.count - a.count);

  const net = stats.net_delta_7d ?? 0;
  const today = useMemo(() => todayDelta(ledger), [ledger]);
  const filtered = useMemo(
    () => ledger.filter((it) => matchLedgerFilter(it, filter)),
    [ledger, filter]
  );

  return (
    <div>
      <AdminPageHeader
        icon={Coins}
        title="积分与类型帖看板"
        description="观察全站积分流通、悬赏托管与帖子类型分布"
      />

      <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-3 mb-5">
        <AdminStatCard
          label="用户余额合计"
          value={fmt(stats.total_balance)}
          hint="全站可用积分之和"
          icon={<Coins size={16} />}
        />
        <AdminStatCard
          label="今日签到"
          value={fmt(stats.checkin_today)}
          hint="今日已签到人数"
          icon={<Flame size={16} />}
          color="var(--clay)"
          soft="var(--clay-soft)"
        />
        <AdminStatCard
          label="托管中悬赏"
          value={`${fmt(stats.open_bounties)} / ${fmt(stats.escrowed_points)}`}
          hint="未结算帖数 / 托管积分"
          icon={<Gift size={16} />}
          color="var(--gold)"
          soft="var(--gold-soft)"
        />
        <AdminStatCard
          label="近 7 日净变动"
          value={netDeltaLabel(net)}
          hint="发放减去消耗"
          icon={<TrendingUp size={16} />}
          color={net >= 0 ? "var(--ok)" : "var(--danger)"}
          soft={net >= 0 ? "var(--ok-soft)" : "var(--danger-soft)"}
        />
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4">
        <AdminChartCard title="签到趋势" hint="近 14 日每日签到人数">
          {checkinSeries.length === 0 ? (
            <p className="meta text-center py-16">暂无签到数据</p>
          ) : (
            <SingleAreaChart
              data={checkinSeries}
              dataKey="count"
              name="签到"
              color="var(--clay)"
            />
          )}
        </AdminChartCard>

        <AdminChartCard title="流水原因分布" hint="按入账原因聚合条数">
          {ledgerByReason.length === 0 ? (
            <p className="meta text-center py-16">暂无流水</p>
          ) : (
            <NamedBarChart data={ledgerByReason} layout="horizontal" />
          )}
        </AdminChartCard>

        <AdminChartCard title="发放 / 消耗" hint="近 14 日积分进出">
          {deltaSeries.length === 0 ? (
            <p className="meta text-center py-16">暂无数据</p>
          ) : (
            <DeltaBarChart data={deltaSeries} />
          )}
        </AdminChartCard>

        <AdminChartCard title="帖子类型分布" hint="全站帖子按类型占比">
          {postsByType.length === 0 ? (
            <p className="meta text-center py-16">暂无数据</p>
          ) : (
            <NamedPieChart data={postsByType} />
          )}
        </AdminChartCard>
      </div>

      <section className="panel overflow-hidden ledger-feed">
        <div
          className="px-5 py-3 flex items-start justify-between gap-3 flex-wrap"
          style={{ borderBottom: "1px solid var(--line)" }}
        >
          <p className="font-medium text-[15px] pt-0.5" style={{ color: "var(--ink)" }}>
            最近流水
          </p>
          <AdminSegmented
            size="sm"
            role="group"
            ariaLabel="按类型筛选最近流水"
            options={LEDGER_FILTERS}
            value={filter}
            onChange={setFilter}
          />
        </div>
        <p className="px-5 py-2 text-[12.5px]" style={{ borderBottom: "1px solid var(--line)", color: "var(--ink-2)" }}>
          今日 发放{" "}
          <span className="tabular-nums font-semibold" style={{ color: "var(--ledger-in)" }}>
            +{fmt(today.granted)}
          </span>
          {" · "}
          消耗{" "}
          <span className="tabular-nums font-semibold" style={{ color: "var(--ledger-out)" }}>
            -{fmt(today.spent)}
          </span>
        </p>
        {ledger.length === 0 ? (
          <p className="meta text-center py-10">暂无流水</p>
        ) : filtered.length === 0 ? (
          <p className="meta text-center py-10">该分类下暂无流水</p>
        ) : (
          <ul>
            {filtered.map((it) => (
              <RecentLedgerRow key={it.id} it={it} />
            ))}
          </ul>
        )}
      </section>

      <p className="meta text-[12.5px] mt-5">
        用户可在{" "}
        <Link href="/points" className="hover:text-[var(--accent)]">
          /points
        </Link>{" "}
        查看个人流水。
      </p>
    </div>
  );
}