// ============================================================
// report.jsx — รายงานประจำเดือน
// ============================================================
const { useMemo: uMRp } = React;

function ReportView({ monthDate, store }) {
  const year = monthDate.getFullYear(), month = monthDate.getMonth();
  const days = daysOfMonth(year, month);
  const { overrides, leaves, ots, transfers } = store;

  // 1. วันทำงาน (แยก b1/b2)
  const workData = uMRp(() => STAFF.map(s => {
    let b1=0, b2=0;
    days.forEach(d => {
      const a = assignmentsForDate(d, overrides, leaves)[s.id];
      if(a && a !== 'off'){ a.b==='b1' ? b1++ : b2++; }
    });
    return { ...s, b1, b2, total: b1+b2 };
  }), [year, month, overrides, leaves]);

  // 2. OT (pending+approved, ไม่นับ denied)
  const otData = uMRp(() => {
    const map = {};
    STAFF.forEach(s => { map[s.id]=0; });
    Object.values(ots).forEach(o => {
      if(o.status !== 'denied'){
        const d = new Date(o.ds+'T00:00:00');
        if(d.getFullYear()===year && d.getMonth()===month)
          map[o.staffId] = (map[o.staffId]||0) + (o.hours||0);
      }
    });
    return STAFF.map(s => ({ ...s, hours: map[s.id] }));
  }, [year, month, ots]);

  // 3. สลับสาขา (pending+approved, ไม่นับ denied)
  const trData = uMRp(() => {
    const cnt={}, fuel={};
    STAFF.forEach(s => { cnt[s.id]=0; fuel[s.id]=0; });
    Object.values(transfers||{}).forEach(t => {
      if(t.status !== 'denied'){
        const d = new Date(t.ds+'T00:00:00');
        if(d.getFullYear()===year && d.getMonth()===month){
          cnt[t.staffId]  = (cnt[t.staffId]||0)  + 1;
          fuel[t.staffId] = (fuel[t.staffId]||0) + (t.fuel||0);
        }
      }
    });
    return STAFF.map(s => ({ ...s, count: cnt[s.id], fuel: fuel[s.id] }));
  }, [year, month, transfers]);

  const monthLabel = `${MONTHS_TH[month]} ${thaiYear(year)}`;

  const exportExcel = () => {
    if(typeof XLSX === 'undefined'){ exportCSV(); return; }
    const wb = XLSX.utils.book_new();

    // Sheet 1: วันทำงาน
    const ws1 = XLSX.utils.aoa_to_sheet([
      [`รายงานวันทำงาน · ${monthLabel}`], [],
      ['พนักงาน', BRANCHES.b1.name, BRANCHES.b2.name, 'รวม'],
      ...workData.map(s => [s.nick, s.b1, s.b2, s.total]),
      ['รวม', workData.reduce((a,s)=>a+s.b1,0), workData.reduce((a,s)=>a+s.b2,0), workData.reduce((a,s)=>a+s.total,0)],
    ]);

    // Sheet 2: OT
    const ws2 = XLSX.utils.aoa_to_sheet([
      [`รายงาน OT · ${monthLabel}`], [],
      ['พนักงาน', 'OT (ชั่วโมง)'],
      ...otData.map(s => [s.nick, s.hours]),
      ['รวม', otData.reduce((a,s)=>a+s.hours,0)],
    ]);

    // Sheet 3: สลับสาขา
    const ws3 = XLSX.utils.aoa_to_sheet([
      [`รายงานสลับสาขา · ${monthLabel}`], [],
      ['พนักงาน', 'จำนวนครั้ง', 'ค่าน้ำมัน (บาท)'],
      ...trData.map(s => [s.nick, s.count, s.fuel]),
      ['รวม', trData.reduce((a,s)=>a+s.count,0), trData.reduce((a,s)=>a+s.fuel,0)],
    ]);

    XLSX.utils.book_append_sheet(wb, ws1, 'วันทำงาน');
    XLSX.utils.book_append_sheet(wb, ws2, 'OT');
    XLSX.utils.book_append_sheet(wb, ws3, 'สลับสาขา');
    XLSX.writeFile(wb, `รายงาน_${monthLabel}.xlsx`);
  };

  const exportCSV = () => {
    const rows = [
      [`รายงาน ${monthLabel}`], [],
      ['วันทำงาน'],
      ['พนักงาน', BRANCHES.b1.name, BRANCHES.b2.name, 'รวม'],
      ...workData.map(s => [s.nick, s.b1, s.b2, s.total]),
      [], ['OT'],
      ['พนักงาน', 'OT (ชั่วโมง)'],
      ...otData.map(s => [s.nick, s.hours]),
      [], ['สลับสาขา'],
      ['พนักงาน', 'จำนวนครั้ง', 'ค่าน้ำมัน (บาท)'],
      ...trData.map(s => [s.nick, s.count, s.fuel]),
    ];
    const csv = rows.map(r=>r.join(',')).join('\n');
    const blob = new Blob([''+csv], {type:'text/csv;charset=utf-8;'});
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href=url; a.download=`รายงาน_${monthLabel}.csv`; a.click();
    URL.revokeObjectURL(url);
  };

  const w1tot = workData.reduce((a,s)=>a+s.b1,0);
  const w2tot = workData.reduce((a,s)=>a+s.b2,0);
  const wtot  = workData.reduce((a,s)=>a+s.total,0);
  const ottot = otData.reduce((a,s)=>a+s.hours,0);
  const trcnt = trData.reduce((a,s)=>a+s.count,0);
  const trfuel= trData.reduce((a,s)=>a+s.fuel,0);

  return (
    <div style={{maxWidth:720,margin:'0 auto'}}>
      {/* Header row */}
      <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:18,flexWrap:'wrap',gap:10}}>
        <div style={{fontSize:13,color:'#9aa1b0'}}>ข้อมูล {monthLabel} · รวม {STAFF.length} คน</div>
        <button onClick={exportExcel} style={{
          display:'inline-flex',alignItems:'center',gap:8,
          background:'linear-gradient(100deg,#1a6b3c,#27a35f)',color:'#fff',
          border:'none',borderRadius:12,padding:'9px 20px',
          fontSize:13.5,fontWeight:700,cursor:'pointer',fontFamily:'inherit',
          boxShadow:'0 4px 14px -5px rgba(39,163,95,.5)'}}>
          ⬇ Export Excel
        </button>
      </div>

      {/* ตาราง 1: วันทำงาน */}
      <RCard title="วันทำงาน" icon="📅" color={BRANCHES.b1.solid}>
        <RTable
          heads={['พนักงาน', BRANCHES.b1.name, BRANCHES.b2.name, 'รวม']}
          rows={workData.map(s=>[
            <SCell key="s" staff={s}/>,
            <NCell key="b1" n={s.b1} color={BRANCHES.b1.text} bg={BRANCHES.b1.tint}/>,
            <NCell key="b2" n={s.b2} color={BRANCHES.b2.text} bg={BRANCHES.b2.tint}/>,
            <NCell key="t"  n={s.total} bold/>,
          ])}
          foot={['รวม', w1tot, w2tot, <b key="t">{wtot}</b>]}
        />
      </RCard>

      {/* ตาราง 2: OT */}
      <RCard title="OT" icon="⏰" color={SHIFTS.a.solid}>
        <RTable
          heads={['พนักงาน', 'OT (ชั่วโมง)']}
          rows={otData.map(s=>[
            <SCell key="s" staff={s}/>,
            <NCell key="h" n={s.hours} color={SHIFTS.a.text} bg={SHIFTS.a.tint}/>,
          ])}
          foot={['รวม', <b key="t">{ottot} ชม.</b>]}
        />
      </RCard>

      {/* ตาราง 3: สลับสาขา */}
      <RCard title="สลับสาขาระหว่างวัน" icon="🚗" color="#6b9e52">
        <RTable
          heads={['พนักงาน', 'จำนวนครั้ง', 'ค่าน้ำมัน (บาท)']}
          rows={trData.map(s=>[
            <SCell key="s" staff={s}/>,
            <NCell key="c" n={s.count} color="#3a6128" bg="#ecf5e8"/>,
            <NCell key="f" n={s.fuel>0?`${s.fuel} ฿`:0} color="#9a6a12" bg="#fdf3da"/>,
          ])}
          foot={['รวม', <b key="c">{trcnt} ครั้ง</b>, <b key="f">{trfuel} ฿</b>]}
        />
      </RCard>
    </div>
  );
}

