// Kalendár + dovolenky/volno a Servisný modul technik (GoodWe SEMS)

function CalendarLeave() {
  const days = Array.from({length: 35}, (_,i) => i - 2); // starts prev month
  const today = 23;
  const events = {
    7:  [{t:'Dovolenka · Martina H.', c:'#f3a712'}],
    8:  [{t:'Dovolenka · Martina H.', c:'#f3a712'}],
    9:  [{t:'Dovolenka · Martina H.', c:'#f3a712'}],
    14: [{t:'Home office · Dávid K.', c:'#3a6da0'}],
    16: [{t:'Servis Trenčín', c:'#d64545'}],
    17: [{t:'Lekár · Peter N.', c:'#7b68ee'}],
    21: [{t:'Školenie Huawei', c:'#2a9d5f'}],
    23: [{t:'Dnes · 3 výjazdy', c:'#0e2744'}],
    24: [{t:'Dovolenka · Andrea Š.', c:'#f3a712'}],
    25: [{t:'Dovolenka · Andrea Š.', c:'#f3a712'}],
    28: [{t:'Tímový meeting', c:'#0e2744'}],
  };
  const requests = [
    { who:'Peter Novotný', role:'Obchodník', type:'Dovolenka', from:'28.04', to:'02.05', days:5, stat:'pending', note:'Plánovaná rodinná dovolenka' },
    { who:'Andrea Štefanová', role:'Skladníčka', type:'Voľno', from:'24.04', to:'25.04', days:2, stat:'pending', note:'Sťahovanie' },
    { who:'Lukáš Mikuláš', role:'Technik', type:'Lekár', from:'23.04', to:'23.04', days:0.5, stat:'approved', note:'Kontrola u špecialistu' },
    { who:'Martina Hrušková', role:'Účtovníčka', type:'Dovolenka', from:'07.04', to:'09.04', days:3, stat:'approved' },
  ];
  return (
    <AppShell active="calendar" crumbs={['CRM','Kalendár a dovolenky']}>
      <div className="page-head">
        <div><h1>Firemný kalendár</h1><p>Zdieľaný kalendár · dovolenky, voľno, služobné cesty · 6 zamestnancov online</p></div>
        <div className="page-head-actions">
          <button className="btn"><Ico.download/>Export .ics</button>
          <button className="btn btn-amber"><Ico.plus/>Žiadosť o voľno</button>
        </div>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'2fr 1fr', gap:14}}>
        <div className="card">
          <div className="card-head">
            <div className="hstack">
              <button className="btn btn-xs">←</button>
              <h3 style={{margin:'0 8px'}}>Apríl 2026</h3>
              <button className="btn btn-xs">→</button>
            </div>
            <div className="hstack">
              <div className="seg"><button>Deň</button><button>Týždeň</button><button className="active">Mesiac</button></div>
              <select className="select"><option>Celý tím</option><option>Moje</option><option>Technici</option></select>
            </div>
          </div>
          <div style={{padding:'0 10px 10px'}}>
            <div style={{display:'grid', gridTemplateColumns:'repeat(7,1fr)', gap:1, fontSize:11, color:'var(--ink-500)', fontWeight:600, padding:'8px 0 4px'}}>
              {['Po','Ut','St','Št','Pi','So','Ne'].map(d => <div key={d} style={{textAlign:'center'}}>{d}</div>)}
            </div>
            <div style={{display:'grid', gridTemplateColumns:'repeat(7,1fr)', gap:1, background:'var(--border)', borderRadius:6, overflow:'hidden'}}>
              {days.map((d,i) => {
                const showNum = d > 0 && d <= 30;
                const isToday = d === today;
                const ev = events[d] || [];
                return (
                  <div key={i} style={{
                    minHeight:78, background: showNum ? '#fff' : '#f6f8fc',
                    padding:6, position:'relative',
                  }}>
                    <div style={{
                      fontSize:11.5, fontWeight: isToday ? 700 : 500,
                      color: !showNum ? 'var(--ink-300)' : isToday ? '#fff' : 'var(--ink-700)',
                      width: isToday ? 20 : 'auto', height: isToday ? 20 : 'auto',
                      borderRadius: isToday ? '50%' : 0,
                      background: isToday ? 'var(--navy-800)' : 'transparent',
                      display:'flex', alignItems:'center', justifyContent:'center',
                      textAlign:'center',
                    }}>{showNum ? d : (d <= 0 ? 31+d : d-30)}</div>
                    <div style={{marginTop:4, display:'flex', flexDirection:'column', gap:2}}>
                      {ev.map((e,j) => (
                        <div key={j} style={{
                          fontSize:10, fontWeight:500, color:'#fff',
                          background:e.c, padding:'1px 5px', borderRadius:3,
                          whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis',
                        }}>{e.t}</div>
                      ))}
                    </div>
                  </div>
                );
              })}
            </div>
            <div className="hstack small muted" style={{gap:14, padding:10, flexWrap:'wrap'}}>
              <span><span style={{display:'inline-block', width:10, height:10, background:'#f3a712', borderRadius:2, verticalAlign:'middle', marginRight:4}}/>Dovolenka</span>
              <span><span style={{display:'inline-block', width:10, height:10, background:'#7b68ee', borderRadius:2, verticalAlign:'middle', marginRight:4}}/>Lekár</span>
              <span><span style={{display:'inline-block', width:10, height:10, background:'#2a9d5f', borderRadius:2, verticalAlign:'middle', marginRight:4}}/>Voľno / školenie</span>
              <span><span style={{display:'inline-block', width:10, height:10, background:'#3a6da0', borderRadius:2, verticalAlign:'middle', marginRight:4}}/>Home office</span>
              <span><span style={{display:'inline-block', width:10, height:10, background:'#d64545', borderRadius:2, verticalAlign:'middle', marginRight:4}}/>Servisný výjazd</span>
            </div>
          </div>
        </div>

        <div className="vstack" style={{gap:14}}>
          <div className="card">
            <div className="card-head"><h3>Nová žiadosť</h3></div>
            <div className="card-body vstack" style={{gap:8}}>
              <div className="field"><label>Typ</label>
                <div className="seg" style={{width:'100%'}}>
                  <button className="active" style={{flex:1}}>Dovolenka</button>
                  <button style={{flex:1}}>Lekár</button>
                  <button style={{flex:1}}>Voľno</button>
                </div>
              </div>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8}}>
                <div className="field"><label>Od</label><input className="input" defaultValue="28.04.2026"/></div>
                <div className="field"><label>Do</label><input className="input" defaultValue="02.05.2026"/></div>
              </div>
              <div className="field"><label>Dôvod (voliteľné)</label><textarea className="textarea" placeholder="napr. rodinná dovolenka" style={{minHeight:50}}/></div>
              <div className="small muted">Zostávajúce dni: <b style={{color:'var(--ink-900)'}}>14 / 25</b> · Notifikácia príde <b>Dávid K. (admin)</b></div>
              <button className="btn btn-primary">Odoslať žiadosť na schválenie</button>
            </div>
          </div>

          <div className="card">
            <div className="card-head"><h3>Žiadosti na schválenie</h3><span className="chip amber dot">2 nové</span></div>
            <div className="vstack" style={{gap:0}}>
              {requests.map((r,i) => (
                <div key={i} style={{padding:'10px 14px', borderTop: i>0?'1px solid var(--border)':'none'}}>
                  <div className="hstack">
                    <div className="sb-avatar" style={{background:'#3a6da0', color:'#fff', width:26, height:26, fontSize:10}}>{r.who.split(' ').map(x=>x[0]).join('')}</div>
                    <div style={{flex:1, minWidth:0}}>
                      <div style={{fontSize:12.5, fontWeight:500}}>{r.who} <span className="small muted" style={{fontWeight:400}}>· {r.role}</span></div>
                      <div className="small muted">{r.type} · {r.from} – {r.to} · {r.days} {r.days===1?'deň':'dní'}</div>
                    </div>
                    {r.stat==='pending' ? (
                      <div className="hstack">
                        <button className="btn btn-xs" style={{background:'var(--green-100)', color:'#135e37', borderColor:'transparent'}}><Ico.check/></button>
                        <button className="btn btn-xs btn-danger"><Ico.x/></button>
                      </div>
                    ) : <span className="chip green dot">Schválené</span>}
                  </div>
                  {r.note && <div className="small muted" style={{marginTop:4, paddingLeft:34}}>„{r.note}"</div>}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </AppShell>
  );
}

function TechnicianServis() {
  const sites = [
    { n:'RD Kučera · Žilina',       kw:9.9,  today:42.3, week:186, month:642, stat:'ok',    last:'pred 2 min' },
    { n:'SolarTech · Madunice',     kw:86,   today:318.5, week:1420, month:5820, stat:'ok',    last:'pred 1 min' },
    { n:'ABW · Bratislava',         kw:800,  today:2840.2, week:14200, month:54100, stat:'warn',  last:'pred 3 min', alert:'Optimizér #24 · nízky výkon' },
    { n:'Penzión Josu · Zuberec',  kw:100,  today:0, week:420, month:2880, stat:'err',  last:'pred 14 min', alert:'Menič 2/2 · chyba ISO F002' },
    { n:'Armovňa Kaplna',           kw:100,  today:385.1, week:1820, month:6640, stat:'ok',    last:'pred 4 min' },
    { n:'Skleníky · Sereď',          kw:250,  today:924.7, week:4120, month:15200, stat:'warn', last:'pred 8 min', alert:'Teplota meniča 68°C' },
  ];
  const statChip = (s) => s==='ok' ? <span className="chip green dot">OK</span> : s==='warn' ? <span className="chip amber dot">Varovanie</span> : <span className="chip red dot">Porucha</span>;
  const urgent = sites.filter(s => s.stat !== 'ok');
  return (
    <AppShell active="ai" crumbs={['CRM','Servis · GoodWe SEMS']}>
      <div className="page-head">
        <div>
          <div className="hstack"><h1 style={{margin:0}}>Technický monitoring</h1><span className="chip green dot">Sync pred 1 min</span></div>
          <p>Napojené na <b>GoodWe SEMS portál zhotoviteľa</b> · 18 inštalácií · 2.4 MW inštalovaný výkon</p>
        </div>
        <div className="page-head-actions">
          <div className="seg">
            <button>Dnes</button>
            <button className="active">Týždeň</button>
            <button>Mesiac</button>
            <button>Vlastný</button>
          </div>
          <button className="btn"><Ico.download/>Report</button>
        </div>
      </div>

      {urgent.length > 0 && (
        <div className="card" style={{borderColor:'var(--red-500)', background:'linear-gradient(0deg, #fff, #fff5f5)', marginBottom:14}}>
          <div style={{padding:'10px 14px', display:'flex', alignItems:'center', gap:10, borderBottom:'1px solid var(--red-100)'}}>
            <div style={{width:32, height:32, borderRadius:8, background:'var(--red-500)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center'}}>
              <Ico.bell/>
            </div>
            <div>
              <b style={{color:'var(--red-500)'}}>Urgentné · {urgent.length} inštalácie vyžadujú pozornosť</b>
              <div className="small muted">Automatické notifikácie odoslané zodpovedným technikom (SMS + e-mail + push).</div>
            </div>
            <button className="btn btn-sm" style={{marginLeft:'auto'}}>Prideliť technika</button>
            <button className="btn btn-sm btn-primary">Otvoriť v SEMS ↗</button>
          </div>
          <div>
            {urgent.map((s,i) => (
              <div key={i} style={{padding:'10px 14px', borderTop: i>0?'1px solid var(--border)':'none', display:'flex', alignItems:'center', gap:10}}>
                <span style={{width:8, height:8, borderRadius:'50%', background: s.stat==='err'?'var(--red-500)':'var(--amber-500)'}}/>
                <b style={{minWidth:200}}>{s.n}</b>
                <span className="small" style={{color:'var(--red-500)', fontWeight:500}}>{s.alert}</span>
                <span className="small muted" style={{marginLeft:'auto'}}>{s.last}</span>
                <button className="btn btn-xs">Detail</button>
                <button className="btn btn-xs btn-amber">Výjazd</button>
              </div>
            ))}
          </div>
        </div>
      )}

      <div className="kpi-grid">
        <div className="kpi accent">
          <div className="label">Výroba · týždeň</div>
          <div className="value">22.8 MWh</div>
          <div className="delta up" style={{color:'#7ed9a5'}}><Ico.arrowUp/>+8,2% vs minulý</div>
          <div className="spark"><Sparkline data={[2.1,3.0,2.8,3.4,3.1,3.8,4.6]} color="#f6bf47" w={90} h={32}/></div>
        </div>
        <div className="kpi"><div className="label">Dnes</div><div className="value">4.51 MWh</div><div className="delta up"><Ico.arrowUp/>82% plánu</div></div>
        <div className="kpi"><div className="label">Mesiac</div><div className="value">85.3 MWh</div><div className="delta up"><Ico.arrowUp/>+12%</div></div>
        <div className="kpi"><div className="label">Aktívne poruchy</div><div className="value" style={{color:'var(--red-500)'}}>2</div><div className="delta" style={{color:'var(--red-500)'}}>● urgentné</div></div>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'2fr 1fr', gap:14, marginBottom:14}}>
        <div className="card">
          <div className="card-head"><h3>Výroba · posledných 7 dní (kWh)</h3><span className="muted small">zdroj GoodWe SEMS</span></div>
          <div className="card-body">
            <svg width="100%" height="180" viewBox="0 0 560 180" preserveAspectRatio="none" style={{overflow:'visible'}}>
              {[0,1,2,3].map(i => <line key={i} x1="0" x2="560" y1={30+i*40} y2={30+i*40} stroke="#e2e8f0" strokeDasharray="3 3"/>)}
              {[2100,3000,2800,3400,3100,3800,4510].map((v,i) => {
                const h = (v/4800)*140;
                const x = 24 + i * 76;
                return <g key={i}><rect x={x} y={170-h} width="52" height={h} rx="4" fill="url(#sg)"/></g>;
              })}
              <defs><linearGradient id="sg" x1="0" x2="0" y1="0" y2="1"><stop offset="0" stopColor="#f3a712"/><stop offset="1" stopColor="#c47a00"/></linearGradient></defs>
            </svg>
          </div>
        </div>
        <div className="card">
          <div className="card-head"><h3>Zdravie inštalácií</h3></div>
          <div className="card-body vstack" style={{gap:10}}>
            <div className="hstack"><span style={{width:10,height:10,borderRadius:50,background:'var(--green-500)'}}/><span style={{flex:1}}>V poriadku</span><b>14</b></div>
            <div className="hstack"><span style={{width:10,height:10,borderRadius:50,background:'var(--amber-500)'}}/><span style={{flex:1}}>Varovanie</span><b>2</b></div>
            <div className="hstack"><span style={{width:10,height:10,borderRadius:50,background:'var(--red-500)'}}/><span style={{flex:1}}>Porucha</span><b>2</b></div>
            <div className="divider"/>
            <div className="small muted">Ø dostupnosť: <b style={{color:'var(--ink-900)'}}>98,7 %</b> · PR (Performance Ratio): <b style={{color:'var(--ink-900)'}}>84,2 %</b></div>
          </div>
        </div>
      </div>

      <div className="card" style={{overflow:'hidden'}}>
        <div className="card-head"><h3>Inštalácie (18)</h3>
          <div className="hstack">
            <input className="input" placeholder="Hľadať…" style={{width:200}}/>
            <select className="select"><option>Všetky stavy</option><option>Poruchy</option></select>
          </div>
        </div>
        <table className="tbl">
          <thead><tr><th>Inštalácia</th><th>Výkon</th><th>Dnes (kWh)</th><th>Týždeň</th><th>Mesiac</th><th>Stav</th><th>Poruchy</th><th>Posledná sync</th><th></th></tr></thead>
          <tbody>
            {sites.map((s,i)=>(
              <tr key={i} className={s.stat!=='ok' ? 'sel' : ''} style={s.stat==='err'?{background:'#fff5f5'}:{}}>
                <td><b>{s.n}</b></td>
                <td>{s.kw} kWp</td>
                <td style={{fontWeight:600}}>{s.today.toFixed(1)}</td>
                <td>{s.week.toLocaleString('sk')} kWh</td>
                <td>{s.month.toLocaleString('sk')} kWh</td>
                <td>{statChip(s.stat)}</td>
                <td>{s.alert ? <span className="small" style={{color:'var(--red-500)', fontWeight:500}}>{s.alert}</span> : <span className="small muted">—</span>}</td>
                <td className="small muted">{s.last}</td>
                <td><button className="btn btn-xs">SEMS ↗</button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </AppShell>
  );
}

// ───── Responsive helper (mobile preview of dashboard) ─────
function ResponsivePreview() {
  return (
    <div style={{display:'flex', gap:20, alignItems:'flex-start', justifyContent:'center', padding:'20px 0', background:'#f0eee9'}}>
      <div style={{width:390, height:760, borderRadius:26, border:'10px solid #0b1a2e', overflow:'hidden', boxShadow:'0 20px 60px rgba(0,0,0,0.25)', background:'#fff', flexShrink:0}}>
        <div style={{height:28, background:'#0b1a2e', display:'flex', alignItems:'center', justifyContent:'space-between', padding:'0 14px', color:'#fff', fontSize:10, fontWeight:600}}>
          <span>9:41</span><span>•••</span>
        </div>
        <div style={{height:'100%', background:'#0e2744', color:'#fff', display:'flex', alignItems:'center', padding:'10px 14px', gap:10, borderBottom:'1px solid rgba(255,255,255,0.1)'}}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
          <Logo size={26}/>
          <div style={{fontSize:13, fontWeight:700}}>D&amp;D CRM</div>
          <span style={{marginLeft:'auto', width:8, height:8, borderRadius:'50%', background:'#f3a712'}}/>
        </div>
        <div style={{padding:14, background:'#f6f8fc', height:'calc(100% - 86px)', overflow:'auto'}}>
          <div style={{fontSize:15, fontWeight:700}}>Dobrý deň, Dávid</div>
          <div style={{fontSize:11, color:'#5b6b82', marginBottom:12}}>Štvrtok 23. apríl</div>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8, marginBottom:10}}>
            <div style={{background:'linear-gradient(135deg, #0e2744, #133258)', color:'#fff', padding:10, borderRadius:8}}>
              <div style={{fontSize:9, color:'#a6c0df'}}>OBRAT 7D</div>
              <div style={{fontSize:16, fontWeight:700}}>87,4k €</div>
              <div style={{fontSize:10, color:'#7ed9a5'}}>↑ +12,4%</div>
            </div>
            <div style={{background:'#fff', padding:10, borderRadius:8, border:'1px solid #e2e8f0'}}>
              <div style={{fontSize:9, color:'#5b6b82'}}>NOVÉ</div>
              <div style={{fontSize:16, fontWeight:700}}>12</div>
              <div style={{fontSize:10, color:'#f3a712'}}>● akcia</div>
            </div>
          </div>
          <div style={{background:'#fff', borderRadius:8, border:'1px solid #e2e8f0', padding:10, marginBottom:10}}>
            <div style={{fontSize:11.5, fontWeight:600, marginBottom:6}}>Posledné objednávky</div>
            {['#DD-2841 · 4 782 €','#DD-2840 · 12 450 €','#DD-2839 · 1 240 €'].map(o => (
              <div key={o} style={{fontSize:11, padding:'5px 0', borderTop:'1px solid #eef2f7', display:'flex', justifyContent:'space-between'}}>
                <span>{o.split(' · ')[0]}</span><b>{o.split(' · ')[1]}</b>
              </div>
            ))}
          </div>
          <div style={{background:'#fff5f5', border:'1px solid #fce1e1', borderRadius:8, padding:10, marginBottom:10}}>
            <div style={{fontSize:11.5, fontWeight:600, color:'#d64545'}}>⚠ 2 inštalácie hlásia poruchu</div>
            <div style={{fontSize:10.5, color:'#5b6b82', marginTop:2}}>Penzión Josu · ABW Bratislava</div>
          </div>
          <button style={{width:'100%', height:38, borderRadius:8, background:'#f3a712', border:'none', fontWeight:600, fontSize:12}}>+ Nová žiadosť o voľno</button>
        </div>
      </div>

      <div style={{width:640, height:760, borderRadius:18, border:'8px solid #0b1a2e', overflow:'hidden', boxShadow:'0 20px 60px rgba(0,0,0,0.25)', flexShrink:0, background:'#f6f8fc'}}>
        <div style={{display:'flex', height:'100%'}}>
          <div style={{width:52, background:'#0e2744', color:'#fff', display:'flex', flexDirection:'column', alignItems:'center', gap:12, padding:'14px 0'}}>
            <Logo size={26}/>
            <div style={{width:30, height:30, borderRadius:6, background:'rgba(255,255,255,0.08)', display:'flex', alignItems:'center', justifyContent:'center'}}><Ico.dashboard/></div>
            <div style={{width:30, height:30, borderRadius:6, display:'flex', alignItems:'center', justifyContent:'center', color:'#b8c9e0'}}><Ico.orders/></div>
            <div style={{width:30, height:30, borderRadius:6, display:'flex', alignItems:'center', justifyContent:'center', color:'#b8c9e0'}}><Ico.products/></div>
            <div style={{width:30, height:30, borderRadius:6, display:'flex', alignItems:'center', justifyContent:'center', color:'#b8c9e0'}}><Ico.ai/></div>
            <div style={{width:30, height:30, borderRadius:6, display:'flex', alignItems:'center', justifyContent:'center', color:'#b8c9e0'}}><Ico.users/></div>
          </div>
          <div style={{flex:1, padding:14, overflow:'auto'}}>
            <div style={{fontSize:15, fontWeight:700}}>Servis · GoodWe SEMS</div>
            <div style={{fontSize:11, color:'#5b6b82', marginBottom:10}}>18 inštalácií · 2.4 MW</div>
            <div style={{background:'#fff5f5', border:'1px solid #fce1e1', borderRadius:8, padding:10, marginBottom:10}}>
              <div style={{fontSize:12, fontWeight:600, color:'#d64545'}}>⚠ 2 urgentné poruchy</div>
              <div style={{fontSize:11, marginTop:4}}>• Penzión Josu · Menič 2/2 chyba ISO F002</div>
              <div style={{fontSize:11}}>• ABW Bratislava · Optimizér #24</div>
            </div>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:6, marginBottom:10}}>
              {[['Dnes','4.5 MWh'],['Týždeň','22.8'],['Mesiac','85.3']].map(([a,b]) => (
                <div key={a} style={{background:'#fff', border:'1px solid #e2e8f0', borderRadius:6, padding:8}}>
                  <div style={{fontSize:9, color:'#5b6b82', textTransform:'uppercase'}}>{a}</div>
                  <div style={{fontSize:14, fontWeight:700}}>{b}</div>
                </div>
              ))}
            </div>
            <div style={{background:'#fff', borderRadius:8, border:'1px solid #e2e8f0', padding:10}}>
              <div style={{fontSize:12, fontWeight:600, marginBottom:6}}>Inštalácie</div>
              {[['ABW Bratislava','800 kWp','warn'],['SolarTech Madunice','86 kWp','ok'],['Penzión Zuberec','100 kWp','err']].map(([n,p,s],i) => (
                <div key={i} style={{display:'flex', alignItems:'center', gap:6, padding:'6px 0', borderTop: i>0?'1px solid #eef2f7':'none', fontSize:11}}>
                  <span style={{width:6,height:6,borderRadius:'50%', background: s==='ok'?'#2a9d5f':s==='warn'?'#f3a712':'#d64545'}}/>
                  <span style={{flex:1}}>{n}</span>
                  <span style={{color:'#5b6b82'}}>{p}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CalendarLeave, TechnicianServis, ResponsivePreview });