const { useState } = React;
const { Icon, ProtoNav, Topbar, Sidebar, Footer } = window;

function MarketingConfig() {
  const [tier1, setTier1] = useState(20);
  const [tier2, setTier2] = useState(200);
  const [tier3, setTier3] = useState(800);
  const [trialDays, setTrialDays] = useState(30);
  const [couponDays, setCouponDays] = useState(30);
  const [saved, setSaved] = useState(false);

  const save = () => {
    setSaved(true);
    setTimeout(() => setSaved(false), 2000);
  };

  const Input = ({ label, value, onChange, prefix, suffix }) => (
    <div className="config-row">
      <label className="config-label">{label}</label>
      <div className="config-input-wrap">
        {prefix && <span className="config-input-prefix">{prefix}</span>}
        <input className="input config-input" type="number" value={value} onChange={e => onChange(Number(e.target.value))} />
        {suffix && <span className="config-input-suffix">{suffix}</span>}
      </div>
    </div>
  );

  return (
    <div className="proto-root">
      <ProtoNav active="admin-config" />
      <div className="app-shell">
        <Sidebar active="marketing-config" showAdmin={true} />
        <div className="app-main">
          <Topbar crumbs={[{ label: "运营管理", href: "#" }, { label: "营销费用配置" }]} state="SUBSCRIBED" balance={200} />
          <main className="app-content" data-screen-label="marketing-config">
            <div className="admin-page">
              <div className="admin-header" data-region="admin-config-header">
                <h1 className="admin-title">营销费用配置</h1>
                <p className="admin-sub">运营管理 / 营销费用配置</p>
              </div>

              <div className="config-card" data-region="admin-config-card">
                <div className="config-section" data-region="admin-config-tier1">
                  <h3 className="config-section-title">第一层（DICT 审核通过）</h3>
                  <Input label="试用金额" value={tier1} onChange={setTier1} prefix="$" />
                </div>

                <div className="config-section" data-region="admin-config-tier2">
                  <h3 className="config-section-title">第二层（EB 审批通过）</h3>
                  <Input label="试用金额" value={tier2} onChange={setTier2} prefix="$" />
                </div>

                <div className="config-section" data-region="admin-config-tier3">
                  <h3 className="config-section-title">第三层（认证通过）</h3>
                  <Input label="抵扣券金额" value={tier3} onChange={setTier3} prefix="$" />
                </div>

                <div className="config-divider" />

                <div className="config-section" data-region="admin-config-validity">
                  <h3 className="config-section-title">有效期设置</h3>
                  <div className="config-row-group">
                    <Input label="营销试用金有效期" value={trialDays} onChange={setTrialDays} suffix="天" />
                    <Input label="AI Hub 首月抵扣券有效期" value={couponDays} onChange={setCouponDays} suffix="天" />
                  </div>
                </div>

                <div className="config-actions" data-region="admin-config-actions">
                  {saved && <span className="config-saved-hint"><Icon.Check size={16} /> 已保存</span>}
                  <button className="btn btn--primary btn--lg" onClick={save}>保存</button>
                </div>
              </div>
            </div>
          </main>
          <Footer />
        </div>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<MarketingConfig />);