// Credits center — user wallet recharge and admin package-rule management.

function Credits({ go, route }) {
  const { snapshot, reload } = window.useGGGSnapshot ? window.useGGGSnapshot() : { snapshot: null, reload: null };
  const user = snapshot?.user;
  const isAdmin = isAdminUser(user);
  const mode = route?.mode || (window.location.pathname.includes("/admin") ? "admin" : "wallet");

  if (mode === "admin") {
    return (
      <AppShell go={go} current="credits" pageBreadcrumbs={[
        { label: "管理" },
        { label: "点数中心" },
      ]}>
        {isAdmin ? <AdminCreditRules reload={reload} /> : <CreditAccessDenied go={go} />}
      </AppShell>
    );
  }

  return (
    <AppShell go={go} current="credits" pageTitle="点数中心">
      <UserCreditWallet snapshot={snapshot} reload={reload} />
    </AppShell>
  );
}

function UserCreditWallet({ snapshot, reload }) {
  const [region, setRegion] = React.useState(() => snapshot?.credits?.workspace?.billing_region || "CN");
  const [packages, setPackages] = React.useState([]);
  const [rules, setRules] = React.useState(null);
  const [showMore, setShowMore] = React.useState(false);
  const [loadingPackage, setLoadingPackage] = React.useState("");
  const [error, setError] = React.useState("");
  const wallet = snapshot?.credits?.wallet || {};
  const ledger = snapshot?.credits?.ledger || [];
  const entitlements = snapshot?.credits?.entitlements || [];

  React.useEffect(() => {
    let mounted = true;
    setError("");
    if (window.GGGApi?.getCreditPackages) {
      window.GGGApi.getCreditPackages(region)
        .then((data) => {
          if (!mounted) return;
          setPackages(data.packages || []);
          setRules(data.rules || null);
        })
        .catch((err) => { if (mounted) setError(err.message || "点数包加载失败"); });
    }
    return () => { mounted = false; };
  }, [region]);

  const buy = async (packageId) => {
    setLoadingPackage(packageId);
    setError("");
    try {
      await window.GGGApi.createCreditOrder(packageId, "mock");
      if (reload) await reload();
    } catch (err) {
      setError(err.message || "点数订单创建失败");
    } finally {
      setLoadingPackage("");
    }
  };

  const visiblePackages = showMore ? packages : packages.filter((item) => !isTeamPackage(item)).slice(0, 3);

  return (
    <div className="page page-narrow credits-page">
      <div className="page-header">
        <div>
          <h1 className="page-title">点数中心</h1>
          <p className="page-sub">充值好出海点数，查看点数消费历史和已解锁成果。点数不是货币、证券、存款或加密资产，不能兑换现金。</p>
        </div>
      </div>

      {error && <div className="form-alert" style={{ marginBottom: 16 }}>{error}</div>}

      <CreditSec title="好出海点数" sub={rules?.nonCurrencyNotice || "点数按工作区共享，报告生成失败不扣点。"}>
        <div className="credit-wallet-card credit-wallet-hero">
          <div>
            <div style={{ fontSize: 12, opacity: 0.72, textTransform: "uppercase", letterSpacing: 0.06, fontWeight: 700 }}>GoodGoGlobal Credits</div>
            <div style={{ fontSize: 34, fontWeight: 780, marginTop: 4 }}>{wallet.available_credits ?? 0} <span style={{ fontSize: 14, opacity: 0.78, fontWeight: 500 }}>可用点</span></div>
            <div className="credit-mini-grid" style={{ marginTop: 12 }}>
              <span>预留 {wallet.reserved_credits ?? 0}</span>
              <span>已消费 {wallet.consumed_credits ?? 0}</span>
            </div>
          </div>
          <div className="credit-rules">
            <span>购买点数原则上不失效</span>
            <span>同一企业工作区共享余额</span>
            <span>已解锁成果永久可读，重复下载不重复收费</span>
          </div>
        </div>
      </CreditSec>

      <CreditSec title="充值点数" sub="中国大陆默认人民币价格，国际用户可切换美元价格；前台默认突出三个常用点数包。">
        <div className="credit-region-tabs">
          <button className={"chip " + (region === "CN" ? "active" : "")} onClick={() => setRegion("CN")}>中国大陆 / CNY</button>
          <button className={"chip " + (region === "INTL" ? "active" : "")} onClick={() => setRegion("INTL")}>国际 / USD</button>
        </div>

        <div className="credit-package-grid credit-store-grid">
          {visiblePackages.map((item) => (
            <CreditPackageCard key={item.id} item={item} loading={loadingPackage === item.id} onBuy={() => buy(item.id)} />
          ))}
        </div>

        {packages.some(isTeamPackage) ? (
          <button className="btn btn-ghost btn-sm" style={{ marginTop: 14 }} onClick={() => setShowMore(!showMore)}>
            {showMore ? "收起更多点数包" : "更多点数包 / 企业采购"}
          </button>
        ) : null}
      </CreditSec>

      <CreditSec title="点数消费历史">
        <CreditLedgerTable ledger={ledger} />
      </CreditSec>

      <CreditSec title="已解锁成果">
        <div className="entitlement-list">
          {!entitlements.length && <div className="empty-mini">暂无已解锁成果。标准报告 80 点，深度决策包 200 点。</div>}
          {entitlements.slice(0, 8).map((item) => (
            <div key={item.id} className="entitlement-row">
              <Icon name="file-text" size={15} color="var(--cyan)" />
              <div>
                <b>{creditDeliverableName(item.deliverable_sku_id)}</b>
                <span>{item.artifact_type} · {String(item.created_at || "").slice(0, 10)} · 永久可读</span>
              </div>
            </div>
          ))}
        </div>
      </CreditSec>
    </div>
  );
}