function RCard({ title, icon, color, children }){
  return (
    <div style={{background:'#fff',borderRadius:16,border:'1px solid #ebedf2',marginBottom:16,overflow:'hidden',
      boxShadow:'0 2px 8px -4px rgba(0,0,0,.08)'}}>
      <div style={{padding:'12px 18px',borderBottom:'1px solid #eef0f4',display:'flex',alignItems:'center',gap:8,
        background:'#fafbfc'}}>
        <span style={{fontSize:15}}>{icon}</span>
        <span style={{fontWeight:700,fontSize:15,fontFamily:'Anuphan',color:'#2b2f3a'}}>{title}</span>
        <span style={{width:4,height:4,borderRadius:'50%',background:color,marginLeft:2}}></span>
      </div>
      {children}
    </div>
  );
}

function RTable({ heads, rows, foot }){
  const th={padding:'8px 16px',textAlign:'left',fontSize:11.5,fontWeight:700,color:'#9aa1b0',
    background:'#fafbfc',borderBottom:'1px solid #f0f1f6',whiteSpace:'nowrap'};
  const td={padding:'10px 16px',borderBottom:'1px solid #f5f6f9',verticalAlign:'middle'};
  const tf={padding:'9px 16px',fontWeight:700,fontSize:13,color:'#2b2f3a',background:'#f5f6fa',
    borderTop:'2px solid #ebedf2'};
  return (
    <div style={{overflowX:'auto'}}>
      <table style={{width:'100%',borderCollapse:'collapse',fontFamily:'IBM Plex Sans Thai,sans-serif'}}>
        <thead>
          <tr>{heads.map((h,i)=><th key={i} style={{...th,textAlign:i>0?'center':'left'}}>{h}</th>)}</tr>
        </thead>
        <tbody>
          {rows.map((row,i)=>(
            <tr key={i}>
              {row.map((cell,j)=><td key={j} style={{...td,textAlign:j>0?'center':'left'}}>{cell}</td>)}
            </tr>
          ))}
        </tbody>
        <tfoot>
          <tr>{foot.map((f,i)=><td key={i} style={{...tf,textAlign:i>0?'center':'left'}}>{f}</td>)}</tr>
        </tfoot>
      </table>
    </div>
  );
}

function SCell({ staff }){
  return (
    <div style={{display:'inline-flex',alignItems:'center',gap:8}}>
      <Avatar staff={staff} size={26}/>
      <span style={{fontWeight:600,fontSize:13.5}}>{staff.nick}</span>
      <span style={{fontSize:11,color:'#b0b6c2'}}>{TYPES[staff.type].short}</span>
    </div>
  );
}

function NCell({ n, color, bg, bold }){
  const zero = n===0 || n==='0 ฿';
  if(zero) return <span style={{color:'#d0d4db',fontSize:13,fontFamily:'Anuphan'}}>—</span>;
  return (
    <span style={{background:bg||'transparent',color:color||'#2b2f3a',borderRadius:8,
      padding:bg?'4px 12px':'0',fontSize:14,fontWeight:bold?800:700,fontFamily:'Anuphan',
      display:'inline-block',whiteSpace:'nowrap'}}>{n}</span>
  );
}

Object.assign(window, { ReportView });