const { useState, useEffect } = React;
const {
  useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakText, TweakToggle
} = window;

const APP_VERSION = "1.0.0";

const WEEKDAYS = [
  { value: "1", label: "周一" },
  { value: "2", label: "周二" },
  { value: "3", label: "周三" },
  { value: "4", label: "周四" },
  { value: "5", label: "周五" },
  { value: "6", label: "周六" },
  { value: "7", label: "周日" }
];

const DEMO_PRESETS = {
  default: {
    cycleType: "",
    weekEnd: "",
    monthEnd: "",
    monthEndIsLast: false,
    startDate: "",
    cycleDays: "",
    paymentDays: "",
    graceDays: ""
  },
  week: {
    cycleType: "week",
    weekEnd: "4",
    monthEnd: "",
    monthEndIsLast: false,
    startDate: "",
    cycleDays: "",
    paymentDays: "7",
    graceDays: "2"
  },
  week2: {
    cycleType: "week2",
    weekEnd: "4",
    monthEnd: "",
    monthEndIsLast: false,
    startDate: "",
    cycleDays: "",
    paymentDays: "7",
    graceDays: "2"
  },
  week3: {
    cycleType: "week3",
    weekEnd: "4",
    monthEnd: "",
    monthEndIsLast: false,
    startDate: "",
    cycleDays: "",
    paymentDays: "7",
    graceDays: "2"
  },
  month: {
    cycleType: "month",
    weekEnd: "",
    monthEnd: "14",
    monthEndIsLast: false,
    startDate: "",
    cycleDays: "",
    paymentDays: "7",
    graceDays: "2"
  },
  fixed: {
    cycleType: "fixed",
    weekEnd: "",
    monthEnd: "",
    monthEndIsLast: false,
    startDate: "2026-08-01",
    cycleDays: "14",
    paymentDays: "7",
    graceDays: "2"
  }
};

const DEMO_LABELS = [
  { id: "default", label: "默认状态" },
  { id: "week", label: "选择「按周（一周）」" },
  { id: "week2", label: "选择「按两周」" },
  { id: "week3", label: "选择「按三周」" },
  { id: "month", label: "选择「按月」" },
  { id: "fixed", label: "选择「固定天数」" }
];

function isWeekCycleType(cycleType) {
  return window.CycleLogic.weekCountOf(cycleType) > 0;
}

function weekEndHint(cycleType, weekEnd) {
  var range = weekEnd ? window.CycleLogic.weekdayRangeText(parseInt(weekEnd, 10)) : "—";
  var n = window.CycleLogic.weekCountOf(cycleType);
  if (n === 2) return "系统自动推导开始日。每两周为一个结算周期，当前为" + range + "。";
  if (n === 3) return "系统自动推导开始日。每三周为一个结算周期，当前为" + range + "。";
  return "系统自动推导开始日。当前为" + range + "。";
}

const TABLE_ROWS = [
  {
    id: "M1008611",
    email: "alex***@kualio.se",
    name: "履约: Alex-作业",
    biz: "代发",
    status: "审核通过",
    applicant: "张敏",
    appliedAt: "2026-08-18 14:21:06",
    remark: "按现有账期续额",
    creditLimit: "50,000",
    dailyLimit: "10,000",
    singleLimit: "5,000",
    cycleType: "week",
    weekEnd: "4",
    paymentDays: "7",
    graceDays: "2"
  },
  {
    id: "M1008620",
    email: "finance***@example.com",
    name: "环球贸易",
    biz: "代发",
    status: "审核通过",
    applicant: "李强",
    appliedAt: "2026-08-12 09:03:44",
    remark: "信用额度上调至 50,000",
    creditLimit: "80,000",
    dailyLimit: "20,000",
    singleLimit: "8,000",
    cycleType: "month",
    monthEnd: "14",
    paymentDays: "7",
    graceDays: "2"
  }
];

function cycleTypeLabel(row) {
  if (row.cycleType === "week") return "按周（一周）";
  if (row.cycleType === "week2") return "按两周";
  if (row.cycleType === "week3") return "按三周";
  if (row.cycleType === "month") return "按月";
  if (row.cycleType === "fixed") return "固定天数";
  return "—";
}

function cycleConfigText(row) {
  if (isWeekCycleType(row.cycleType)) {
    return "周期截止星期：" + window.CycleLogic.WEEKDAY_NAMES[parseInt(row.weekEnd, 10)];
  }
  if (row.cycleType === "month") {
    return row.monthEndIsLast ? "周期截止日：月底" : ("周期截止日：" + row.monthEnd + "日");
  }
  if (row.cycleType === "fixed") {
    return "开始结算日期 " + row.startDate + "，周期 " + row.cycleDays + " 天";
  }
  return "—";
}

