import { useState } from "react";
import type { BillingSummary, Ledger, Project, TeamMember } from "../types";
import { money } from "./stage-config";

type Tab = "overview" | "by-project" | "by-member" | "bills";

const RECHARGE: Array<{ amt: number; gift: string; bonus: boolean; ribbon?: string }> = [
  { amt: 100, gift: "无赠送", bonus: false },
  { amt: 500, gift: "+ ¥30 赠送", bonus: true, ribbon: "推荐" },
  { amt: 1000, gift: "+ ¥80 赠送", bonus: true },
  { amt: 3000, gift: "+ ¥300 赠送", bonus: true }
];

const STAGES: Array<{ k: string; color: string }> = [
  { k: "视频片段(Seedance)", color: "var(--heat)" },
  { k: "故事板(image-2)", color: "var(--accent-forest)" },
  { k: "基础资产", color: "var(--black-alpha-56)" },
  { k: "脚本 LLM", color: "var(--black-alpha-32)" }
];

export function AccountPage({ billing, ledgers, projects, teamMembers }: {
  billing: BillingSummary | null;
  ledgers: Ledger[];
  projects: Project[];
  teamMembers: TeamMember[];
}) {
  const [tab, setTab] = useState<Tab>("overview");
  const [recharge, setRecharge] = useState(500);

  const balance = Number(billing?.account.balance || 0);
  const used = Number(billing?.charged_total || 0);
  const memberLimit = teamMembers.reduce((sum, m) => sum + Math.max(0, Number(m.monthly_credit_limit || 0)), 0);
  const limit = memberLimit || balance;
  const left = Math.max(0, limit - used);
  const pct = limit > 0 ? Math.min(100, (used / limit) * 100) : 0;

  return (
    <section className="account-page">
      <div className="page-head">
        <div>
          <h1>消费</h1>
          <div className="sub"><span className="mono">// 余额 · 充值 · 4 维消费视图 + 账单流水</span></div>
        </div>
      </div>

      <div className="top-grid">
        <div className="balance-banner">
          <span className="corner-tr" aria-hidden="true"></span><span className="corner-bl" aria-hidden="true"></span>
          <div className="balance-hero">
            <div className="lbl">团队余额</div>
            <div className="v">{money(balance)}</div>
            <div className="meta">// 充值累加 · 不重置</div>
          </div>
          <div className="balance-sub">
            <div className="col">
              <div className="lbl">本月限额</div>
              <div className="v">{money(limit)}</div>
              <div className="meta">// 按自然月重置</div>
            </div>
            <div className="col">
              <div className="lbl">当月已用</div>
              <div className="v">{money(used)}</div>
              <div className="meta">// 占比 {pct.toFixed(1)}% · {pct >= 80 ? "注意" : "健康"}</div>
            </div>
          </div>
          <div className="balance-foot">
            <div className="balance-meter" aria-label={`本月额度使用率 ${pct.toFixed(1)}%`}><span style={{ width: `${pct}%` }} /></div>
            <div className="balance-foot-meta">
              <span>团队月剩余 {money(left)}</span>
              <span>使用率 {pct.toFixed(1)}%</span>
            </div>
          </div>
        </div>

        <div className="pane topup-pane">
          <div className="topup-head">
            <div>
              <h3>快速充值</h3>
              <div className="desc">// 充值后立刻到账,可开发票 · 仅超管可操作</div>
            </div>
            <div className="topup-selected">已选 ¥{recharge}</div>
          </div>
          <div className="recharge-row">
            {RECHARGE.map((item) => (
              <div
                key={item.amt}
                className={`recharge-card ${recharge === item.amt ? "selected" : ""}`}
                role="button"
                tabIndex={0}
                aria-pressed={recharge === item.amt}
                onClick={() => setRecharge(item.amt)}
              >
                {item.ribbon && <span className="ribbon">{item.ribbon}</span>}
                <div className="amt">¥{item.amt}</div>
                <div className={`gift ${item.bonus ? "bonus" : ""}`}>{item.gift}</div>
              </div>
            ))}
          </div>
          <div className="pay-row">
            <div className="pay-title">自定义金额</div>
            <input className="input" placeholder="最低 ¥50,可输入任意金额" />
            <div className="pay-btn-row">
              <button className="btn pay-method-btn pay-wechat" type="button" aria-label="微信支付">
                <span className="pay-logo" aria-hidden="true"><img src="/assets/pay-wechat.png" alt="" /></span>
                微信支付
              </button>
              <button className="btn pay-method-btn pay-alipay" type="button" aria-label="支付宝">
                <span className="pay-logo" aria-hidden="true"><img src="/assets/pay-alipay.png" alt="" /></span>
                支付宝
              </button>
            </div>
          </div>
        </div>
      </div>

      <div className="billing-tabs" role="tablist">
        <button className={`tab ${tab === "overview" ? "active" : ""}`} type="button" onClick={() => setTab("overview")}>总览</button>
        <button className={`tab ${tab === "by-project" ? "active" : ""}`} type="button" onClick={() => setTab("by-project")}>项目 <span className="count">{projects.length}</span></button>
        <button className={`tab ${tab === "by-member" ? "active" : ""}`} type="button" onClick={() => setTab("by-member")}>成员 <span className="count">{teamMembers.length}</span></button>
        <button className={`tab ${tab === "bills" ? "active" : ""}`} type="button" onClick={() => setTab("bills")}>账单流水 <span className="count">{ledgers.length}</span></button>
      </div>

      <div className={`tab-panel ${tab === "overview" ? "active" : ""}`}>
        <div className="overview-grid">
          <div className="pane trend-pane">
            <div className="trend-head">
              <h3>消费趋势</h3>
              <span className="sub">// 近 14 天 · 单位 ¥</span>
              <span className="spacer"></span>
              <button className="chip active" type="button">日</button>
              <button className="chip" type="button">周</button>
              <button className="chip" type="button">月</button>
            </div>
            <div className="trend-chart">
              <div className="bars"></div>
              <div className="x-axis"></div>
            </div>
            <div className="trend-foot">
              <div className="item"><span className="k">14 天合计</span><span className="v">{money(used)}</span></div>
              <div className="item"><span className="k">日均</span><span className="v">{money(used / 14)}</span></div>
              <div className="item"><span className="k">峰值</span><span className="v warn">{money(used)}</span></div>
            </div>
          </div>

          <div className="pane stage-pane">
            <h3>本月按阶段分布</h3>
            <div className="desc">// PRD §5.3.5 扣费规则 · 仅确认后扣</div>
            {STAGES.map((s) => (
              <div key={s.k}>
                <div className="usage-line"><span className="k">{s.k}</span><span className="v">{money(0)}</span></div>
                <div className="usage-bar"><span style={{ width: "0%", background: s.color }} /></div>
              </div>
            ))}
            <div className="total"><span>合计</span><span className="v">{money(used)}</span></div>
          </div>
        </div>

        <div className="pane rule-pane" style={{ marginTop: 16 }}>
          <h3>扣费 + 四层额度预检规则</h3>
          <div className="desc">// PRD §5.3.5 + §10.3 · 对接团队请以此页为准</div>
          <div className="rule-list">
            <strong>① 失败不扣</strong>:模型超时 / 内容审核拦截 / 生成异常一律不扣费。<br />
            <strong>② 用户重跑不扣首次</strong>:第一次重跑保留原扣费,第二次起按次结算。<br />
            <strong>③ 仅在你点击 <span className="mono-acc">[ 确认通过 ]</span> 时入账</strong>。<br />
            <strong>④ 导出不再扣费</strong>,所有 token 已在过程中结算。
          </div>
          <div className="quota-rules">
            <div className="qr-head">// 任务确认前 · 四层额度预检(任一不通过即拦截)</div>
            <div className="step"><span className="num">1</span><span><strong>个人日剩余</strong> ≥ 任务预估 × <span className="formula">1.2</span></span></div>
            <div className="step"><span className="num">2</span><span><strong>个人月剩余</strong> ≥ 同上</span></div>
            <div className="step"><span className="num">3</span><span><strong>团队月剩余</strong> ≥ 同上</span></div>
            <div className="step"><span className="num">4</span><span><strong>团队总余额</strong> ≥ 同上</span></div>
          </div>
        </div>
      </div>

      <div className={`tab-panel ${tab === "bills" ? "active" : ""}`}>
        <table className="billing-table">
          <thead><tr><th>时间</th><th>项目 / 类型</th><th>详情</th><th>成员</th><th>状态</th><th style={{ textAlign: "right" }}>金额</th></tr></thead>
          <tbody>
            {ledgers.map((l) => (
              <tr key={l.id}>
                <td className="ts">{new Date(l.created_at).toLocaleString("zh-CN")}</td>
                <td>{l.ledger_type}</td>
                <td className="muted">{l.reason}</td>
                <td></td>
                <td><span className="status-tag ok">OK</span></td>
                <td className="neg">{l.amount}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className={`tab-panel ${tab === "by-project" ? "active" : ""}`}>
        <table className="billing-table">
          <thead><tr><th>项目</th><th>当前阶段</th><th>状态</th><th style={{ textAlign: "right" }}>消耗</th></tr></thead>
          <tbody>
            {projects.map((p) => (
              <tr key={p.id}><td>{p.name}</td><td>{p.current_stage}</td><td>{p.status}</td><td className="zero">{money(0)}</td></tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className={`tab-panel ${tab === "by-member" ? "active" : ""}`}>
        <table className="billing-table">
          <thead><tr><th>成员</th><th>角色</th><th>已用 / 月度额度</th><th>状态</th></tr></thead>
          <tbody>
            {teamMembers.map((m) => (
              <tr key={m.id}><td className="who"><span className="av">{m.user.username.slice(0, 1).toUpperCase()}</span>{m.user.username}</td><td>{m.role}</td><td className="zero">{money(m.monthly_credit_limit)}</td><td>{m.status}</td></tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
}
