import { useEffect, useState } from "react";
import { listModels, listPricing, savePricing, getBillingConfig, saveBillingConfig, type Model, type Pricing } from "../api";

// 计费规则（配置端）：全局 token→积分汇率 + 每模型单价/积分权重。
// 这是「扣费按规则扣」的规则源——改完立即对后续任务生效；下方用量观测即其结果。

interface Row {
  model: Model;
  inPer1k: string;
  outPer1k: string;
  weight: string; // 积分权重（空/0 → 后端按 1.0）
  currency: string;
  dirty: boolean;
  saving: boolean;
  msg: string;
}

export function BillingRules({ onSaved }: { onSaved?: () => void }) {
  const [rows, setRows] = useState<Row[]>([]);
  const [rate, setRate] = useState(""); // tokens_per_credit
  const [enforce, setEnforce] = useState(false); // 硬拦截开关
  const [cfgDirty, setCfgDirty] = useState(false);
  const [cfgSaving, setCfgSaving] = useState(false);
  const [cfgMsg, setCfgMsg] = useState("");
  const [loading, setLoading] = useState(true);
  const [err, setErr] = useState("");

  const load = async () => {
    setLoading(true);
    setErr("");
    try {
      const [chat, emb, pricing, cfg] = await Promise.all([listModels("chat"), listModels("embedding"), listPricing(), getBillingConfig()]);
      const byID = new Map<string, Pricing>(pricing.map((p) => [p.model_id, p]));
      const mk = (m: Model): Row => {
        const p = byID.get(m.id);
        return {
          model: m,
          inPer1k: p ? String(p.input_per_1k) : "",
          outPer1k: p ? String(p.output_per_1k) : "",
          weight: p && p.credit_weight ? String(p.credit_weight) : "",
          currency: p?.currency || "CNY",
          dirty: false,
          saving: false,
          msg: "",
        };
      };
      setRows([...chat.map(mk), ...emb.map(mk)]);
      setRate(String(cfg.tokens_per_credit));
      setEnforce(cfg.credit_enforce);
      setCfgDirty(false);
    } catch (e) {
      setErr((e as Error).message);
    } finally {
      setLoading(false);
    }
  };
  useEffect(() => {
    void load();
  }, []);

  const patch = (id: string, p: Partial<Row>) => setRows((rs) => rs.map((r) => (r.model.id === id ? { ...r, ...p, dirty: true, msg: "" } : r)));

  const saveRow = async (r: Row) => {
    setRows((rs) => rs.map((x) => (x.model.id === r.model.id ? { ...x, saving: true, msg: "" } : x)));
    try {
      await savePricing({
        model_id: r.model.id,
        input_per_1k: Number(r.inPer1k) || 0,
        output_per_1k: Number(r.outPer1k) || 0,
        credit_weight: Number(r.weight) || 0,
        currency: r.currency || "CNY",
      });
      setRows((rs) => rs.map((x) => (x.model.id === r.model.id ? { ...x, saving: false, dirty: false, msg: "✓ 已保存" } : x)));
      onSaved?.();
    } catch (e) {
      setRows((rs) => rs.map((x) => (x.model.id === r.model.id ? { ...x, saving: false, msg: (e as Error).message } : x)));
    }
  };

  const saveConfig = async () => {
    const n = Number(rate);
    if (!(n > 0)) {
      setCfgMsg("汇率必须 > 0");
      return;
    }
    setCfgSaving(true);
    setCfgMsg("");
    try {
      await saveBillingConfig(n, enforce);
      setCfgDirty(false);
      setCfgMsg("✓ 已保存");
      onSaved?.();
    } catch (e) {
      setCfgMsg((e as Error).message);
    } finally {
      setCfgSaving(false);
    }
  };

  if (loading) return <div className="text-sm text-gray-400">加载计费规则中…</div>;
  if (err) return <div className="text-sm text-rose-600">计费规则加载失败：{err}</div>;

  return (
    <section className="rounded-xl border border-gray-100 bg-white p-5 shadow-sm">
      <div className="mb-4 flex items-center justify-between">
        <div>
          <h3 className="text-sm font-semibold text-gray-700">计费规则</h3>
          <p className="text-[11px] text-gray-400">扣费按此规则实时折算 · 改完对后续任务立即生效</p>
        </div>
        <span className="rounded bg-violet-50 px-2 py-0.5 text-[10px] font-medium text-violet-700">配置端</span>
      </div>

      {/* 全局：token→积分 汇率 + 硬拦截开关 */}
      <div className="mb-5 flex flex-wrap items-end gap-5 rounded-lg border border-violet-100 bg-violet-50/40 p-3">
        <div>
          <label className="block text-[11px] font-medium text-gray-500">token → 积分 汇率</label>
          <div className="mt-1 flex items-center gap-2 text-sm text-gray-600">
            <input
              type="number"
              step="1"
              min="1"
              value={rate}
              onChange={(e) => {
                setRate(e.target.value);
                setCfgDirty(true);
                setCfgMsg("");
              }}
              className="w-28 rounded border px-2 py-1 text-right font-mono text-xs focus:border-violet-500 focus:outline-none"
            />
            <span className="text-xs text-gray-400">token = 1 积分（设 1 即按 token 直计）</span>
          </div>
        </div>
        <div>
          <label className="block text-[11px] font-medium text-gray-500">余额硬拦截</label>
          <label className="mt-1 flex cursor-pointer items-center gap-2 text-sm text-gray-600">
            <input
              type="checkbox"
              checked={enforce}
              onChange={(e) => {
                setEnforce(e.target.checked);
                setCfgDirty(true);
                setCfgMsg("");
              }}
              className="h-4 w-4 accent-violet-600"
            />
            <span className="text-xs text-gray-400">开启后：租户积分余额 ≤0 拒绝新任务（默认关=软扣）</span>
          </label>
        </div>
        <button
          onClick={() => void saveConfig()}
          disabled={!cfgDirty || cfgSaving}
          className="rounded bg-violet-600 px-3 py-1 text-xs text-white hover:bg-violet-700 disabled:opacity-40"
        >
          {cfgSaving ? "保存中…" : "保存规则"}
        </button>
        {cfgMsg && <span className={`text-[11px] ${cfgMsg.startsWith("✓") ? "text-emerald-600" : "text-rose-600"}`}>{cfgMsg}</span>}
      </div>

      {/* 每模型单价 + 积分权重 */}
      {rows.length === 0 ? (
        <div className="text-sm text-gray-400">还没有登记模型，先到「模型」页添加。</div>
      ) : (
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b text-left text-[11px] uppercase tracking-wide text-gray-400">
                <th className="py-2 pr-3 font-medium">模型</th>
                <th className="pr-3 font-medium">类型</th>
                <th className="pr-3 font-medium">输入 / 1K</th>
                <th className="pr-3 font-medium">输出 / 1K</th>
                <th className="pr-3 font-medium">币种</th>
                <th className="pr-3 font-medium">积分权重</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r) => (
                <tr key={r.model.id} className="border-t">
                  <td className="py-2 pr-3">
                    <div className="font-semibold text-gray-800">{r.model.model}</div>
                    <div className="text-[11px] text-gray-400">{r.model.provider}</div>
                  </td>
                  <td className="pr-3 text-xs text-gray-500">{r.model.kind}</td>
                  <td className="pr-3">
                    <input className="w-20 rounded border px-2 py-1 text-xs focus:border-violet-500 focus:outline-none" type="number" step="0.0001" min="0" value={r.inPer1k} onChange={(e) => patch(r.model.id, { inPer1k: e.target.value })} placeholder="0" />
                  </td>
                  <td className="pr-3">
                    <input className="w-20 rounded border px-2 py-1 text-xs focus:border-violet-500 focus:outline-none" type="number" step="0.0001" min="0" value={r.outPer1k} onChange={(e) => patch(r.model.id, { outPer1k: e.target.value })} placeholder="0" />
                  </td>
                  <td className="pr-3">
                    <select className="rounded border bg-white px-2 py-1 text-xs text-gray-700 focus:border-violet-500 focus:outline-none" value={r.currency} onChange={(e) => patch(r.model.id, { currency: e.target.value })}>
                      <option value="CNY">CNY</option>
                      <option value="USD">USD</option>
                    </select>
                  </td>
                  <td className="pr-3">
                    <input className="w-16 rounded border px-2 py-1 text-xs focus:border-violet-500 focus:outline-none" type="number" step="0.1" min="0" value={r.weight} onChange={(e) => patch(r.model.id, { weight: e.target.value })} placeholder="1.0" title="每 token 烧积分的倍率（空/0=1.0）" />
                  </td>
                  <td className="text-right">
                    <button className="rounded bg-violet-600 px-3 py-1 text-xs text-white hover:bg-violet-700 disabled:opacity-40" disabled={!r.dirty || r.saving} onClick={() => void saveRow(r)}>
                      {r.saving ? "保存中…" : "保存"}
                    </button>
                    {r.msg && <span className={`ml-2 text-[11px] ${r.msg.startsWith("✓") ? "text-emerald-600" : "text-rose-600"}`}>{r.msg}</span>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </section>
  );
}