function IconClose() {
  return (
    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
      <path d="M2 2l8 8M10 2L2 10" stroke="currentColor" strokeWidth="1.4" />
    </svg>
  );
}

function IconInfo() {
  return (
    <svg className="info" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.6" />
      <path d="M12 11v5M12 8h.01" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
    </svg>
  );
}

function FormItem(props) {
  return (
    <div className="form-item">
      <label className={props.required ? "form-label req" : "form-label"}>{props.label}</label>
      {props.children}
      {props.error ? <div className="error-text">{props.error}</div> : null}
      {!props.error && props.hint ? <div className="hint-text">{props.hint}</div> : null}
    </div>
  );
}

function RulePreview(props) {
  var preview = props.preview;
  if (!preview.ready) {
    return (
      <div className="preview">
        <div className="preview-hd">规则预览 <IconInfo /></div>
        <div className="preview-empty">{preview.hint}</div>
      </div>
    );
  }
  var total = Math.max(preview.cycleDays, 1) + Math.max(preview.paymentDays, 0) + Math.max(preview.graceDays, 0);
  var w1 = (preview.cycleDays / total) * 100;
  var w2 = (Math.max(preview.paymentDays, 0) / total) * 100;
  var w3 = (Math.max(preview.graceDays, 0) / total) * 100;
  return (
    <div className="preview">
      <div className="preview-hd">规则预览 <IconInfo /></div>
      <div className="preview-facts">
        <div>
          <span className="fact-label">本期结算周期</span>
          <span className="fact-value">{preview.cycleStart} ～ {preview.cycleEnd}</span>
        </div>
        <div>
          <span className="fact-label">账单生成</span>
          <span className="fact-value">{preview.billDate}</span>
        </div>
        <div>
          <span className="fact-label">付款截止</span>
          <span className={"fact-value" + (preview.dueDate ? " due" : "")}>
            {preview.dueDate || "请填写账期天数"}
          </span>
        </div>
        <div>
          <span className="fact-label">宽限截止</span>
          <span className="fact-value">{preview.graceDate || (preview.dueDate ? "未设置宽限期" : "—")}</span>
        </div>
      </div>
      <div className="preview-rule">{preview.ruleText}</div>
      <div className="timeline">
        <span className="tl-cycle" style={{ width: w1 + "%" }}></span>
        {preview.paymentDays > 0 ? <span className="tl-term" style={{ width: w2 + "%" }}></span> : null}
        {preview.graceDays > 0 ? <span className="tl-grace" style={{ width: w3 + "%" }}></span> : null}
      </div>
      <div className="timeline-legend">
        <span><i className="dot dot-cycle"></i>{preview.cycleName} {preview.cycleDays}天</span>
        {preview.paymentDays > 0 ? <span><i className="dot dot-term"></i>账期 {preview.paymentDays}天</span> : null}
        {preview.graceDays > 0 ? <span><i className="dot dot-grace"></i>宽限期 {preview.graceDays}天</span> : null}
      </div>
    </div>
  );
}

