/* global React, Ic */
const { useState, useEffect, useRef, useMemo } = React;

/* status chip — colour + icon + word */
function Chip({ tone, icon, children }) {
  const map = { ok:'chip-ok', warn:'chip-warn', danger:'chip-danger', info:'chip-info', draft:'chip-draft', mute:'chip-mute' };
  return (
    <span className={`chip ${map[tone]||'chip-mute'}`}>
      {icon ? <Ic name={icon}/> : <span className="gl"/>}
      {children}
    </span>
  );
}
/* map common Estonian statuses → tone + icon */
const STATUS_TONE = {
  'Live':['ok','pulse'],'Korras':['ok','check'],'Aktiivne':['ok','check'],'Avaldatud':['ok','check'],'Kinnitatud':['ok','check'],'Allkirjastatud':['ok','check'],'Tasutud':['ok','check'],'Ühendatud':['ok','check'],'Stabiilne':['ok','check'],'Edukas':['ok','check'],
  'Vajab tähelepanu':['warn','alert'],'Ülevaatusel':['warn','eye'],'Onboarding':['warn','user'],'Trial':['info','clock'],'Prooviperiood':['info','clock'],'Aruandlus':['warn','doc'],'Eelnõustamine':['warn','clock'],'Uuring':['info','search'],
  'Blokeeritud':['danger','lock'],'Aegunud':['danger','clock'],'Puudub':['danger','x'],'Katkenud':['danger','alert'],
  'Mustand':['draft','edit'],'NDA vajalik':['info','lock'],'Investorile nähtav':['info','eye'],'Ainult sisemine':['mute','lock'],
  'Vajab founder’i otsust':['warn','flag'],'Vajab developer’i tegevust':['warn','code'],'Vajab juristi':['info','scale'],'Vajab raamatupidajat':['info','euro'],'Vajab kinnitust':['warn','flag'],
};
function StatusChip({ status }) {
  const [tone, icon] = STATUS_TONE[status] || ['mute', null];
  return <Chip tone={tone} icon={icon}>{status}</Chip>;
}
function PTag({ p }) { return <span className={`ptag ${p.toLowerCase()}`}>{p}</span>; }

/* data freshness */
function Fresh({ state, label }) {
  const txt = { live:'Live', stale:'Aegumas', missing:'Puudub', manual:'Käsitsi' }[state] || state;
  return <span className={`fresh ${state}`}><span className="fd"/>{label || txt}</span>;
}

/* mini bars */
function Bars({ data, hotIndex }) {
  const max = Math.max(...data);
  return (
    <div className="bars">
      {data.map((v,i)=>(
        <i key={i} className={`${i===hotIndex?'hot':''} ${i===data.length-1?'last':''}`} style={{height: (v/max*100)+'%'}}/>
      ))}
    </div>
  );
}

/* progress */
function Prog({ pct, tone }) {
  return <div className="prog"><i className={tone||''} style={{width: pct+'%'}}/></div>;
}

/* ring (conic) */
function Ring({ value, label }) {
  const tone = value>=75 ? 'var(--signal)' : value>=50 ? 'var(--warn)' : 'var(--danger)';
  return (
    <div className="ring" style={{background:`conic-gradient(${tone} ${value*3.6}deg, var(--bg-2) 0deg)`}}>
      <div style={{position:'absolute', inset:'8px', background:'var(--bg-1)', borderRadius:'50%'}}/>
      <b><span className="rv">{value}<span style={{fontSize:'13px',color:'var(--ink-muted)'}}>%</span></span><span className="rl">{label}</span></b>
    </div>
  );
}

