// Make Decision view (image 2)
function MakeDecisionView({ onNav }){
  const clock = useSystemClock();
  const [reqNo, setReqNo] = useState('');
  const [year, setYear]   = useState('');
  const [month, setMonth] = useState('');
  const [from, setFrom]   = useState('');
  const [to, setTo]       = useState('');
  const [sort, setSort]   = useState({ col:'date', dir:'asc' });
  const [selected, setSelected] = useState(new Set());
  const [page, setPage]   = useState(1);
  const [rowsState, setRowsState] = useState(CASHFLOW);
  const pageSize = 7;

  // Only show data once BOTH dates are selected
  const datesReady = !!from && !!to;
  const filtered = datesReady ? rowsState.filter(r => r.iso >= from && r.iso <= to) : [];
  const sorted = [...filtered].sort((a,b)=>{
    const dir = sort.dir==='asc' ? 1 : -1;
    if (sort.col==='date') return (a.iso<b.iso?-1:1)*dir;
    return (a[sort.col]-b[sort.col])*dir;
  });
  const totalPages = Math.max(1, Math.ceil(sorted.length / pageSize));
  const startIdx = (page-1)*pageSize;
  const rows = sorted.slice(startIdx, startIdx+pageSize);

  useEffect(()=>{ if (page > totalPages) setPage(1); }, [from, to, totalPages]);

  const toggle = (i) => {
    const n = new Set(selected);
    n.has(i) ? n.delete(i) : n.add(i);
    setSelected(n);
  };

  const sortBy = (c) => {
    if (sort.col===c) setSort({col:c, dir: sort.dir==='asc'?'desc':'asc'});
    else setSort({col:c, dir:'asc'});
  };
  const Arrow = ({col}) => {
    if (sort.col!==col) return <span style={{color:'#cfd5e8'}}>▲</span>;
    return <span style={{color:'#1f2a8e'}}>{sort.dir==='asc'?'▲':'▼'}</span>;
  };

  const doSearch = () => {
    if (!datesReady){ window.toast('กรุณาเลือก Start Date และ End Date ก่อน', {tone:'warn'}); return; }
    window.toast(`Found ${filtered.length} entries matching filter`, { title:'Search complete', tone:'info' });
    setPage(1);
  };
  const doReset = () => {
    setReqNo(''); setYear(''); setMonth('');
    setFrom(''); setTo('');
    setSelected(new Set()); setPage(1);
    setSort({ col:'date', dir:'asc' });
    setRowsState(CASHFLOW);
    window.toast('Filters reset · ล้างค่าทั้งหมดแล้ว');
  };
  const bulkApprove = () => {
    window.confirmDialog({
      title:`Approve ${selected.size || filtered.length} entries?`,
      message:`Selected requests will be marked as approved and moved to the locked register.`,
      tone:'primary', okLabel:'Approve',
      onOk: () => { window.toast(`${selected.size || filtered.length} requests approved`, {tone:'success', title:'Approved'}); setSelected(new Set()); }
    });
  };
  const editSelected = () => {
    const ids = [...selected];
    if (ids.length === 0) return;
    if (ids.length === 1) {
      const row = rowsState.find(r => r.iso === ids[0]);
      window.openModal({
        title:'Edit entry · '+row.date,
        size:'md',
        message: <EditEntryForm row={row} onSubmit={(updated)=>{
          setRowsState(rs => rs.map(r => r.iso===row.iso ? {...r,...updated} : r));
          window.toast('Entry updated', { tone:'success' });
        }}/>
      });
    } else {
      window.openModal({
        title:`Edit ${ids.length} entries`,
        size:'md',
        message: <p style={{margin:0,color:'var(--ink-2)'}}>Bulk edit lets you apply the same status to all selected entries.</p>,
        actions:[
          { label:'Mark as Approved', kind:'success', onClick:()=>window.toast(`${ids.length} entries approved`, {tone:'success'}) },
          { label:'Mark as Pending',  kind:'primary', onClick:()=>window.toast(`${ids.length} entries set to pending`) },
          { label:'Cancel', kind:'ghost' },
        ]
      });
    }
  };
  const deleteSelected = () => {
    if (selected.size===0) return;
    window.confirmDialog({
      title:`Delete ${selected.size} entries?`,
      message:'This action cannot be undone. Selected cash flow records will be permanently removed.',
      tone:'danger', okLabel:'Delete',
      onOk: ()=>{
        setRowsState(rs => rs.filter(r => !selected.has(r.iso)));
        window.toast(`${selected.size} entries deleted`, { tone:'danger', title:'Deleted' });
        setSelected(new Set());
      }
    });
  };

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-title">Make Decision</div>
          <div className="page-sub">Review and approve cash flow requests by period · {filtered.length} matching</div>
        </div>
        <div className="row" style={{gap:8}}>
          <button className="btn" onClick={()=>window.toast('No saved filters yet — save the current view to start')}><I.Filter size={14}/> Saved filters</button>
          <button className="btn primary" onClick={bulkApprove}><I.Check size={14}/> Bulk approve</button>
        </div>
      </div>

      <div className="pane">
        <div className="pane-bar">
          <div className="title"><span className="swatch"/> Make Decision</div>
        </div>

        <div className="pane-body">
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr auto',gap:14,alignItems:'flex-end',marginBottom:18}}>
            <div className="field">
              <label>Request No.</label>
              <div className="input-group">
                <input className="input" value={reqNo} onChange={e=>setReqNo(e.target.value)}
                       placeholder="เช่น CF-26050001"
                       onFocus={e=> e.target.placeholder = ''}
                       onBlur={e=> e.target.placeholder = 'เช่น CF-26050001'}
                       onKeyDown={e=>{ if(e.key==='Enter') doSearch(); }}/>
                <button className="btn primary" style={{padding:'0 14px'}} onClick={doSearch}><I.Search size={16}/></button>
              </div>
            </div>
            <div className="field">
              <label>Year</label>
              <select className="select" value={year} onChange={e=>setYear(e.target.value)}>
                <option value="">— Select —</option>
                {['2026','2027','2028'].map(y=><option key={y}>{y}</option>)}
              </select>
            </div>
            <div className="field">
              <label>Month</label>
              <select className="select" value={month} onChange={e=>setMonth(e.target.value)}>
                <option value="">— Select —</option>
                {['January','February','March','April','May','June','July','August','September','October','November','December'].map(m=><option key={m}>{m}</option>)}
              </select>
            </div>
            <div className="row" style={{gap:8}}>
              <button className="btn primary" onClick={doSearch}><I.Search size={14}/> Search</button>
              <button className="btn" onClick={doReset}><I.Reset size={14}/> Reset</button>
            </div>
          </div>

          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14,marginBottom:18}}>
            <div className="field">
              <label>Start Date</label>
              <div className="dateinput">
                <I.Cal size={14} stroke="#7b87a8"/>
                <input type="date" value={from} onChange={e=>setFrom(e.target.value)}/>
              </div>
            </div>
            <div className="field">
              <label>End Date</label>
              <div className="dateinput">
                <I.Cal size={14} stroke="#7b87a8"/>
                <input type="date" value={to} onChange={e=>setTo(e.target.value)}/>
              </div>
            </div>
          </div>

          <div className="row between" style={{marginBottom:12}}>
            <div className="row" style={{gap:8}}>
              <button className="btn" disabled={selected.size===0} onClick={editSelected}><I.Edit size={14}/> Edit</button>
              <button className="btn danger" disabled={selected.size===0} onClick={deleteSelected}><I.Trash size={14}/> Delete</button>
              {selected.size>0 && <span className="chip">{selected.size} selected</span>}
            </div>
            <div className="row" style={{gap:6,color:'var(--muted)',fontSize:12}}>
              <button className="icon-btn" style={{width:30,height:30}} disabled={page<=1} onClick={()=>setPage(1)}>«</button>
              <button className="icon-btn" style={{width:30,height:30}} disabled={page<=1} onClick={()=>setPage(p=>Math.max(1,p-1))}>‹</button>
              <span className="mono"><b style={{color:'var(--ink)'}}>{sorted.length===0?0:startIdx+1} to {Math.min(startIdx+pageSize,sorted.length)}</b> of {sorted.length}</span>
              <button className="icon-btn" style={{width:30,height:30}} disabled={page>=totalPages} onClick={()=>setPage(p=>Math.min(totalPages,p+1))}>›</button>
              <button className="icon-btn" style={{width:30,height:30}} disabled={page>=totalPages} onClick={()=>setPage(totalPages)}>»</button>
            </div>
          </div>

          <div className="tbl-wrap" style={{border:'1px solid var(--line)',borderRadius:14}}>
            <table className="t">
              <thead>
                <tr>
                  <th style={{width:42}}>
                    <input type="checkbox"
                      checked={rows.length>0 && rows.every(r=>selected.has(r.iso))}
                      onChange={e=>{
                        const n = new Set(selected);
                        if (e.target.checked) rows.forEach(r => n.add(r.iso));
                        else rows.forEach(r => n.delete(r.iso));
                        setSelected(n);
                      }}/>
                  </th>
                  <th onClick={()=>sortBy('date')} style={{cursor:'pointer'}}><Arrow col="date"/> Date</th>
                  <th onClick={()=>sortBy('sales')} className="num" style={{cursor:'pointer'}}><Arrow col="sales"/> Sales</th>
                  <th onClick={()=>sortBy('expense')} className="num" style={{cursor:'pointer'}}><Arrow col="expense"/> Expense</th>
                  <th className="num">Pay Cheque</th>
                  <th className="num">Pay MNI</th>
                  <th className="num">Pay JS</th>
                  <th className="num">Interest</th>
                  <th onClick={()=>sortBy('totalAmount')} className="num" style={{cursor:'pointer'}}><Arrow col="totalAmount"/> Total Amount</th>
                  <th className="num">Cash Balance</th>
                </tr>
              </thead>
              <tbody>
                {rows.map((r,i)=>(
                  <tr key={r.iso} style={{background:selected.has(r.iso)?'#f4f6ff':undefined, animation:`fadein .25s ${i*30}ms both`}}>
                    <td><input type="checkbox" checked={selected.has(r.iso)} onChange={()=>toggle(r.iso)}/></td>
                    <td className="mono" style={{fontWeight:600}}>{r.date}</td>
                    <td className="num">{fmt(r.sales)}</td>
                    <td className="num">{fmt(r.expense)}</td>
                    <td className="num">{fmt(r.payChq)}</td>
                    <td className="num">{fmt(r.payMNI)}</td>
                    <td className="num">{fmt(r.payJS)}</td>
                    <td className="num">{fmt(r.interest)}</td>
                    <td className="num" style={{fontWeight:700}}>{fmt(r.totalAmount)}</td>
                    <td className={"num "+(r.cashBalance<0?'neg':'')} style={{fontWeight:700}}>{fmt(r.cashBalance)}</td>
                  </tr>
                ))}
                {rows.length===0 && (
                  <tr><td colSpan="10" style={{textAlign:'center',padding:40,color:'var(--muted)'}}>
                    {!datesReady
                      ? <div style={{display:'flex',flexDirection:'column',alignItems:'center',gap:8}}>
                          <I.Cal size={28} stroke="#cfd5e8"/>
                          <div style={{fontWeight:600,color:'var(--ink-2)'}}>กรุณาเลือก Start Date และ End Date</div>
                          <div style={{fontSize:12}}>เลือกช่วงวันที่ที่ต้องการตรวจสอบ ระบบจะแสดงข้อมูลให้อัตโนมัติ</div>
                        </div>
                      : 'No entries in this range.'}
                  </td></tr>
                )}
              </tbody>
            </table>
          </div>

          <div className="row between" style={{marginTop:14}}>
            <div className="row" style={{gap:18,fontSize:12}}>
              <span className="muted">Sum (Sales):</span>
              <span className="mono" style={{fontWeight:700,color:'#15803d'}}>{fmt(rows.reduce((s,r)=>s+r.sales,0))}</span>
              <span className="muted">Sum (Expense):</span>
              <span className="mono" style={{fontWeight:700,color:'#b91c1c'}}>{fmt(rows.reduce((s,r)=>s+r.expense,0))}</span>
              <span className="muted">Net:</span>
              <span className="mono" style={{fontWeight:700,color:'var(--brand)'}}>{fmt(rows.reduce((s,r)=>s+r.totalAmount,0))}</span>
            </div>
            <span className="muted" style={{fontStyle:'italic',fontSize:12}}>{clock}</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function EditEntryForm({ row, onSubmit }){
  const [f, setF] = useState({ sales:row.sales, expense:row.expense, interest:row.interest });
  const set = (k,v) => setF(x => ({...x, [k]:parseFloat(v)||0}));
  const total = f.sales - f.expense - f.interest;
  return (
    <div style={{display:'grid',gap:12}}>
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:10}}>
        <div className="field">
          <label>Sales</label>
          <input className="input mono" type="number" value={f.sales} onChange={e=>set('sales',e.target.value)}/>
        </div>
        <div className="field">
          <label>Expense</label>
          <input className="input mono" type="number" value={f.expense} onChange={e=>set('expense',e.target.value)}/>
        </div>
        <div className="field">
          <label>Interest</label>
          <input className="input mono" type="number" value={f.interest} onChange={e=>set('interest',e.target.value)}/>
        </div>
      </div>
      <div style={{background:'#f7f8fc',padding:12,borderRadius:10,display:'flex',justifyContent:'space-between',fontSize:13}}>
        <span style={{color:'var(--muted)'}}>New total</span>
        <span className="mono" style={{fontWeight:800,color:total>=0?'#15803d':'#b91c1c'}}>{fmt(total)} THB</span>
      </div>
      <button className="btn primary" style={{justifyContent:'center'}}
              onClick={()=>{ onSubmit({...f,totalAmount:total}); window.closeModal(); }}>
        <I.Save size={14}/> Save changes
      </button>
    </div>
  );
}

window.MakeDecisionView = MakeDecisionView;