function ApplicationModal(props) {
  var form = props.form;
  var setForm = props.setForm;
  var errors = props.errors;
  var preview = window.CycleLogic.buildPreview(form, props.refDate);

  useEffect(function () {
    var bd = document.querySelector(".modal-bd");
    var el = document.getElementById("cycle-settings");
    if (bd && el) {
      bd.scrollTop = Math.max(0, el.offsetTop - 8);
    }
  }, [form.cycleType, form.weekEnd, form.monthEnd, form.monthEndIsLast, form.startDate, form.cycleDays]);

  function patch(partial) {
    setForm(function (prev) { return Object.assign({}, prev, partial); });
  }

  return (
    <div className="mask" data-screen-label="申请弹窗">
      <div className="modal">
        <div className="modal-hd">
          <span>发起信用额度调整申请</span>
          <button className="icon-btn" onClick={props.onClose} aria-label="关闭"><IconClose /></button>
        </div>
        <div className="modal-bd">
          <FormItem label="商户名称" required>
            <input className="control" value="履约: Alex-作业 (kus****@kualio.se)" readOnly />
          </FormItem>
          <div className="merchant-card">
            <div className="merchant-row"><span>商户名称</span><b>履约: Alex-作业</b></div>
            <div className="merchant-row"><span>资金资产</span><b>履约</b></div>
          </div>

          <div className="section-title">额度设置</div>
          <FormItem label="设定信用额度" required>
            <input className="control" placeholder="请输入新的信用额度" value={form.creditLimit || ""}
              onChange={function (e) { patch({ creditLimit: e.target.value }); }} />
          </FormItem>
          <FormItem label="设定单日额度">
            <input className="control" placeholder="请输入单日额度" value={form.dailyLimit || ""}
              onChange={function (e) { patch({ dailyLimit: e.target.value }); }} />
          </FormItem>
          <FormItem label="设定单笔额度">
            <input className="control" placeholder="请输入单笔额度" value={form.singleLimit || ""}
              onChange={function (e) { patch({ singleLimit: e.target.value }); }} />
          </FormItem>

          <div className="section-title" id="cycle-settings">周期与日期设置</div>
          <FormItem label="结算周期类型" required error={errors.cycleType}>
            <select
              className={"control" + (errors.cycleType ? " is-error" : "")}
              value={form.cycleType}
              onChange={function (e) { patch({ cycleType: e.target.value }); }}
            >
              <option value="">请选择结算周期类型</option>
              <option value="week">按周（一周）</option>
              <option value="week2">按两周</option>
              <option value="week3">按三周</option>
              <option value="month">按月</option>
              <option value="fixed">固定天数</option>
            </select>
          </FormItem>

          {isWeekCycleType(form.cycleType) ? (
            <FormItem
              label="周期截止星期"
              required
              error={errors.weekEnd}
              hint={weekEndHint(form.cycleType, form.weekEnd)}
            >
              <select
                className={"control" + (errors.weekEnd ? " is-error" : "")}
                value={form.weekEnd}
                onChange={function (e) { patch({ weekEnd: e.target.value }); }}
              >
                <option value="">请选择周期截止星期</option>
                {WEEKDAYS.map(function (d) {
                  return <option key={d.value} value={d.value}>{d.label}</option>;
                })}
              </select>
            </FormItem>
          ) : null}

          {form.cycleType === "month" ? (
            <FormItem
              label="周期截止日"
              required
              error={errors.monthEnd}
              hint="可输入 1～31 日。若当月无该日期，则取当月最后一天。截止14日 → 上月15日～本月14日。"
            >
              <div className="month-end-row">
                <input
                  className={"control" + (errors.monthEnd ? " is-error" : "")}
                  type="number"
                  min="1"
                  max="31"
                  placeholder="请输入 1～31"
                  disabled={form.monthEndIsLast}
                  value={form.monthEndIsLast ? "" : form.monthEnd}
                  onChange={function (e) { patch({ monthEnd: e.target.value, monthEndIsLast: false }); }}
                />
                <button
                  type="button"
                  className={"last-day-btn" + (form.monthEndIsLast ? " is-on" : "")}
                  onClick={function () { patch({ monthEndIsLast: !form.monthEndIsLast, monthEnd: form.monthEndIsLast ? form.monthEnd : "" }); }}
                >月底</button>
              </div>
            </FormItem>
          ) : null}

          {form.cycleType === "fixed" ? (
            <div>
              <div className="subhead">自定义结算设置</div>
              <div className="inline-2">
                <FormItem label="开始结算日期" required error={errors.startDate}>
                  <input
                    className={"control" + (errors.startDate ? " is-error" : "")}
                    type="date"
                    value={form.startDate}
                    onChange={function (e) { patch({ startDate: e.target.value }); }}
                  />
                </FormItem>
                <FormItem label="结算周期天数" required error={errors.cycleDays}>
                  <input
                    className={"control" + (errors.cycleDays ? " is-error" : "")}
                    type="number"
                    min="1"
                    placeholder="请输入结算周期天数"
                    value={form.cycleDays}
                    onChange={function (e) { patch({ cycleDays: e.target.value }); }}
                  />
                </FormItem>
              </div>
            </div>
          ) : null}

          <FormItem label="账期（天）" required error={errors.paymentDays} hint="当前结算周期生成账单后，多少天到期。">
            <input
              className={"control" + (errors.paymentDays ? " is-error" : "")}
              type="number"
              min="1"
              max="365"
              placeholder="请输入账期 (1-365)"
              value={form.paymentDays}
              onChange={function (e) { patch({ paymentDays: e.target.value }); }}
            />
          </FormItem>
          <FormItem label="宽限期（天）" hint="账单正式到期后额外允许的宽限天数。">
            <input
              className="control"
              type="number"
              min="1"
              max="365"
              placeholder="请输入宽限期 (1-365)"
              value={form.graceDays}
              onChange={function (e) { patch({ graceDays: e.target.value }); }}
            />
          </FormItem>

          <RulePreview preview={preview} />

          <div className="section-title">更多信息</div>
          <FormItem label="是否有担保人" required>
            <div className="radio-row">
              <label className="radio">
                <input type="radio" name="guarantor" checked={form.hasGuarantor === "no"}
                  onChange={function () { patch({ hasGuarantor: "no" }); }} /> 无
              </label>
              <label className="radio">
                <input type="radio" name="guarantor" checked={form.hasGuarantor === "yes"}
                  onChange={function () { patch({ hasGuarantor: "yes" }); }} /> 有
              </label>
            </div>
          </FormItem>
          <FormItem label="客户网站" required>
            <input className="control" placeholder="请输入客户网站" value={form.website || ""}
              onChange={function (e) { patch({ website: e.target.value }); }} />
          </FormItem>
          <FormItem label="客户每月营收" required>
            <div className="affix">
              <input className="control" placeholder="请输入客户每月营收" value={form.revenue || ""}
                onChange={function (e) { patch({ revenue: e.target.value }); }} />
              <span className="affix-addon">$</span>
            </div>
          </FormItem>
          <FormItem label="客户每月销售额" required>
            <div className="affix">
              <input className="control" placeholder="请输入客户每月销售额" value={form.sales || ""}
                onChange={function (e) { patch({ sales: e.target.value }); }} />
              <span className="affix-addon">$</span>
            </div>
          </FormItem>
          <FormItem label="客户历史总利润" required>
            <div className="affix">
              <input className="control" placeholder="请输入客户历史总利润" value={form.profit || ""}
                onChange={function (e) { patch({ profit: e.target.value }); }} />
              <span className="affix-addon">$</span>
            </div>
          </FormItem>
          <FormItem label="备注">
            <textarea className="control" maxLength="500" placeholder="请输入备注"
              value={form.remark || ""}
              onChange={function (e) { patch({ remark: e.target.value }); }}></textarea>
          </FormItem>
          <div className="char-count">{(form.remark || "").length}/500</div>
          <FormItem label="附件">
            <button type="button" className="btn btn-file" onClick={props.onToastFile}>选择文件</button>
            <div className="file-help">支持 jpg / png / pdf，最多 10 个文件，单个不超过 20MB</div>
          </FormItem>
        </div>
        <div className="modal-ft">
          <button className="btn" onClick={props.onClose}>取消</button>
          <button className="btn btn-primary" onClick={props.onConfirm}>确认</button>
        </div>
      </div>
    </div>
  );
}

