/**
 * 费率管理页面 — 地域费率套维护（与评估引擎对齐）。
 *
 * 专业设计：
 * - 以「地域费率套」为单位维护（一套 = 五险单位费率 + 公积金 + 增值税 + 附加税）
 * - 展示引擎内置默认费率（全国/上海/北京/广东）作为对照基准
 * - 与默认对比：偏离默认值的项高亮
 * - 复核流程：编辑即重置待复核，复核后驱动评估盈利测算
 * - 实时显示社保单位合计、用工成本加载估算
 */
import { useCallback, useEffect, useMemo, useState } from 'react';
import { colorVar, FONT_FAMILY, RADIUS, space, typographyStyle } from '../design-system/components/styles.js';
import { Card, Icon } from '../design-system/index.js';
import {
  fetchEngineDefaults,
  fetchRegionRates,
  saveRegionRate,
  reviewRegionRate,
  deleteRegionRate,
  fetchMinWages,
  saveMinWage,
  deleteMinWageApi,
  type RegionRates,
  type RegionRateRecord,
  type MinWageItem,
} from '../api/client.js';
import { useAuthStore } from '../stores/authStore.js';

/** 费率项定义（路径 + 标签 + 分组 + 单位/个人说明）。 */
const RATE_FIELDS: ReadonlyArray<{ path: string; label: string; group: string; hint?: string }> = [
  { path: 'socialInsurance.pension', label: '养老保险（单位）', group: '社会保险（单位部分）', hint: '通常 14%~16%' },
  { path: 'socialInsurance.medical', label: '医疗保险（单位）', group: '社会保险（单位部分）', hint: '通常 4.5%~10%' },
  { path: 'socialInsurance.unemployment', label: '失业保险（单位）', group: '社会保险（单位部分）', hint: '通常 0.5%~0.8%' },
  { path: 'socialInsurance.injury', label: '工伤保险（单位）', group: '社会保险（单位部分）', hint: '按行业风险 0.16%~1.9%' },
  { path: 'socialInsurance.maternity', label: '生育保险（单位）', group: '社会保险（单位部分）', hint: '与医疗并轨地区填 0' },
  { path: 'housingFund', label: '住房公积金（单位）', group: '公积金', hint: '5%~12%，按属地' },
  { path: 'vatGeneralRate', label: '增值税（一般计税）', group: '税率', hint: '现代服务业 6%' },
  { path: 'vatSimplifiedRate', label: '增值税（简易/差额）', group: '税率', hint: '劳务派遣差额 5%' },
  { path: 'surchargeRate', label: '附加税费（占增值税）', group: '税率', hint: '城建+教育附加，约 12%' },
];

const REGIONS = ['全国默认', '上海', '北京', '广东', '深圳', '江苏', '浙江', '河北', '四川', '重庆', '湖北', '天津'];

function getPath(obj: RegionRates, path: string): number {
  const parts = path.split('.');
  let cur: unknown = obj;
  for (const p of parts) cur = (cur as Record<string, unknown>)?.[p];
  return typeof cur === 'number' ? cur : 0;
}

function setPath(obj: RegionRates, path: string, value: number): RegionRates {
  const clone: RegionRates = JSON.parse(JSON.stringify(obj));
  const parts = path.split('.');
  let cur: Record<string, unknown> = clone as unknown as Record<string, unknown>;
  for (let i = 0; i < parts.length - 1; i += 1) cur = cur[parts[i]!] as Record<string, unknown>;
  cur[parts[parts.length - 1]!] = value;
  return clone;
}

function emptyRates(regionName: string): RegionRates {
  return {
    regionName,
    socialInsurance: { pension: 0, medical: 0, unemployment: 0, injury: 0, maternity: 0 },
    housingFund: 0, vatGeneralRate: 0.06, vatSimplifiedRate: 0.05, surchargeRate: 0.12,
  };
}

function socialTotal(r: RegionRates): number {
  const s = r.socialInsurance;
  return s.pension + s.medical + s.unemployment + s.injury + s.maternity;
}

/** 全成本加载系数估算（应发=1，加社保+公积金）。 */
function loadingFactor(r: RegionRates): number {
  return 1 + socialTotal(r) + r.housingFund;
}