/* score breakdown — explainable priority */
function ScoreBreakdown({ item }) {
  const factorEntries = Object.entries(item.factors || {});
  const rows = factorEntries.map(([key, value]) => {
    const raw = typeof value === 'number' ? value : Number(value?.value || 0);
    const weight = typeof value?.weight === 'number' ? value.weight : 1;
    const label = value?.label || key.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/[_-]+/g, ' ');
    return { key, label, raw, weight, pts: raw * weight };
  }).filter(r => r.pts > 0).sort((a,b)=>b.pts-a.pts);
  const maxScore = item.maxScore || item.scoreMax || item.priorityScoreMax || null;
  if (rows.length === 0) {
    return <State icon="target" title="Skoori jaotus puudub" sub="Backend kirje ei sisaldanud kuvatavaid prioriteedifaktoreid."/>;
  }
  return (
    <div className="score">
      <div className="spread" style={{marginBottom:'4px'}}>
        <span className="mono" style={{fontSize:'10px',color:'var(--ink-muted)',letterSpacing:'0.1em'}}>PRIORITYSCORE</span>
        <span className="mono" style={{fontSize:'15px',color:'var(--ink-hi)',fontWeight:700}}>{item.score ?? '—'}{maxScore && <span style={{color:'var(--ink-muted)',fontSize:'10px'}}> / {maxScore}</span>}</span>
      </div>
      {rows.map(r=>{
        const cls = r.raw>=0.8 ? 'hot' : r.raw>=0.5 ? 'warm' : '';
        return (
          <div key={r.key}>
            <div className="score-label"><span>{r.label} <span className="muted">×{r.weight}</span></span><b>{r.pts.toFixed(1)}</b></div>
            <div className="score-row">
              <div className="score-bar"><div className={`score-fill ${cls}`} style={{width:(r.raw*100)+'%'}}/></div>
              <span className="score-pts">{Math.round(r.raw*100)}%</span>
            </div>
          </div>
        );
      })}
    </div>
  );
}

/* section header */
function Sec({ ov, title, meta, right, children, flush }) {
  return (
    <section className="sec">
      <div className="sec-h">
        <div className="ttl">
          {ov && <span className="ov">{ov}</span>}
          <h2>{title}</h2>
          {meta && <span className="meta">{meta}</span>}
        </div>
        <div className="row-flex">{right}</div>
      </div>
      <div className={`sec-body ${flush?'flush':''}`}>{children}</div>
    </section>
  );
}

/* boxed card */
function Box({ ov, title, right, children, style }) {
  return (
    <div className="box" style={style}>
      <div className="box-h">
        <div>{ov && <div className="ov">{ov}</div>}<h3>{title}</h3></div>
        <div className="row-flex">{right}</div>
      </div>
      {children}
    </div>
  );
}

/* empty / loading / error states */
function State({ icon, title, sub, action }) {
  return (
    <div className="state">
      <span className="state-ico"><Ic name={icon||'inbox'}/></span>
      <h4>{title}</h4>
      {sub && <p>{sub}</p>}
      {action}
    </div>
  );
}
function Skeleton({ rows }) {
  return <div className="stack" style={{padding:'14px 18px'}}>{Array.from({length:rows||4}).map((_,i)=>(
    <div key={i} className="skel" style={{width:(90-i*8)+'%'}}/>
  ))}</div>;
}

/* placeholder image */
function ImgSlot({ label, h }) {
  return <div className="imgslot" style={{height:h||'100%', minHeight:h||90}}><span>{label||'pilt'}</span></div>;
}

/* tabs */
function Tabs({ items, value, onChange }) {
  return (
    <div className="tabs">
      {items.map(t=>(
        <button key={t.id} className={`tab ${value===t.id?'is-active':''}`} onClick={()=>onChange(t.id)}>
          {t.label}{t.count!=null && <span className="c">{t.count}</span>}
        </button>
      ))}
    </div>
  );
}

Object.assign(window, { Chip, StatusChip, PTag, Fresh, Bars, Prog, Ring, ScoreBreakdown, Sec, Box, State, Skeleton, ImgSlot, Tabs, useState, useEffect, useRef, useMemo });