// TTG Petty Cash — Main App
const {
  React, useState, useEffect, useMemo, useRef, useCallback,
  USERS, SEED_REQUESTS, ROLE_META, Icon,
  Sidebar, Topbar, Toast, Dashboard, RequestList,
  NewRequestForm, NewClearingForm, DetailDrawer,
  TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakToggle, TweakColor,
} = window;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "density": "comfortable",
  "navStyle": "side",
  "accent": "#F37124",
  "showTips": true
}/*EDITMODE-END*/;

const ACCENTS = {
  '#F37124': { soft: '#FDE4D2', name: 'Orange' },
  '#BEB081': { soft: '#EFEADA', name: 'Gold' },
  '#364C9C': { soft: '#E1E6F3', name: 'Blue' },
};
const ACCENT_OPTIONS = ['#F37124', '#BEB081', '#364C9C'];

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply accent
  useEffect(() => {
    const a = ACCENTS[t.accent] || ACCENTS['#F37124'];
    document.documentElement.style.setProperty('--orange', t.accent);
    document.documentElement.style.setProperty('--orange-soft', a.soft);
    document.documentElement.setAttribute('data-density', t.density);
  }, [t.accent, t.density]);

  const [user, setUser] = useState(USERS.staff);
  const [records, setRecords] = useState(SEED_REQUESTS);
  const [route, setRoute] = useState('dashboard');
  const [drawer, setDrawer] = useState(null); // record
  const [clearingFor, setClearingFor] = useState(null);
  const [search, setSearch] = useState('');
  const [filter, setFilter] = useState({ status: 'all' });
  const [toast, setToast] = useState(null);

  // when role changes, snap route to a sensible default
  useEffect(() => {
    if (user.role === 'staff' && ['approvals','disburse','reconcile'].includes(route)) setRoute('dashboard');
    if (user.role !== 'finance' && ['disburse','reconcile'].includes(route)) setRoute('dashboard');
  }, [user]);

  // counts for sidebar
  const counts = useMemo(() => {
    const c = { mine: 0, toClear: 0, approvals: 0, disburse: 0, reconcile: 0 };
    records.forEach(r => {
      if (r.requester.id === user.id && r.status !== 'cleared' && r.status !== 'rejected') c.mine++;
      if (r.requester.id === user.id && (r.status === 'paid' || r.status === 'clearing')) c.toClear++;
      if (user.role === 'manager' && r.status === 'pending_mgr') c.approvals++;
      if (user.role === 'director' && r.status === 'pending_dir') c.approvals++;
      if (user.role === 'finance' && r.status === 'pending_fin') c.approvals++;
      if (user.role === 'finance' && (r.status === 'pending_fin' || r.status === 'approved')) c.disburse++;
      if (user.role === 'finance' && r.status === 'clearing') c.reconcile++;
    });
    return c;
  }, [records, user]);

  // ROUTE TITLES
  const titleByRoute = {
    'dashboard': { t: 'หน้าหลัก', c: '' },
    'my-requests': { t: 'คำขอของฉัน', c: '' },
    'new-request': { t: 'สร้างคำขอเบิก', c: <><a>คำขอของฉัน</a> / <b>สร้างใหม่</b></> },
    'clearing': { t: 'รอเคลียร์', c: '' },
    'all-requests': { t: 'รายการทั้งหมด', c: '' },
    'approvals': { t: 'งานรออนุมัติ', c: '' },
    'disburse': { t: 'รอจ่ายเงิน', c: '' },
    'reconcile': { t: 'รอตรวจเคลียร์', c: '' },
    'reports': { t: 'รายงาน', c: '' },
    'new-clearing': { t: 'เคลียร์เงินทดรองจ่าย', c: '' },
  };

  // ============ ACTIONS ============
  const submitRequest = (formData) => {
    const newId = 'PCR-2026-' + String(Math.floor(Math.random()*900) + 500).padStart(4,'0');
    const rec = {
      ...formData,
      id: newId,
      type: 'request',
      requester: user,
      submittedAt: new Date().toISOString(),
      timeline: formData.status === 'draft' ? [] : [{ type: 'submit', who: user, at: new Date().toISOString() }],
    };
    setRecords([rec, ...records]);
    setRoute('my-requests');
    setToast(formData.status === 'draft' ? `บันทึกฉบับร่าง ${newId}` : `ส่งคำขอ ${newId} เรียบร้อย รอผู้จัดการฝ่ายอนุมัติ`);
  };

  const handleAction = (record, action, note='') => {
    const now = new Date().toISOString();
    setRecords(rs => rs.map(r => {
      if (r.id !== record.id) return r;
      const tl = (r.timeline || []).slice();
      if (action === 'approve') {
        let nextStatus;
        if (r.status === 'pending_mgr') nextStatus = 'pending_dir';
        else if (r.status === 'pending_dir') nextStatus = 'pending_fin';
        else if (r.status === 'pending_fin') nextStatus = 'approved';
        tl.push({ type: 'approve', who: user, role: user.role, at: now, note });
        return { ...r, status: nextStatus, timeline: tl };
      } else if (action === 'reject') {
        tl.push({ type: 'reject', who: user, role: user.role, at: now, note });
        return { ...r, status: 'rejected', timeline: tl };
      } else if (action === 'pay') {
        tl.push({ type: 'paid', who: user, at: now, note: 'จ่ายเงินเรียบร้อย' });
        return { ...r, status: 'clearing', paidAt: now, paidAmount: r.items.reduce((a,b)=>a+Number(b.amount||0),0), timeline: tl };
      } else if (action === 'close-clearing') {
        tl.push({ type: 'close', who: user, at: now, note });
        return { ...r, status: 'cleared', clearedAt: now, timeline: tl };
      }
      return r;
    }));
    const msg = {
      approve: 'อนุมัติเรียบร้อย',
      reject: 'ปฏิเสธคำขอแล้ว',
      pay: `จ่ายเงิน ${record.id} เรียบร้อย`,
      'close-clearing': 'ปิดงวดเคลียร์เรียบร้อย',
    }[action];
    setToast(msg);
    setDrawer(null);
  };

  const submitClearing = (clearData) => {
    setRecords(rs => rs.map(r => {
      if (r.id !== clearingFor.id) return r;
      const tl = (r.timeline||[]).slice();
      tl.push({ type: 'clear', who: user, at: new Date().toISOString() });
      return {
        ...r,
        status: 'clearing',
        items: clearData.items.map(it => ({ desc: it.desc, amount: it.amount, actual: it.actual })),
        actualTotal: clearData.actual,
        timeline: tl,
      };
    }));
    setClearingFor(null);
    setRoute('my-requests');
    setToast(`ส่งใบเคลียร์ ${clearingFor.id} เรียบร้อย รอการเงินตรวจสอบ`);
  };

  // ============ RENDER ============
  let screen;
  if (clearingFor) {
    screen = <NewClearingForm user={user} record={clearingFor} onSubmit={submitClearing} onCancel={() => setClearingFor(null)}/>;
  } else if (route === 'dashboard') {
    screen = <Dashboard records={records} user={user} onNavigate={setRoute} onOpen={setDrawer}/>;
  } else if (route === 'new-request') {
    screen = <NewRequestForm user={user} onSubmit={submitRequest} onCancel={() => setRoute('dashboard')}/>;
  } else if (['my-requests','all-requests','approvals','disburse','reconcile','clearing'].includes(route)) {
    const viewMap = { 'my-requests': 'my', 'all-requests': 'all', 'approvals': 'approvals', 'disburse': 'disburse', 'reconcile': 'reconcile', 'clearing': 'clearing' };
    screen = <RequestList
      records={records}
      user={user}
      view={viewMap[route]}
      onOpen={setDrawer}
      onNavigate={setRoute}
      filter={filter}
      setFilter={setFilter}
      onAction={handleAction}
    />;
  } else if (route === 'reports') {
    screen = <ReportsScreen records={records}/>;
  } else {
    screen = <Dashboard records={records} user={user} onNavigate={setRoute} onOpen={setDrawer}/>;
  }

  const titleInfo = titleByRoute[route] || { t: 'หน้าหลัก', c: '' };

  return (
    <div className="app" data-nav={t.navStyle}>
      <Sidebar
        active={route}
        onNavigate={setRoute}
        user={user}
        counts={counts}
        layout={t.navStyle}
      />
      <main className="main">
        <Topbar
          title={titleInfo.t}
          crumb={titleInfo.c}
          search={search}
          setSearch={(v) => { setSearch(v); setFilter({...filter, search: v}); }}
          user={user}
          onSwitchRole={(r) => setUser(USERS[r])}
          onNavigate={setRoute}
          active={route}
        />
        <div className="content">
          {screen}
        </div>
      </main>

      {drawer && (
        <DetailDrawer
          record={records.find(r => r.id === drawer.id) || drawer}
          user={user}
          onClose={() => setDrawer(null)}
          onAction={handleAction}
          onClear={(r) => { setDrawer(null); setClearingFor(r); }}
        />
      )}

      <Toast msg={toast} onClose={() => setToast(null)}/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Layout">
          <TweakRadio
            label="Navigation"
            value={t.navStyle}
            options={[{value:'side',label:'Sidebar'},{value:'top',label:'Topbar'}]}
            onChange={v => setTweak('navStyle', v)}
          />
          <TweakRadio
            label="Density"
            value={t.density}
            options={[{value:'comfortable',label:'Comfort'},{value:'compact',label:'Compact'}]}
            onChange={v => setTweak('density', v)}
          />
        </TweakSection>
        <TweakSection label="Brand">
          <TweakColor
            label="Accent"
            value={t.accent}
            options={ACCENT_OPTIONS}
            onChange={v => setTweak('accent', v)}
          />
        </TweakSection>
        <TweakSection label="Display">
          <TweakToggle label="Show dashboard tips" value={t.showTips} onChange={v => setTweak('showTips', v)}/>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

// ====== Simple Reports screen ======
function ReportsScreen({ records }) {
  return (
    <div>
      <div className="content__head">
        <div>
          <h1>รายงาน</h1>
          <p>ภาพรวมการเบิกและเคลียร์เงินทดรองจ่าย ระดับองค์กร</p>
        </div>
        <div className="content__head__actions">
          <button className="btn btn--ghost"><Icon name="calendar" size={15}/> เดือนพฤษภาคม 2569</button>
          <button className="btn btn--ghost"><Icon name="download" size={15}/> ส่งออก PDF</button>
        </div>
      </div>

      <div className="stat-grid">
        {[
          { label: 'ยอดเบิกรวม', value: '1,847,200', sub: 'บาท', icon: 'money', color: 'navy' },
          { label: 'ยอดจ่ายจริง', value: '1,612,750', sub: 'บาท', icon: 'wallet', color: 'gold' },
          { label: 'ยอดส่งคืน', value: '234,450', sub: 'บาท', icon: 'arrowDown', color: 'ok' },
          { label: 'รายการทั้งหมด', value: 47, sub: 'รายการ', icon: 'fileText', color: 'orange' },
        ].map((s, i) => (
          <div className="stat" key={i}>
            <div className="stat__bar" style={{background: ({navy:'var(--navy)',orange:'var(--orange)',gold:'var(--gold)',ok:'var(--ok)'})[s.color]}}/>
            <div className="stat__label">
              <div className="stat__icon" style={{background: ({navy:'var(--info-soft)',orange:'var(--orange-soft)',gold:'var(--gold-soft)',ok:'var(--ok-soft)'})[s.color], color: ({navy:'var(--navy)',orange:'var(--orange)',gold:'#806A2B',ok:'var(--ok)'})[s.color]}}>
                <Icon name={s.icon} size={16}/>
              </div>
              <span>{s.label}</span>
            </div>
            <div className="stat__value">{s.value}<small>{s.sub}</small></div>
          </div>
        ))}
      </div>

      <div className="split">
        <div className="card">
          <div className="card__head"><h3>การเบิกตามฝ่าย</h3></div>
          <div className="card__body" style={{padding: 20}}>
            <DeptChart/>
          </div>
        </div>
        <div className="card">
          <div className="card__head"><h3>แนวโน้ม 6 เดือน</h3></div>
          <div className="card__body" style={{padding: 20}}>
            <TrendChart/>
          </div>
        </div>
      </div>
    </div>
  );
}

function DeptChart() {
  const data = [
    { k: 'การตลาดและสื่อสาร', v: 487200 },
    { k: 'ปฏิบัติการ', v: 412000 },
    { k: 'ฝ่ายขาย', v: 358900 },
    { k: 'พัฒนาผลิตภัณฑ์', v: 248700 },
    { k: 'เทคโนโลยีสารสนเทศ', v: 192100 },
    { k: 'ทรัพยากรบุคคล', v: 148300 },
  ];
  const max = Math.max(...data.map(d=>d.v));
  return (
    <div style={{display: 'flex', flexDirection: 'column', gap: 14}}>
      {data.map(d => (
        <div key={d.k}>
          <div style={{display: 'flex', justifyContent: 'space-between', fontSize: 12.5, marginBottom: 5}}>
            <span style={{fontWeight: 500}}>{d.k}</span>
            <span style={{fontWeight: 600, fontVariantNumeric: 'tabular-nums', color: 'var(--text-muted)'}}>฿{d.v.toLocaleString()}</span>
          </div>
          <div style={{height: 8, background: 'var(--silver-10)', borderRadius: 999, overflow: 'hidden'}}>
            <div style={{height: '100%', width: `${(d.v/max)*100}%`, background: 'linear-gradient(90deg, var(--navy) 0%, var(--navy-2) 100%)', borderRadius: 999}}/>
          </div>
        </div>
      ))}
    </div>
  );
}

function TrendChart() {
  const data = [
    { m: 'ธ.ค.', v: 980 },
    { m: 'ม.ค.', v: 1280 },
    { m: 'ก.พ.', v: 1120 },
    { m: 'มี.ค.', v: 1480 },
    { m: 'เม.ย.', v: 1612 },
    { m: 'พ.ค.', v: 1847 },
  ];
  const max = Math.max(...data.map(d=>d.v)) * 1.15;
  const w = 100, h = 60;
  const pts = data.map((d, i) => `${(i/(data.length-1))*w},${h - (d.v/max)*h}`);
  return (
    <div>
      <svg viewBox={`-2 -2 ${w+4} ${h+4}`} style={{width: '100%', height: 180, overflow: 'visible'}} preserveAspectRatio="none">
        <defs>
          <linearGradient id="g" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#F37124" stopOpacity="0.3"/>
            <stop offset="100%" stopColor="#F37124" stopOpacity="0"/>
          </linearGradient>
        </defs>
        <polygon points={`0,${h} ${pts.join(' ')} ${w},${h}`} fill="url(#g)"/>
        <polyline points={pts.join(' ')} fill="none" stroke="var(--orange)" strokeWidth="1.4" strokeLinejoin="round"/>
        {data.map((d, i) => (
          <circle key={i} cx={(i/(data.length-1))*w} cy={h - (d.v/max)*h} r="1.6" fill="white" stroke="var(--orange)" strokeWidth="1"/>
        ))}
      </svg>
      <div style={{display: 'flex', justifyContent: 'space-between', marginTop: 8, fontSize: 11, color: 'var(--text-muted)'}}>
        {data.map(d => <div key={d.m} style={{textAlign: 'center'}}>
          <div style={{fontWeight: 600, color: 'var(--text)', fontSize: 12}}>฿{d.v}K</div>
          <div>{d.m}</div>
        </div>)}
      </div>
    </div>
  );
}

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