/* crm-calendar.jsx — Monthly calendar view of cobranças + entregas */

// September 2026 starts on Tuesday (day-of-week 1 if Mon=0).
// Sep 1 2026 = Tuesday.
// Generate events for the month.
const CAL_EVENTS = {
  // day → array of events {kind, label, value, contractId}
  2:  [{kind:'charge',  label:'Cobrança · GYM-26-0118', value:380.00,  contractId:'GYM-26-0118'}],
  3:  [{kind:'deliver', label:'Entrega · BRB-26-0079',  value:0,       contractId:'BRB-26-0079'}],
  5:  [{kind:'deliver', label:'Entrega · GYM-26-0131',  value:0,       contractId:'GYM-26-0131'}],
  6:  [{kind:'reminder',label:'D-7 · Hotel Sereno',     value:0,       contractId:'HTL-26-0142'}],
  8:  [{kind:'reminder',label:'D-7 · 3 clientes',       value:0,       contractId:null}],
  10: [{kind:'charge',  label:'Cobrança · HTL-26-0166', value:5680.00, contractId:'HTL-26-0166'}],
  12: [{kind:'charge',  label:'Cobrança · GYM-26-0073', value:920.00,  contractId:'GYM-26-0073'}],
  14: [{kind:'charge',  label:'Cobrança · HTL-26-0151', value:3120.00, contractId:'HTL-26-0151'}],
  15: [
    {kind:'charge',  label:'Cobrança · HTL-26-0142', value:3842.00, contractId:'HTL-26-0142'},
    {kind:'invoice', label:'Fatura emitida',         value:0,       contractId:'HTL-26-0142'},
  ],
  18: [{kind:'deliver', label:'Entrega · HTL-26-0166', value:0,       contractId:'HTL-26-0166'}],
  20: [{kind:'charge',  label:'Cobrança · HTL-26-0188', value:2880.00, contractId:'HTL-26-0188'}],
  22: [{kind:'charge',  label:'Cobrança · SPA-26-0091', value:1280.00, contractId:'SPA-26-0091'}],
  25: [{kind:'deliver', label:'Entrega · HTL-26-0142', value:0,       contractId:'HTL-26-0142'}],
  28: [{kind:'charge',  label:'Cobrança · GYM-26-0131', value:1120.00, contractId:'GYM-26-0131'}],
  30: [{kind:'charge',  label:'Cobrança · HTL-25-0021', value:4110.00, contractId:'HTL-25-0021'}],
};

