/* global React, Ic, Chip, StatusChip, PTag, ScoreBreakdown, Fresh, useState, useEffect */

function drawerPriority(item) {
  const raw = String(item.P || item.priority || 'P3').toUpperCase();
  if (['P0', 'P1', 'P2', 'P3'].includes(raw)) return raw;
  if (raw === 'CRITICAL') return 'P0';
  if (raw === 'HIGH') return 'P1';
  if (raw === 'MEDIUM') return 'P2';
  return 'P3';
}

/* ── Operational item detail drawer ── */
function OperationalDrawer({ item, onClose, onAction, toast }) {
  if (!item) return null;
  const act = (label) => { onAction && onAction(label, item); };
  const priority = drawerPriority(item);
  const sourceKind = item.sourceKind || item.source || 'Backend queue';
  const status = item.status || 'Staatus puudub';
  const owner = item.owner || '—';
  const customer = item.customer || '—';
  const source = item.source || 'Allikas puudub';
  const sourceUrl = item.sourceUrl || item.source || 'Backend queue';
  const impact = item.impact || { customer, revenue: '—', compliance: '—' };
  const surface = item.surface || customer;
  const deploy = item.deploy || '—';
  const telemetry = item.telemetry || '—';
  const related = item.related || '—';
  const title = item.title || item.id || 'Pealkiri puudub';
  const summary = item.summary || `Backend queue kirje staatus: ${status}.`;
  const why = item.why || `Prioriteet pärineb backend queue väljast: ${item.priority || priority}.`;
  const next = item.next || 'Ava kirje backend tööjärjekorras';
  const confidence = typeof item.confidence === 'number' ? Math.round(item.confidence * 100) : null;
  const trail = Array.isArray(item.trail) ? item.trail : [];
  return (
    <aside className="drawer">
      <div className="dh">
        <div className="dh-top">
          <span className="dh-src"><Ic name="inbox"/>{sourceKind} · {item.id}</span>
          <button className="dh-close" onClick={onClose} aria-label="Sulge"><Ic name="x"/></button>
        </div>
        <div className="row-flex" style={{marginBottom:'7px'}}><PTag p={priority}/><StatusChip status={status}/></div>
        <div className="dh-title">{title}</div>
        <div className="dh-tags">
          <Chip tone="mute" icon="user">{owner}</Chip>
          {item.sla && item.sla!=='—' && <Chip tone={item.slaState==='hot'?'danger':item.slaState==='warn'?'warn':'mute'} icon="clock">SLA {item.sla}</Chip>}
          {confidence != null && <Chip tone="mute" icon="target">Kindlus {confidence}%</Chip>}
        </div>
      </div>

      <div className="dsec">
        <div className="dsec-h">{item.summary ? <>AI kokkuvõte <Fresh state="manual" label="AI · vajab kinnitust"/></> : 'Kokkuvõte'}</div>
        <p style={{margin:0,fontSize:'12px',color:'var(--ink-lo)',lineHeight:1.55}}>{summary}</p>
      </div>

      <div className="dsec">
        <div className="dsec-h">Miks see on eespool?</div>
        <div className="suggest" style={{borderLeftColor:'var(--warn)'}}>
          <p style={{fontSize:'12px',color:'var(--ink)'}}>{why}</p>
        </div>
      </div>

      {item.factors && <div className="dsec">
        <div className="dsec-h">Prioriteedi skoor — selgitatav</div>
        <ScoreBreakdown item={item}/>
      </div>}

      <div className="dsec">
        <div className="dsec-h">Mõju</div>
        <dl className="kv">
          <dt>Klient</dt><dd>{impact.customer}</dd>
          <dt>Tulu</dt><dd>{impact.revenue}</dd>
          <dt>Compliance</dt><dd>{impact.compliance}</dd>
          {customer!=='—' && <><dt>Klient/farm</dt><dd><b>{customer}</b></dd></>}
          <dt>Pind</dt><dd>{surface}</dd>
        </dl>
      </div>

      <div className="dsec">
        <div className="dsec-h">Tõendid ja allikad</div>
        <div className="evidence">
          <div className="ev"><span className="ev-ico"><Ic name="external"/></span><div><div className="ev-t">{source}</div><div className="ev-d"><a href="#" onClick={e=>e.preventDefault()}>{sourceUrl}</a></div></div></div>
          {deploy!=='—' && <div className="ev"><span className="ev-ico"><Ic name="deploy"/></span><div><div className="ev-t">Seotud deploy</div><div className="ev-d">{deploy}</div></div></div>}
          {telemetry!=='—' && <div className="ev"><span className="ev-ico"><Ic name="pulse"/></span><div><div className="ev-t">Telemeetria</div><div className="ev-d">{telemetry}</div></div></div>}
          {related!=='—' && <div className="ev"><span className="ev-ico"><Ic name="link"/></span><div><div className="ev-t">Seotud kirje</div><div className="ev-d">{related}</div></div></div>}
        </div>
      </div>

      <div className="dsec">
        <div className="dsec-h">Soovitatud järgmine tegevus</div>
        <div className="suggest">
          <div className="lbl">Järgmine tegevus</div>
          <p>{next}</p>
        </div>
      </div>

      {trail.length > 0 && <div className="dsec">
        <div className="dsec-h">Audit · käsitsejälg</div>
        <ul className="trail">
          {trail.map((t,i)=>(<li key={i}><span className="tdot"/><div><div className="tx">{t[0]}</div><div className="tm">{t[1]}</div></div></li>))}
        </ul>
      </div>}

      <div className="drawer-actions">
        <button className="btn btn-primary wide" onClick={()=>act('Loo GitHub issue')}><Ic name="git"/>Loo GitHub issue</button>
        <button className="btn" onClick={()=>act('Määra omanik')}><Ic name="user"/>Määra</button>
        <button className="btn" onClick={()=>act('Eskaleeri')}><Ic name="escalate"/>Eskaleeri</button>
        <button className="btn" onClick={()=>act('Snooze')}><Ic name="snooze"/>Snooze</button>
        <button className="btn" onClick={()=>act('Vasta kliendile')}><Ic name="mail"/>Vasta</button>
        <button className="btn btn-ghost wide" onClick={()=>act('Ülekirjuta prioriteet (logitakse)')}><Ic name="flag"/>Ülekirjuta prioriteet — põhjusega</button>
      </div>
    </aside>
  );
}