function CreditPackageCard({ item, loading, onBuy }) {
  const totalCredits = Number(item.base_credits || 0) + Number(item.bonus_credits || 0);
  return (
    <div className={"credit-package " + (Number(item.is_featured) ? "featured" : "")}>
      {Number(item.is_featured) ? <span className="credit-package-tag">推荐</span> : null}
      {isTeamPackage(item) ? <span className="credit-package-tag secondary">企业采购</span> : null}
      <div className="credit-package-name">{item.display_name}</div>
      <div className="credit-package-price">{formatCreditMoney(item)}</div>
      <div className="credit-package-points">{totalCredits.toLocaleString()} 点</div>
      <div className="credit-package-meta">
        基础 {Number(item.base_credits || 0).toLocaleString()} 点{Number(item.bonus_credits) ? ` · 赠送 ${Number(item.bonus_credits).toLocaleString()} 点` : ""}
      </div>
      <button className="btn btn-primary btn-sm btn-block" disabled={loading || item.status !== "active"} onClick={onBuy}>
        {loading ? "处理中..." : item.status === "active" ? "充值点数" : "暂未开放"}
      </button>
    </div>
  );
}

function AdminCreditRules({ reload }) {
  const [packages, setPackages] = React.useState([]);
  const [rules, setRules] = React.useState(null);
  const [savingId, setSavingId] = React.useState("");
  const [message, setMessage] = React.useState("");
  const [error, setError] = React.useState("");

  const load = React.useCallback(async () => {
    setError("");
    try {
      const data = await window.GGGApi.listAdminCreditPackages();
      setPackages(data.packages || []);
      setRules(data.rules || null);
    } catch (err) {
      setError(err.message || "点数规则加载失败");
    }
  }, []);

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

  const updatePackage = (packageId, patch) => {
    setPackages((current) => current.map((item) => item.id === packageId ? { ...item, ...patch } : item));
  };

  const save = async (item) => {
    setSavingId(item.id);
    setMessage("");
    setError("");
    try {
      const saved = await window.GGGApi.updateAdminCreditPackage(item.id, {
        display_name: item.display_name,
        price_minor: Number(item.price_minor || 0),
        base_credits: Number(item.base_credits || 0),
        bonus_credits: Number(item.bonus_credits || 0),
        display_order: Number(item.display_order || 0),
        is_featured: Number(item.is_featured) ? 1 : 0,
        status: item.status || "active",
      });
      updatePackage(item.id, saved);
      setMessage(`${item.display_name} 已保存`);
      if (reload) await reload();
    } catch (err) {
      setError(err.message || "保存失败");
    } finally {
      setSavingId("");
    }
  };

  const cnPackages = packages.filter((item) => item.region === "CN");
  const intlPackages = packages.filter((item) => item.region !== "CN");

  return (
    <div className="page page-wide credits-page">
      <div className="page-header">
        <div>
          <h1 className="page-title">点数充值规则</h1>
          <p className="page-sub">设置中国大陆 CNY 与国际 USD 的固定点数包。前台默认突出三个常用包，团队包进入更多点数包或企业采购。</p>
        </div>
      </div>

      {(message || error) && <div className={error ? "form-alert" : "callout info"} style={{ marginBottom: 16 }}>{error || message}</div>}

      <div className="admin-credit-rule-grid">
        <div className="card card-pad admin-credit-principles">
          <div className="eyebrow">PRD 规则摘要</div>
          <h3>中国优先的双币点数体系</h3>
          <div className="credit-admin-rules">
            <span>中国大陆默认 CNY + 支付宝 / 微信支付</span>
            <span>国际默认 USD + Card / Apple Pay / Google Pay</span>
            <span>不使用实时汇率换算，CNY 与 USD 分别维护固定价格</span>
            <span>点数充值为一次性购买，服务端确认付款后入账</span>
            <span>{rules?.nonCurrencyNotice || "点数不是货币，不能转让或提现"}</span>
          </div>
        </div>
        <div className="card card-pad admin-credit-principles">
          <div className="eyebrow">前台展示</div>
          <h3>默认突出三个选项</h3>
          <div className="credit-admin-rules">
            <span>¥49 / 100 点</span>
            <span>¥199 / 450 点，标记推荐</span>
            <span>¥499 / 1,200 点</span>
            <span>团队包放入更多点数包或企业采购</span>
          </div>
        </div>
      </div>

      <CreditRuleTable title="中国大陆人民币价格" sub="面向中国大陆企业用户，优先展示支付宝、微信支付和人民币价格。" packages={cnPackages} savingId={savingId} updatePackage={updatePackage} save={save} />
      <CreditRuleTable title="国际美元价格" sub="面向中国大陆以外用户，使用美元固定价格。" packages={intlPackages} savingId={savingId} updatePackage={updatePackage} save={save} />
    </div>
  );
}