function CalendarView({onOpenContract}) {
  const [view, setView] = React.useState('month'); // month | quarter
  const [selectedDay, setSelectedDay] = React.useState(15); // default: today's hero
  const month = 'Setembro 2026';
  const firstDayOfWeek = 1; // Sep 1 2026 = Tue (0=Mon, 1=Tue, ...)
  const daysInMonth = 30;

  // Pre-padding cells
  const cells = [];
  for (let i = 0; i < firstDayOfWeek; i++) cells.push(null);
  for (let d = 1; d <= daysInMonth; d++) cells.push(d);
  // Pad to multiple of 7
  while (cells.length % 7 !== 0) cells.push(null);

  // Totals
  const monthCharges = Object.values(CAL_EVENTS).flat().filter(e => e.kind === 'charge');
  const totalCharge = monthCharges.reduce((s, e) => s + e.value, 0);
  const monthDeliveries = Object.values(CAL_EVENTS).flat().filter(e => e.kind === 'deliver').length;
  const monthInvoices = Object.values(CAL_EVENTS).flat().filter(e => e.kind === 'invoice').length;

  const selectedEvents = CAL_EVENTS[selectedDay] || [];

  return (
    <div className="content stack gap-5">
      <div className="flex between" style={{alignItems:'flex-end'}}>
        <div>
          <h1 className="page-title">Calendário</h1>
          <div className="page-sub">Cobranças, faturas e entregas agendadas · {monthCharges.length} cobranças no mês</div>
        </div>
        <div className="row gap-2">
          <div className="row gap-1" style={{border:'0.5px solid var(--rule)', borderRadius:5, padding:2}}>
            <button className="btn ghost sm" style={{height:24, padding:'0 10px', fontSize:11, background: view==='month' ? 'var(--surface-2)' : 'transparent'}} onClick={() => setView('month')}>Mês</button>
            <button className="btn ghost sm" style={{height:24, padding:'0 10px', fontSize:11, background: view==='quarter' ? 'var(--surface-2)' : 'transparent'}} onClick={() => setView('quarter')}>Trimestre</button>
          </div>
          <button className="btn outline sm"><Icon k="download" size={13}/> Exportar ICS</button>
        </div>
      </div>

      {/* KPIs */}
      <div className="grid gap-4" style={{gridTemplateColumns:'repeat(4, 1fr)'}}>
        <div className="card">
          <div className="smallcaps">Total cobranças · setembro</div>
          <div className="display tab" style={{fontSize:30, marginTop:6, lineHeight:1}}>{CRM_FMT_EUR(totalCharge)}</div>
          <div className="mono ink-3 mt-2" style={{fontSize:11}}>{monthCharges.length} cobranças</div>
        </div>
        <div className="card">
          <div className="smallcaps">Entregas</div>
          <div className="display tab" style={{fontSize:30, marginTop:6, lineHeight:1}}>{monthDeliveries}</div>
          <div className="mono ink-3 mt-2" style={{fontSize:11}}>despachadas no mês</div>
        </div>
        <div className="card">
          <div className="smallcaps">Faturas emitidas</div>
          <div className="display tab" style={{fontSize:30, marginTop:6, lineHeight:1}}>{monthInvoices + monthCharges.length}</div>
          <div className="mono ink-3 mt-2" style={{fontSize:11}}>TOConline · série F</div>
        </div>
        <div className="card tobacco">
          <div className="smallcaps">Hoje · 8 SET</div>
          <div className="display tab" style={{fontSize:30, marginTop:6, lineHeight:1}}>3</div>
          <div className="mono mt-2" style={{fontSize:11, color:'var(--sand)'}}>lembretes D-7</div>
        </div>
      </div>

      {view === 'month' ? (
        <div className="grid gap-4" style={{gridTemplateColumns:'1.7fr 1fr'}}>
          {/* Month grid */}
          <div className="card" style={{padding:'18px 22px'}}>
            <div className="flex between items-c">
              <div>
                <h2 className="section-title">{month}</h2>
                <div className="ink-3 mt-1" style={{fontSize:12}}>Tróia · Comporta · Leiria · Lisboa · etc.</div>
              </div>
              <div className="row gap-1">
                <button className="btn ghost sm" style={{padding:'0 8px'}}>‹</button>
                <button className="btn outline sm">Hoje</button>
                <button className="btn ghost sm" style={{padding:'0 8px'}}>›</button>
              </div>
            </div>

            {/* Weekday header */}
            <div className="grid mt-4" style={{gridTemplateColumns:'repeat(7, 1fr)', gap:4}}>
              {['Seg','Ter','Qua','Qui','Sex','Sáb','Dom'].map(d => (
                <div key={d} className="smallcaps" style={{textAlign:'center', padding:'4px 0'}}>{d}</div>
              ))}
            </div>

            {/* Cells */}
            <div className="grid" style={{gridTemplateColumns:'repeat(7, 1fr)', gap:4, marginTop:4}}>
              {cells.map((d, i) => {
                if (d === null) return <div key={i} style={{minHeight:84}}/>;
                const events = CAL_EVENTS[d] || [];
                const isToday = d === 8;
                const isSelected = d === selectedDay;
                return (
                  <div key={i} onClick={() => setSelectedDay(d)} style={{
                    minHeight:84, padding:'6px 8px',
                    background: isSelected ? 'var(--surface-3)' : 'var(--surface-2)',
                    border: isSelected ? '0.5px solid var(--clay)' : '0.5px solid transparent',
                    outline: isToday ? '1px solid var(--clay)' : 'none',
                    outlineOffset: -1,
                    borderRadius: 3, cursor: 'pointer', position:'relative', overflow:'hidden',
                    display:'flex', flexDirection:'column',
                  }}>
                    <div className="row between items-c">
                      <span className="mono" style={{fontSize:10.5, fontWeight: isToday ? 700 : 500, color: isToday ? 'var(--clay)' : 'var(--ink-2)'}}>{d}</span>
                      {events.length > 1 && <span className="mono ink-3" style={{fontSize:9}}>+{events.length}</span>}
                    </div>
                    <div className="stack mt-1" style={{gap:2}}>
                      {events.slice(0, 2).map((e, j) => (
                        <div key={j} style={{
                          fontSize:9.5, padding:'1px 4px', borderRadius:2,
                          background: e.kind === 'charge' ? 'var(--clay)' : e.kind === 'deliver' ? 'var(--tobacco)' : e.kind === 'reminder' ? 'transparent' : 'var(--surface-3)',
                          color: e.kind === 'charge' ? 'var(--bone)' : e.kind === 'deliver' ? 'var(--sand)' : e.kind === 'reminder' ? 'var(--clay)' : 'var(--ink-2)',
                          border: e.kind === 'reminder' ? '0.5px dashed var(--clay)' : '0.5px solid transparent',
                          fontFamily:'var(--mono)', letterSpacing:0.04,
                          overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap',
                        }}>
                          {e.value > 0 ? CRM_FMT_EUR(e.value).replace(',00','').replace(' €','') + ' €' : e.kind === 'deliver' ? 'entrega' : e.kind === 'reminder' ? 'D-7' : 'F · emitida'}
                        </div>
                      ))}
                    </div>
                  </div>
                );
              })}
            </div>

            {/* Legend */}
            <div className="row gap-4 mt-4" style={{paddingTop:14, borderTop:'0.5px solid var(--rule-2)', fontSize:11, color:'var(--ink-3)'}}>
              <span className="row gap-2"><span style={{width:12,height:12,background:'var(--clay)',borderRadius:2}}/> Cobrança SEPA</span>
              <span className="row gap-2"><span style={{width:12,height:12,background:'var(--tobacco)',borderRadius:2}}/> Entrega</span>
              <span className="row gap-2"><span style={{width:12,height:12,background:'var(--surface-3)',borderRadius:2}}/> Fatura emitida</span>
              <span className="row gap-2"><span style={{width:12,height:12,border:'0.5px dashed var(--clay)',borderRadius:2}}/> Lembrete D-7</span>
            </div>
          </div>

          {/* Side panel */}
          <div className="stack gap-4">
            <div className="card">
              <div className="smallcaps">Dia selecionado</div>
              <h2 className="display mt-1" style={{fontSize:36, lineHeight:1, fontWeight:300}}>
                {selectedDay} <span className="ink-3" style={{fontSize:18}}>SET</span>
              </h2>
              <div className="ink-3 mt-1" style={{fontSize:12}}>{selectedEvents.length} evento{selectedEvents.length!==1?'s':''}</div>

              <div className="mt-4 stack" style={{gap:0}}>
                {selectedEvents.length === 0 && <div className="ink-3" style={{fontSize:13, fontStyle:'italic', fontFamily:'var(--display)', textAlign:'center', padding:'24px 0'}}>Nada agendado.</div>}
                {selectedEvents.map((e, i) => (
                  <div key={i} className="row gap-3" style={{padding:'12px 0', borderBottom: i<selectedEvents.length-1 ? '0.5px solid var(--rule-2)' : 'none', cursor: e.contractId ? 'pointer' : 'default'}} onClick={() => e.contractId && onOpenContract(e.contractId)}>
                    <div style={{
                      width:6, alignSelf:'stretch', borderRadius:1,
                      background: e.kind === 'charge' ? 'var(--clay)' : e.kind === 'deliver' ? 'var(--tobacco)' : e.kind === 'reminder' ? 'transparent' : 'var(--ink-3)',
                      border: e.kind === 'reminder' ? '0.5px dashed var(--clay)' : '0',
                    }}/>
                    <div className="grow">
                      <div style={{fontSize:13, fontWeight:500}}>{e.label}</div>
                      {e.value > 0 && <div className="mono tab mt-1" style={{fontSize:11.5, color:'var(--ink-3)'}}>{CRM_FMT_EUR(e.value)}</div>}
                    </div>
                    {e.contractId && <Icon k="chevron-r" size={12} color="var(--ink-3)"/>}
                  </div>
                ))}
              </div>
            </div>

            <div className="card">
              <div className="smallcaps">Próximos 7 dias</div>
              <div className="mt-3 stack" style={{gap:0}}>
                {Object.keys(CAL_EVENTS).map(Number).sort((a,b) => a-b).filter(d => d >= 8 && d <= 15).map(d => {
                  const events = CAL_EVENTS[d];
                  const dayCharges = events.filter(e => e.kind === 'charge');
                  if (events.length === 0) return null;
                  return (
                    <div key={d} className="row between items-c" style={{padding:'10px 0', borderBottom: d<15 ? '0.5px solid var(--rule-2)' : 'none', cursor:'pointer'}} onClick={() => setSelectedDay(d)}>
                      <div className="row gap-3">
                        <span className="mono tab" style={{fontSize:11, color:'var(--ink-3)', width:40}}>{d} SET</span>
                        <span style={{fontSize:13}}>{events.length} evento{events.length!==1?'s':''}</span>
                      </div>
                      {dayCharges.length > 0 && (
                        <span className="mono tab" style={{fontSize:11.5, fontWeight:600}}>{CRM_FMT_EUR(dayCharges.reduce((s,e) => s + e.value, 0))}</span>
                      )}
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </div>
      ) : (
        /* Quarter view */
        <div className="card">
          <div className="flex between items-c">
            <h2 className="section-title">Q3 · 2026 · julho → setembro</h2>
            <div className="ink-3 mono" style={{fontSize:11}}>~ 24 cobranças · 22 entregas</div>
          </div>
          <div className="grid gap-4 mt-4" style={{gridTemplateColumns:'1fr 1fr 1fr'}}>
            {[
              {n:'Julho', total:18420, charges:8, deliveries:7},
              {n:'Agosto', total:14180, charges:6, deliveries:8},
              {n:'Setembro', total: totalCharge, charges:monthCharges.length, deliveries:monthDeliveries, current:true},
            ].map(m => (
              <div key={m.n} className={'card ' + (m.current ? '' : 'surface-2')} style={{padding:'18px 20px', background: m.current ? 'var(--surface-3)' : 'var(--bone)', borderColor: m.current ? 'var(--clay)' : 'var(--rule)'}}>
                <div className="row between items-c">
                  <h3 className="display" style={{fontSize:20, fontWeight:400}}>{m.n}</h3>
                  {m.current && <span className="badge active"><span className="dot"/>Atual</span>}
                </div>
                <div className="display tab mt-3" style={{fontSize:28, lineHeight:1}}>{CRM_FMT_EUR(m.total)}</div>
                <div className="row gap-4 mt-3" style={{fontSize:11.5, color:'var(--ink-3)'}}>
                  <span><span className="mono tab">{m.charges}</span> cobranças</span>
                  <span><span className="mono tab">{m.deliveries}</span> entregas</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { CalendarView });