function DetailModal(props) {
  var row = props.record;
  var preview = window.CycleLogic.buildPreview(row, props.refDate);
  return (
    <div className="mask" data-screen-label="申请详情">
      <div className="modal">
        <div className="modal-hd">
          <span>信用额度调整申请详情</span>
          <button className="icon-btn" onClick={props.onClose} aria-label="关闭"><IconClose /></button>
        </div>
        <div className="modal-bd">
          <div className="section-title">申请信息</div>
          <dl className="desc">
            <dt>商户ID</dt><dd>{row.id}</dd>
            <dt>商户名称</dt><dd>{row.name}</dd>
            <dt>商户邮箱</dt><dd>{row.email}</dd>
            <dt>子业务名称</dt><dd>{row.biz}</dd>
            <dt>审核状态</dt><dd><span className="status-ok">{row.status}</span></dd>
            <dt>申请人</dt><dd>{row.applicant}</dd>
            <dt>申请时间</dt><dd>{row.appliedAt}</dd>
            <dt>申请备注</dt><dd>{row.remark}</dd>
          </dl>
          <div className="section-title">额度设置</div>
          <dl className="desc">
            <dt>信用额度</dt><dd>{row.creditLimit}</dd>
            <dt>单日额度</dt><dd>{row.dailyLimit || "—"}</dd>
            <dt>单笔额度</dt><dd>{row.singleLimit || "—"}</dd>
          </dl>
          <div className="section-title">周期与日期设置</div>
          <dl className="desc">
            <dt>结算周期类型</dt><dd>{cycleTypeLabel(row)}</dd>
            <dt>周期配置</dt><dd>{cycleConfigText(row)}</dd>
            <dt>账期（天）</dt><dd>{row.paymentDays}</dd>
            <dt>宽限期（天）</dt><dd>{row.graceDays || "未设置"}</dd>
          </dl>
          <RulePreview preview={preview} />
        </div>
        <div className="modal-ft">
          <button className="btn" onClick={props.onClose}>关闭</button>
        </div>
      </div>
    </div>
  );
}