function CreditRuleTable({ title, sub, packages, savingId, updatePackage, save }) {
  return (
    <CreditSec title={title} sub={sub}>
      <div className="credit-rule-table">
        <div className="credit-rule-head">
          <span>点数包</span>
          <span>价格</span>
          <span>基础点</span>
          <span>赠送点</span>
          <span>排序</span>
          <span>推荐</span>
          <span>状态</span>
          <span></span>
        </div>
        {packages.map((item) => (
          <div key={item.id} className="credit-rule-row">
            <div>
              <input className="input" value={item.display_name || ""} onChange={(e) => updatePackage(item.id, { display_name: e.target.value })} />
              <div className="credit-rule-id">{item.id}</div>
            </div>
            <CurrencyMinorInput item={item} onChange={(price_minor) => updatePackage(item.id, { price_minor })} />
            <input className="input" type="number" min="0" value={item.base_credits || 0} onChange={(e) => updatePackage(item.id, { base_credits: Number(e.target.value) })} />
            <input className="input" type="number" min="0" value={item.bonus_credits || 0} onChange={(e) => updatePackage(item.id, { bonus_credits: Number(e.target.value) })} />
            <input className="input" type="number" value={item.display_order || 0} onChange={(e) => updatePackage(item.id, { display_order: Number(e.target.value) })} />
            <button className={"chip " + (Number(item.is_featured) ? "active" : "")} onClick={() => updatePackage(item.id, { is_featured: Number(item.is_featured) ? 0 : 1 })}>{Number(item.is_featured) ? "推荐" : "普通"}</button>
            <select className="select" value={item.status || "active"} onChange={(e) => updatePackage(item.id, { status: e.target.value })}>
              <option value="active">启用</option>
              <option value="inactive">停用</option>
            </select>
            <button className="btn btn-primary btn-sm" disabled={savingId === item.id} onClick={() => save(item)}>{savingId === item.id ? "保存中" : "保存"}</button>
          </div>
        ))}
      </div>
    </CreditSec>
  );
}