export function RateManagement(): JSX.Element {
  const { user } = useAuthStore();
  const [defaults, setDefaults] = useState<{ national: RegionRates; regions: Record<string, RegionRates> } | null>(null);
  const [records, setRecords] = useState<RegionRateRecord[]>([]);
  const [loading, setLoading] = useState(true);
  const [editRegion, setEditRegion] = useState('');
  const [editRates, setEditRates] = useState<RegionRates | null>(null);

  const load = useCallback(() => {
    setLoading(true);
    Promise.all([fetchEngineDefaults(), fetchRegionRates()])
      .then(([d, r]) => { setDefaults(d); setRecords(r); })
      .finally(() => setLoading(false));
  }, []);

  useEffect(() => { load(); }, [load]);

  // 当前编辑地域的"引擎默认"基准（用于对比高亮）
  const baseline = useMemo<RegionRates | null>(() => {
    if (defaults === null || editRegion === '') return null;
    const key = ['上海', '北京', '广东'].find((k) => editRegion.includes(k));
    return key ? (defaults.regions[key] ?? defaults.national) : defaults.national;
  }, [defaults, editRegion]);

  function startEdit(region: string): void {
    const existing = records.find((r) => r.region === region);
    if (existing) {
      setEditRates(existing.rates);
    } else {
      // 以引擎默认为初始值
      const key = ['上海', '北京', '广东'].find((k) => region.includes(k));
      const init = defaults ? (key ? (defaults.regions[key] ?? defaults.national) : defaults.national) : emptyRates(region);
      setEditRates({ ...JSON.parse(JSON.stringify(init)), regionName: region });
    }
    setEditRegion(region);
  }

  async function handleSave(): Promise<void> {
    if (editRates === null || editRegion === '') return;
    await saveRegionRate(editRegion, { ...editRates, regionName: editRegion }, user?.username);
    setEditRegion('');
    setEditRates(null);
    load();
  }

  const inputStyle: React.CSSProperties = {
    padding: `${space(1)}px ${space(2)}px`,
    border: `1px solid ${colorVar('color.border.default')}`,
    borderRadius: `${RADIUS.sm}px`,
    fontFamily: FONT_FAMILY, ...typographyStyle('body'),
    backgroundColor: colorVar('color.bg.canvas'), color: colorVar('color.text.primary'),
    width: 90, textAlign: 'right',
  };

  const groups = [...new Set(RATE_FIELDS.map((f) => f.group))];

  return (
    <div style={{ fontFamily: FONT_FAMILY, maxWidth: 1200, margin: '0 auto' }}>
      <div style={{ marginBottom: `${space(4)}px` }}>
        <h1 style={{ ...typographyStyle('heading'), color: colorVar('color.text.primary'), margin: 0 }}>费率管理</h1>
        <p style={{ ...typographyStyle('caption'), color: colorVar('color.text.secondary'), margin: `${space(1)}px 0 0` }}>
          以「地域费率套」维护社保、公积金与税率，与评估引擎对齐。维护并<strong>复核</strong>后，该地域评估将自动采用此费率（覆盖引擎内置默认）。所有费率为行业近似值，须经财务复核。
        </p>
      </div>

      {loading ? <p style={{ color: colorVar('color.text.secondary') }}>加载中…</p> : (
        <>
          {/* 最低工资标准（驱动"低于最低工资"红线） */}
          <div style={{ marginBottom: `${space(4)}px` }}>
            <MinWagePanel />
          </div>

          {/* 已维护的地域费率套 */}
          <Card title={`已维护地域费率套（${records.length}）`}>
            {records.length === 0 ? (
              <p style={{ ...typographyStyle('caption'), color: colorVar('color.text.secondary') }}>
                尚未维护任何地域费率套。系统当前使用引擎内置默认费率。点击下方地域按钮开始维护。
              </p>
            ) : (
              <div style={{ overflowX: 'auto' }}>
                <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                  <thead><tr>
                    {['地域', '社保单位合计', '公积金', '增值税(一般)', '附加税', '加载系数', '复核状态', '更新', '操作'].map((h) => (
                      <th key={h} style={{ textAlign: 'left', padding: `${space(2)}px`, borderBottom: `2px solid ${colorVar('color.border.default')}`, color: colorVar('color.text.secondary'), ...typographyStyle('caption'), fontWeight: 700 }}>{h}</th>
                    ))}
                  </tr></thead>
                  <tbody>
                    {records.map((rec) => (
                      <tr key={rec.region}>
                        <td style={tdStyle}>{rec.region}</td>
                        <td style={tdStyle}>{(socialTotal(rec.rates) * 100).toFixed(2)}%</td>
                        <td style={tdStyle}>{(rec.rates.housingFund * 100).toFixed(1)}%</td>
                        <td style={tdStyle}>{(rec.rates.vatGeneralRate * 100).toFixed(1)}%</td>
                        <td style={tdStyle}>{(rec.rates.surchargeRate * 100).toFixed(0)}%</td>
                        <td style={{ ...tdStyle, fontWeight: 700, color: colorVar('color.brand.primary') }}>{loadingFactor(rec.rates).toFixed(3)}×</td>
                        <td style={tdStyle}>{rec.reviewed ? <span style={{ color: '#15803D', fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 4 }}><Icon name="check-circle" size={14} /> 已生效</span> : <span style={{ color: '#B45309', display: 'inline-flex', alignItems: 'center', gap: 4 }}><Icon name="clock" size={14} /> 待复核</span>}</td>
                        <td style={{ ...tdStyle, ...typographyStyle('caption'), color: colorVar('color.text.secondary') }}>{rec.updatedBy ?? '—'}</td>
                        <td style={tdStyle}>
                          <div style={{ display: 'flex', gap: `${space(2)}px` }}>
                            <button onClick={() => startEdit(rec.region)} style={linkBtn(colorVar('color.brand.primary'))}>编辑</button>
                            {!rec.reviewed && <button onClick={() => reviewRegionRate(rec.region).then(load)} style={linkBtn('#15803D')}>复核生效</button>}
                            <button onClick={() => deleteRegionRate(rec.region).then(load)} style={linkBtn(colorVar('color.risk.critical'))}>删除</button>
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
            <div style={{ marginTop: `${space(3)}px`, display: 'flex', gap: `${space(2)}px`, flexWrap: 'wrap', alignItems: 'center' }}>
              <span style={{ ...typographyStyle('caption'), color: colorVar('color.text.secondary') }}>新增/维护地域：</span>
              {REGIONS.filter((r) => !records.some((rec) => rec.region === r)).map((r) => (
                <button key={r} onClick={() => startEdit(r)} style={{ padding: `${space(1)}px ${space(3)}px`, borderRadius: `${RADIUS.md}px`, border: `1px dashed ${colorVar('color.brand.primary')}`, background: 'transparent', color: colorVar('color.brand.primary'), cursor: 'pointer', ...typographyStyle('caption') }}>+ {r}</button>
              ))}
            </div>
          </Card>

          {/* 编辑表单 */}
          {editRates !== null && (
            <div style={{ marginTop: `${space(4)}px` }}>
              <Card title={`维护「${editRegion}」费率套`}>
                <p style={{ ...typographyStyle('caption'), color: colorVar('color.text.secondary'), margin: `0 0 ${space(3)}px` }}>
                  填写各项费率（小数，如 0.16 表示 16%）。<span style={{ color: '#B45309' }}>橙色</span>表示偏离引擎默认值。保存后需复核方生效。
                </p>
                {groups.map((g) => (
                  <div key={g} style={{ marginBottom: `${space(3)}px` }}>
                    <div style={{ ...typographyStyle('caption'), fontWeight: 700, color: colorVar('color.text.secondary'), marginBottom: `${space(1)}px` }}>{g}</div>
                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: `${space(2)}px` }}>
                      {RATE_FIELDS.filter((f) => f.group === g).map((f) => {
                        const val = getPath(editRates, f.path);
                        const baseVal = baseline ? getPath(baseline, f.path) : val;
                        const deviated = Math.abs(val - baseVal) > 1e-6;
                        return (
                          <div key={f.path} style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
                            <label style={{ ...typographyStyle('caption'), color: colorVar('color.text.primary') }}>{f.label}</label>
                            <div style={{ display: 'flex', alignItems: 'center', gap: `${space(1)}px` }}>
                              <input
                                style={{ ...inputStyle, borderColor: deviated ? '#B45309' : colorVar('color.border.default'), color: deviated ? '#B45309' : colorVar('color.text.primary'), fontWeight: deviated ? 700 : 400 }}
                                value={val}
                                onChange={(e) => setEditRates((r) => r ? setPath(r, f.path, Number(e.target.value) || 0) : r)}
                                inputMode="decimal"
                              />
                              <span style={{ ...typographyStyle('caption'), color: colorVar('color.text.secondary') }}>{(val * 100).toFixed(2)}%</span>
                            </div>
                            <span style={{ ...typographyStyle('caption'), color: colorVar('color.text.secondary'), fontSize: '11px' }}>
                              {f.hint}{deviated ? ` · 默认 ${(baseVal * 100).toFixed(2)}%` : ''}
                            </span>
                          </div>
                        );
                      })}
                    </div>
                  </div>
                ))}
                {/* 汇总 */}
                <div style={{ display: 'flex', gap: `${space(4)}px`, padding: `${space(3)}px`, backgroundColor: colorVar('color.bg.surface'), borderRadius: `${RADIUS.md}px`, marginBottom: `${space(3)}px`, flexWrap: 'wrap' }}>
                  <Summary label="社保单位合计" value={`${(socialTotal(editRates) * 100).toFixed(2)}%`} />
                  <Summary label="公积金" value={`${(editRates.housingFund * 100).toFixed(1)}%`} />
                  <Summary label="全成本加载系数" value={`${loadingFactor(editRates).toFixed(3)}×`} highlight />
                  <Summary label="说明" value="加载系数 = 1 + 社保 + 公积金（不含福利/摊销）" small />
                </div>
                <div style={{ display: 'flex', gap: `${space(2)}px` }}>
                  <button onClick={handleSave} style={{ padding: `${space(2)}px ${space(5)}px`, borderRadius: `${RADIUS.md}px`, border: 'none', backgroundColor: colorVar('color.brand.primary'), color: '#fff', cursor: 'pointer', fontWeight: 600 }}>保存（待复核）</button>
                  <button onClick={() => { setEditRegion(''); setEditRates(null); }} style={{ padding: `${space(2)}px ${space(4)}px`, borderRadius: `${RADIUS.md}px`, border: `1px solid ${colorVar('color.border.default')}`, background: 'transparent', cursor: 'pointer' }}>取消</button>
                </div>
              </Card>
            </div>
          )}

          {/* 引擎内置默认费率（只读对照） */}
          {defaults !== null && (
            <div style={{ marginTop: `${space(4)}px` }}>
              <Card title="引擎内置默认费率（只读对照基准）">
                <p style={{ ...typographyStyle('caption'), color: colorVar('color.text.secondary'), margin: `0 0 ${space(2)}px` }}>
                  未维护费率套的地域评估时采用以下默认值。
                </p>
                <div style={{ overflowX: 'auto' }}>
                  <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                    <thead><tr>
                      {['地域', '养老', '医疗', '失业', '工伤', '生育', '公积金', '增值税', '附加税', '加载系数'].map((h) => (
                        <th key={h} style={{ textAlign: 'left', padding: `${space(1)}px ${space(2)}px`, borderBottom: `1px solid ${colorVar('color.border.default')}`, color: colorVar('color.text.secondary'), ...typographyStyle('caption'), fontWeight: 700 }}>{h}</th>
                      ))}
                    </tr></thead>
                    <tbody>
                      {[defaults.national, ...Object.values(defaults.regions).filter((r) => r.regionName !== '全国（默认）')].map((r) => (
                        <tr key={r.regionName}>
                          <td style={defTd}>{r.regionName}</td>
                          <td style={defTd}>{(r.socialInsurance.pension * 100).toFixed(1)}%</td>
                          <td style={defTd}>{(r.socialInsurance.medical * 100).toFixed(1)}%</td>
                          <td style={defTd}>{(r.socialInsurance.unemployment * 100).toFixed(2)}%</td>
                          <td style={defTd}>{(r.socialInsurance.injury * 100).toFixed(2)}%</td>
                          <td style={defTd}>{(r.socialInsurance.maternity * 100).toFixed(2)}%</td>
                          <td style={defTd}>{(r.housingFund * 100).toFixed(1)}%</td>
                          <td style={defTd}>{(r.vatGeneralRate * 100).toFixed(1)}%</td>
                          <td style={defTd}>{(r.surchargeRate * 100).toFixed(0)}%</td>
                          <td style={{ ...defTd, fontWeight: 700, color: colorVar('color.brand.primary') }}>{loadingFactor(r).toFixed(3)}×</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </Card>
            </div>
          )}
        </>
      )}
    </div>
  );
}

const tdStyle: React.CSSProperties = { padding: `${space(2)}px`, borderBottom: '1px solid var(--color-border-default)', fontSize: '14px' };
const defTd: React.CSSProperties = { padding: `${space(1)}px ${space(2)}px`, borderBottom: '1px solid var(--color-border-default)', fontSize: '13px', whiteSpace: 'nowrap' };

function linkBtn(color: string): React.CSSProperties {
  return { cursor: 'pointer', border: 'none', background: 'none', color, fontWeight: 600, fontSize: '12px' };
}

function Summary({ label, value, highlight, small }: { label: string; value: string; highlight?: boolean; small?: boolean }): JSX.Element {
  return (
    <div>
      <div style={{ ...typographyStyle('caption'), color: colorVar('color.text.secondary') }}>{label}</div>
      <div style={{ ...(small ? typographyStyle('caption') : typographyStyle('title')), fontWeight: small ? 400 : 700, color: highlight ? colorVar('color.brand.primary') : colorVar('color.text.primary'), marginTop: 2 }}>{value}</div>
    </div>
  );
}

/** 最低工资标准维护面板：驱动"低于最低工资"红线自动比对。 */
function MinWagePanel(): JSX.Element {
  const [items, setItems] = useState<MinWageItem[]>([]);
  const [region, setRegion] = useState('');
  const [wage, setWage] = useState('');

  const reload = useCallback(() => {
    fetchMinWages().then(setItems).catch(() => setItems([]));
  }, []);
  useEffect(() => { reload(); }, [reload]);

  const inputStyle: React.CSSProperties = {
    padding: `${space(1)}px ${space(2)}px`, border: `1px solid ${colorVar('color.border.default')}`,
    borderRadius: `${RADIUS.md}px`, fontFamily: FONT_FAMILY, ...typographyStyle('caption'),
    backgroundColor: colorVar('color.bg.canvas'), color: colorVar('color.text.primary'),
  };

  async function handleSave(): Promise<void> {
    const w = Number(wage);
    if (region.trim() === '' || !Number.isFinite(w) || w <= 0) return;
    await saveMinWage(region.trim(), w);
    setRegion(''); setWage('');
    reload();
  }

  return (
    <Card title={`各地域最低工资标准（${items.length}）`}>
      <p style={{ ...typographyStyle('caption'), color: colorVar('color.text.secondary'), margin: `0 0 ${space(2)}px` }}>
        评估时按岗位应发工资与所在地域最低工资比对，低于标准的岗位数将驱动「低于最低工资」红线。近似默认值须经 HR/财务按当地官方标准复核。
      </p>
      <div style={{ display: 'flex', gap: `${space(2)}px`, flexWrap: 'wrap', alignItems: 'center', marginBottom: `${space(2)}px` }}>
        <input style={{ ...inputStyle, width: 120 }} value={region} onChange={(e) => setRegion(e.target.value)} placeholder="地域(如 北京)" />
        <input style={{ ...inputStyle, width: 140 }} value={wage} onChange={(e) => setWage(e.target.value)} placeholder="月最低工资(元)" inputMode="decimal" />
        <button type="button" onClick={handleSave} style={{ padding: `${space(1)}px ${space(3)}px`, borderRadius: `${RADIUS.md}px`, border: 'none', backgroundColor: colorVar('color.brand.primary'), color: '#fff', cursor: 'pointer', fontWeight: 600 }}>保存/更新</button>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: `${space(2)}px` }}>
        {items.map((m) => (
          <div key={m.region} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: `${space(1)}px ${space(2)}px`, border: `1px solid ${colorVar('color.border.default')}`, borderRadius: `${RADIUS.md}px`, ...typographyStyle('caption') }}>
            <span style={{ color: colorVar('color.text.primary') }}>{m.region}</span>
            <div style={{ display: 'flex', gap: `${space(2)}px`, alignItems: 'center' }}>
              <span style={{ fontWeight: 700 }}>{m.monthlyWage.toLocaleString('zh-CN')} 元</span>
              <button type="button" onClick={() => { void deleteMinWageApi(m.region).then(reload); }} style={{ display: 'inline-flex', alignItems: 'center', border: 'none', background: 'transparent', color: colorVar('color.risk.critical'), cursor: 'pointer' }} aria-label="删除"><Icon name="close" size={15} /></button>
            </div>
          </div>
        ))}
      </div>
    </Card>
  );
}