// 【重要】必须使用 const Component 作为组件变量名
// ONE-OS 小程序 - 还车应结款审批办理（参照 web 端还车应结款-查看，适配移动端）

// 独立预览页：完整审批能力已内嵌于「审批中心.jsx」，本页供 Axhub 单独打开预览。

const { useState, useMemo, useRef, useEffect } = React;
const moment = window.moment || window.dayjs;

const COLOR_PRIMARY = '#16D1A1';
const COLOR_PRIMARY_DEEP = '#00BFA5';
const COLOR_PRIMARY_SOFT = 'rgba(22, 209, 161, 0.12)';
const COLOR_TEXT = '#1D2129';
const COLOR_TEXT_SEC = '#4E5969';
const COLOR_MUTED = '#86909C';
const COLOR_LINE = '#E5E6EB';
const COLOR_BG = '#FFFFFF';
const COLOR_PAGE = '#F2F3F5';
const COLOR_SUCCESS = '#00B42A';
const COLOR_DANGER = '#F53F3F';
const COLOR_WARN = '#FF7D00';
const FONT_FAMILY = '-apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, sans-serif';

const antd = (() => {
  const raw = window.antd;
  if (!raw) return {};
  return raw.default && typeof raw.default === 'object' ? { ...raw, ...raw.default } : raw;
})();
const message = antd.message || { info: () => {}, success: () => {}, warning: () => {} };
const Drawer = antd.Drawer;

const formatMoney = (val) => {
  const n = parseFloat(val);
  if (Number.isNaN(n)) return val || '—';
  return `¥${n.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
};
const formatYuan = (val) => {
  const n = parseFloat(val);
  if (Number.isNaN(n)) return '—';
  return `${n.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} 元`;
};

const DEFAULT_TASK = {
  bizNo: 'HC-2026-0418',
  plateNo: '粤B58888F',
  customerName: '嘉兴某某物流有限公司',
  projectName: '嘉兴腾4.5T租赁',
  pendingSettle: '927.50',
  depositAmount: '5000.00',
  refundTotal: '4072.50',
  payTotal: '0.00',
  actualRent: '0.00',
};

const Component = function ReturnSettlementApproveStandalone() {
  const task = window.__returnSettlementTask || DEFAULT_TASK;

  const handleBack = () => {
    if (window.__returnSettlementBack) window.__returnSettlementBack();
    else message.info('返回审批中心（原型）');
  };

  return (
    <div className="hc-mini-root">
      <style>{`
.hc-mini-root { min-height:100dvh; background:linear-gradient(165deg,#e8ebef 0%,${COLOR_PAGE} 40%); display:flex; justify-content:center; padding:16px 12px 32px; font-family:${FONT_FAMILY}; }
.hc-phone { width:100%; max-width:390px; min-height:844px; background:${COLOR_PAGE}; border-radius:28px; overflow:hidden; box-shadow:0 24px 48px rgba(15,23,42,.14); display:flex; flex-direction:column; position:relative; }
.hc-chrome { background:${COLOR_BG}; border-bottom:1px solid rgba(0,0,0,.05); padding:44px 8px 0; }
.hc-nav { height:48px; display:flex; align-items:center; position:relative; }
.hc-nav-title { flex:1; text-align:center; font-size:17px; font-weight:700; }
.hc-back { width:40px; height:40px; border:none; background:transparent; cursor:pointer; }
.hc-tip { padding:24px; text-align:center; color:${COLOR_MUTED}; font-size:14px; line-height:1.6; }
      `}</style>
      <div className="hc-phone">
        <div className="hc-chrome">
          <div className="hc-nav">
            <button type="button" className="hc-back" onClick={handleBack} aria-label="返回">←</button>
            <div className="hc-nav-title">还车应结款审批</div>
            <span style={{ width: 40 }} />
          </div>
        </div>
        <div className="hc-tip">
          完整还车应结款审批页（含结算明细、费用分组、审批操作）已内嵌于
          <strong> 审批中心.jsx </strong>
          ，请从「我的待办 → 还车应结款 HC-2026-0418 → 去审批」进入体验。
          <br /><br />
          待结算总额：<strong style={{ color: '#8B5CF6' }}>{formatMoney(task.pendingSettle)}</strong>
          <br />
          {task.plateNo} · {task.customerName}
        </div>
      </div>
    </div>
  );
};

if (typeof window !== 'undefined') window.Component = Component;
export default Component;