function CurrencyMinorInput({ item, onChange }) {
  const value = Number(item.price_minor || 0) / 100;
  return (
    <div className="credit-money-input">
      <span>{item.currency === "CNY" ? "¥" : "US$"}</span>
      <input className="input" type="number" min="0" step={item.currency === "USD" ? "0.01" : "1"} value={value} onChange={(e) => onChange(Math.round(Number(e.target.value || 0) * 100))} />
    </div>
  );
}

function CreditLedgerTable({ ledger }) {
  return (
    <div className="report-table" style={{ marginTop: 0 }}>
      <table>
        <thead><tr><th>日期</th><th>事件</th><th>变化</th><th>可用余额</th><th>原因</th></tr></thead>
        <tbody>
          {!ledger.length && <tr><td colSpan="5" style={{ color: "var(--muted)" }}>暂无点数流水。</td></tr>}
          {ledger.slice(0, 20).map((item) => (
            <tr key={item.id}>
              <td>{String(item.created_at || "").slice(0, 10)}</td>
              <td><span className={"badge " + creditLedgerBadge(item.event_type)} style={{ padding: "1px 7px", fontSize: 11 }}>{creditLedgerLabel(item.event_type)}</span></td>
              <td>{Number(item.credit_delta) > 0 ? "+" : ""}{item.credit_delta}</td>
              <td>{item.available_after}</td>
              <td>{item.reason || "-"}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function CreditAccessDenied({ go }) {
  return (
    <div className="page page-narrow">
      <div className="card card-pad empty-project-state">
        <div className="empty-project-icon"><Icon name="lock" size={22} /></div>
        <h4>需要管理员权限</h4>
        <p>点数充值规则只对管理员开放。普通用户可在点数中心充值点数并查看消费流水。</p>
        <button className="btn btn-primary btn-sm" onClick={() => go("credits")}>返回点数中心</button>
      </div>
    </div>
  );
}

function CreditSec({ title, sub, children }) {
  return (
    <div className="settings-sec credit-sec">
      <h3>{title}</h3>
      {sub && <p className="sub">{sub}</p>}
      <div style={{ marginTop: 22 }}>{children}</div>
    </div>
  );
}

function isAdminUser(user) {
  return ["admin", "super_admin"].includes(String(user?.role || "").toLowerCase());
}

function isTeamPackage(item) {
  return /team|团队/i.test(`${item.id || ""} ${item.display_name || ""}`);
}

function formatCreditMoney(item) {
  const amount = Number(item.price_minor || 0) / 100;
  if (item.currency === "CNY") return `¥${amount.toLocaleString(undefined, { maximumFractionDigits: 0 })}`;
  return `US$${amount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
}

function creditLedgerLabel(type) {
  return {
    GRANT: "入账",
    RESERVE: "预留",
    RELEASE: "释放",
    CAPTURE: "实扣",
    REFUND: "退点",
    ADJUST: "调整",
    EXPIRE: "过期"
  }[type] || type;
}

function creditLedgerBadge(type) {
  if (type === "GRANT" || type === "REFUND" || type === "RELEASE") return "badge-green";
  if (type === "CAPTURE") return "badge-orange";
  return "";
}

function creditDeliverableName(id) {
  if (id === "decision_pack_200") return "深度决策包";
  if (id === "standard_report_80") return "标准报告";
  if (id === "light_card_20") return "轻量解锁";
  if (id === "expert_review_800") return "专家复核";
  return id;
}

window.Credits = Credits;