/* ── Generic record drawer (customer, doc, grant, etc) ── */
function RecordDrawer({ rec, onClose }) {
  if (!rec) return null;
  return (
    <aside className="drawer">
      <div className="dh">
        <div className="dh-top">
          <span className="dh-src"><Ic name={rec.icon||'doc'}/>{rec.kind}</span>
          <button className="dh-close" onClick={onClose} aria-label="Sulge"><Ic name="x"/></button>
        </div>
        <div className="dh-title">{rec.title}</div>
        <div className="dh-tags">{rec.tags}</div>
      </div>
      {rec.sections}
      {rec.actions && <div className="drawer-actions">{rec.actions}</div>}
    </aside>
  );
}

/* ── Command palette ── */
const NAV_COMMANDS = [
  { t:'Täna', d:'Command Center', kind:'Navigeerimine', go:'today' },
  { t:'Tööjärjekord', d:'Piletid ja teated', kind:'Navigeerimine', go:'tickets' },
  { t:'Kliendid', d:'Customer 360', kind:'Navigeerimine', go:'customers' },
  { t:'Telemeetria', d:'Toote tervis', kind:'Navigeerimine', go:'telemetry' },
  { t:'Arendus', d:'Developer Workspace', kind:'Navigeerimine', go:'engineering' },
  { t:'Turundus', d:'Veebilehe operatsioonid', kind:'Navigeerimine', go:'marketing' },
  { t:'Sisu', d:'Content Studio', kind:'Navigeerimine', go:'content' },
  { t:'Research', d:'Dokumendid', kind:'Navigeerimine', go:'research' },
  { t:'Toetused', d:'Rahastus', kind:'Navigeerimine', go:'grants' },
  { t:'Investorid', d:'Data room', kind:'Navigeerimine', go:'investor' },
  { t:'Finants', d:'Runway ja mõõdikud', kind:'Navigeerimine', go:'finance' },
  { t:'Õigus', d:'Compliance', kind:'Navigeerimine', go:'legal' },
  { t:'Automaatika', d:'Reeglid ja töövood', kind:'Navigeerimine', go:'automation' },
  { t:'Missioon', d:'Põhimõtted', kind:'Navigeerimine', go:'mission' },
  { t:'Seaded', d:'Integratsioonid ja õigused', kind:'Navigeerimine', go:'settings' },
];

function CommandPalette({ open, onClose, onNav }) {
  const [q, setQ] = useState('');
  const [cur, setCur] = useState(0);
  const inputRef = useRef(null);
  const results = NAV_COMMANDS.filter(c => (c.t+' '+c.d+' '+c.kind).toLowerCase().includes(q.toLowerCase()));
  useEffect(()=>{ if(open){ setQ(''); setCur(0); setTimeout(()=>inputRef.current&&inputRef.current.focus(),30); } },[open]);
  useEffect(()=>{
    if(!open) return;
    const h = (e)=>{
      if(e.key==='Escape') onClose();
      else if(e.key==='ArrowDown'){ e.preventDefault(); setCur(c=>Math.min(c+1, results.length-1)); }
      else if(e.key==='ArrowUp'){ e.preventDefault(); setCur(c=>Math.max(c-1,0)); }
      else if(e.key==='Enter' && results[cur]){ onNav(results[cur].go); onClose(); }
    };
    window.addEventListener('keydown', h);
    return ()=>window.removeEventListener('keydown', h);
  },[open, results, cur, onClose, onNav]);
  if(!open) return null;
  const grouped = {};
  results.forEach(r=>{ (grouped[r.kind]=grouped[r.kind]||[]).push(r); });
  let idx = -1;
  return (
    <div className="cmdk-scrim" onClick={onClose}>
      <div className="cmdk" onClick={e=>e.stopPropagation()}>
        <div className="cmdk-in">
          <Ic name="search"/>
          <input ref={inputRef} value={q} onChange={e=>{setQ(e.target.value); setCur(0);}} placeholder="Otsi klienti, piletit, deploy’d, dokumenti, toetust…"/>
          <span className="esc">ESC</span>
        </div>
        <div className="cmdk-list">
          {results.length===0 && <div className="state" style={{padding:'28px'}}><span className="state-ico"><Ic name="search"/></span><h4>Tulemusi ei leitud</h4></div>}
          {Object.keys(grouped).map(g=>(
            <div key={g}>
              <div className="cmdk-grp">{g}</div>
              {grouped[g].map(r=>{ idx++; const myIdx=idx; return (
                <button key={r.t} className={`cmdk-item ${cur===myIdx?'cur':''}`} onMouseEnter={()=>setCur(myIdx)} onClick={()=>{onNav(r.go); onClose();}}>
                  <span className="cmdk-ico"><Ic name="arrow"/></span>
                  <span><div className="cmdk-t">{r.t}</div><div className="cmdk-d">{r.d}</div></span>
                  <span className="cmdk-kind">{r.kind}</span>
                </button>
              );})}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { OperationalDrawer, RecordDrawer, CommandPalette });