var LIST_TABS = [
  { id: "mine", label: "我发起的" },
  { id: "pending", label: "待审核" },
  { id: "history", label: "历史处理" },
  { id: "all", label: "全部" }
];

function EmptyTable() {
  return (
    <div className="empty-state">
      <svg width="64" height="40" viewBox="0 0 64 40" fill="none" aria-hidden="true">
        <rect x="8" y="6" width="48" height="28" rx="2" stroke="#d9d9d9" />
        <path d="M20 20h24M20 26h16" stroke="#d9d9d9" strokeLinecap="round" />
      </svg>
      <div>暂无数据</div>
    </div>
  );
}

function ListPage(props) {
  var tab = props.listTab || "mine";
  var isMine = tab === "mine";
  var rows = tab === "all" ? TABLE_ROWS : [];
  return (
    <div className="fund-shell" data-screen-label="信用额度列表">
      <div className="fund-top">
        <div className="fund-brand"><span>FUND</span></div>
        <div className="crumb">Fund / 额度管理 / <b>信用额度</b></div>
        <div className="fund-utils">搜索　通知　设置　管理员</div>
      </div>
      <div className="fund-body">
        <h1 className="page-title">信用额度</h1>
        <div className="tabs">
          {LIST_TABS.map(function (item) {
            return (
              <button
                key={item.id}
                type="button"
                className={"tab" + (tab === item.id ? " is-active" : "")}
                onClick={function () { props.onTabChange(item.id); }}
              >{item.label}</button>
            );
          })}
        </div>
        <div className="panel">
          <div className="filter-row">
            <div className="filter-item"><label>商户ID</label><input className="control" placeholder="输入商户ID" /></div>
            <div className="filter-item"><label>商户邮箱</label><input className="control" placeholder="输入商户邮箱" /></div>
            <div className="filter-item"><label>商户名称</label><input className="control" placeholder="输入商户名称" /></div>
            <div className="filter-item">
              <label>审核状态</label>
              <select className="control" defaultValue=""><option value="">请选择审核状态</option></select>
            </div>
            <div className="filter-item"><label>申请时间</label><input className="control" placeholder="开始日期 - 结束日期" /></div>
            <div className="filter-actions">
              <button className="btn btn-primary" type="button">搜索</button>
              <button className="btn" type="button">重置</button>
            </div>
          </div>
        </div>
        <div className="table-wrap">
          {isMine ? (
            <button className="btn btn-primary" type="button" onClick={props.onOpen}>发起信用额度调整申请</button>
          ) : null}
          <div className="table-scroll" style={{ marginTop: isMine ? 12 : 0 }}>
            <table className="data">
              <thead>
                <tr>
                  <th>商户ID</th><th>商户邮箱</th><th>商户名称</th><th>子业务名称</th>
                  <th>审核状态</th><th>申请人</th><th>申请时间</th><th>操作</th>
                </tr>
              </thead>
              {rows.length ? (
                <tbody>
                  {rows.map(function (row) {
                    return (
                      <tr key={row.id}>
                        <td>{row.id}</td>
                        <td>{row.email}</td>
                        <td>{row.name}</td>
                        <td>{row.biz}</td>
                        <td><span className="status-ok">{row.status}</span></td>
                        <td>{row.applicant}</td>
                        <td>{row.appliedAt}</td>
                        <td>
                          <button className="link-btn" type="button" onClick={function () { props.onDetail(row); }}>详情</button>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              ) : null}
            </table>
            {rows.length ? null : <EmptyTable />}
          </div>
          <div className="pager">
            <span>共 {rows.length} 条记录</span>
            <div className="pager-right">
              <select className="control" style={{ width: 92 }} defaultValue="20">
                <option value="20">20条/页</option>
              </select>
              <button className="pager-btn" type="button" disabled>&lt;</button>
              <button className="btn" type="button">1</button>
              <button className="pager-btn" type="button" disabled>&gt;</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function mergePreset(preset) {
  return Object.assign({
    creditLimit: "",
    dailyLimit: "",
    singleLimit: "",
    hasGuarantor: "no",
    website: "",
    revenue: "",
    sales: "",
    profit: "",
    remark: ""
  }, preset);
}

function validate(form) {
  var errors = {};
  if (!form.cycleType) errors.cycleType = "请选择结算周期类型";
  if (isWeekCycleType(form.cycleType) && !form.weekEnd) errors.weekEnd = "请选择周期截止星期";
  if (form.cycleType === "month" && !form.monthEndIsLast) {
    var d = parseInt(form.monthEnd, 10);
    if (!(d >= 1 && d <= 31)) errors.monthEnd = "请输入 1～31 日，或选择月底";
  }
  if (form.cycleType === "fixed") {
    if (!form.startDate) errors.startDate = "请选择开始结算日期";
    if (!(parseInt(form.cycleDays, 10) >= 1)) errors.cycleDays = "请输入结算周期天数";
  }
  var pay = parseInt(form.paymentDays, 10);
  if (!(pay >= 1 && pay <= 365)) errors.paymentDays = "请输入账期天数（1-365）";
  return errors;
}

function App() {
  var tweaksApi = useTweaks(window.TWEAK_DEFAULTS);
  var t = tweaksApi[0];
  var setTweak = tweaksApi[1];
  var demoState = t.demoState || "default";
  var refDate = t.refDate || "2026-08-25";
  var [open, setOpen] = useState(false);
  var [detailRecord, setDetailRecord] = useState(null);
  var [listTab, setListTab] = useState("mine");
  var [form, setForm] = useState(function () { return mergePreset(DEMO_PRESETS.default); });
  var [errors, setErrors] = useState({});
  var [toast, setToast] = useState("");
  var skipFirstDemo = React.useRef(true);

  useEffect(function () {
    setForm(mergePreset(DEMO_PRESETS[demoState] || DEMO_PRESETS.default));
    setErrors({});
    if (skipFirstDemo.current) {
      skipFirstDemo.current = false;
      return;
    }
    setOpen(true);
  }, [demoState]);

  useEffect(function () {
    if (!toast) return;
    var id = setTimeout(function () { setToast(""); }, 2200);
    return function () { clearTimeout(id); };
  }, [toast]);

  function applyDemo(id) {
    setTweak("demoState", id);
  }

  function onConfirm() {
    var next = validate(form);
    setErrors(next);
    if (Object.keys(next).length) {
      setToast("请先完成周期与日期设置");
      return;
    }
    setToast("此为原型，不会提交真实申请");
  }

  return (
    <div>
      <div className="proto-bar">
        <span className="proto-bar-label">原型状态</span>
        <div className="proto-states">
          {DEMO_LABELS.map(function (item) {
            return (
              <button
                key={item.id}
                className={"proto-chip" + (demoState === item.id ? " is-active" : "")}
                onClick={function () { applyDemo(item.id); }}
              >{item.label}</button>
            );
          })}
        </div>
        <span className="proto-note">切换结算周期类型时，下方字段与规则预览会同步变化</span>
        <span className="proto-version">v{APP_VERSION}</span>
      </div>
      <ListPage
        listTab={listTab}
        onTabChange={setListTab}
        onOpen={function () { setDetailRecord(null); setListTab("mine"); setOpen(true); }}
        onDetail={function (row) { setOpen(false); setDetailRecord(row); }}
      />
      {open ? (
        <ApplicationModal
          form={form}
          setForm={setForm}
          errors={errors}
          refDate={refDate}
          onClose={function () { setOpen(false); }}
          onConfirm={onConfirm}
          onToastFile={function () { setToast("原型不上传附件"); }}
        />
      ) : null}
      {detailRecord ? (
        <DetailModal
          record={detailRecord}
          refDate={refDate}
          onClose={function () { setDetailRecord(null); }}
        />
      ) : null}
      {toast ? <div className="toast">{toast}</div> : null}
      <TweaksPanel>
        <TweakSection label="演示" />
        <TweakRadio
          label="表单状态"
          value={demoState}
          options={[
            { value: "default", label: "默认" },
            { value: "week", label: "按周（一周）" },
            { value: "week2", label: "按两周" },
            { value: "week3", label: "按三周" },
            { value: "month", label: "按月" },
            { value: "fixed", label: "固定天数" }
          ]}
          onChange={function (v) { setTweak("demoState", v); }}
        />
        <TweakText label="预览参考日期" value={refDate} onChange={function (v) { setTweak("refDate", v); }} />
        <TweakToggle label="打开申请弹窗" value={open} onChange={function (v) { setOpen(v); }} />
      </TweaksPanel>
    </div>
  );
}

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