// ============================================================
// wf-kit.jsx — Low-fidelity wireframe primitive kit
// Exports all primitives to window for cross-file use.
// ============================================================
const { useState } = React;

/* ---------- layout helpers ---------- */
const Row = ({gap=10, wrap, align='stretch', justify, style={}, children}) =>
  <div style={{display:'flex',gap,flexWrap:wrap?'wrap':'nowrap',alignItems:align,justifyContent:justify,...style}}>{children}</div>;
const Col = ({gap=10, style={}, children}) =>
  <div style={{display:'flex',flexDirection:'column',gap,...style}}>{children}</div>;
const Pad = ({p=14, style={}, children}) => <div style={{padding:p,...style}}>{children}</div>;

/* ---------- text placeholder lines ---------- */
const Line = ({w='100%', s, dark, style={}}) =>
  <div className={'wf-line'+(s?' s':'')+(dark?' dark':'')} style={{width:w,...style}} />;
const Lines = ({n=3, last='60%'}) =>
  <Col gap={7}>{Array.from({length:n}).map((_,i)=><Line key={i} w={i===n-1?last:'100%'} s/>)}</Col>;
const Label = ({children, style={}}) => <span className="wf-label" style={style}>{children}</span>;
const H = ({children, size=13, style={}}) => <span className="wf-h" style={{fontSize:size,...style}}>{children}</span>;

/* ---------- boxes & placeholders ---------- */
const Box = ({dash, h, w, label, hatch, center, style={}, children}) => (
  <div className={'wf-box'+(dash?' wf-box--dash':'')+(hatch?' wf-hatch':'')}
       style={{height:h,width:w,display:(center||label)?'flex':'block',alignItems:'center',justifyContent:'center',...style}}>
    {label ? <span className="wf-ph-label">{label}</span> : children}
  </div>
);

/* ---------- buttons / pills / chips ---------- */
const Btn = ({variant, block, children, style={}}) =>
  <span className={'wf-btn'+(variant?' wf-btn--'+variant:'')+(block?' wf-btn--block':'')} style={style}>{children}</span>;
const STATUS = {ok:'Healthy',warn:'Warning',crit:'Critical',off:'Offline',maint:'Maint'};
const Dot = ({s='ok'}) => <span className={'wf-dot dot-'+s} />;
const Pill = ({s='ok', label, style={}}) =>
  <span className="wf-pill" style={style}><Dot s={s}/>{label||STATUS[s]}</span>;
const Chip = ({children, style={}}) => <span className="wf-chip" style={style}>{children}</span>;

/* ---------- callout marker ---------- */
const Mark = ({n, top, left, right, bottom, style={}}) =>
  <span className="wf-marker" style={{top,left,right,bottom,...style}}>{n}</span>;

/* ---------- mini charts (SVG, grayscale + status accents) ---------- */
const Donut = ({size=92}) => {
  const segs=[['#16A34A',.55],['#F59E0B',.22],['#DC2626',.1],['#9aa0a6',.13]];
  let acc=0; const r=size/2-8, c=size/2, C=2*Math.PI*r;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
      <circle cx={c} cy={c} r={r} fill="none" stroke="#eef1f4" strokeWidth="12"/>
      {segs.map((sg,i)=>{const len=sg[1]*C;const el=<circle key={i} cx={c} cy={c} r={r} fill="none" stroke={sg[0]} strokeWidth="12" strokeDasharray={`${len} ${C-len}`} strokeDashoffset={-acc} transform={`rotate(-90 ${c} ${c})`}/>;acc+=len;return el;})}
      <text x={c} y={c+4} textAnchor="middle" fontFamily="var(--mono)" fontSize="12" fill="#34393f" fontWeight="600">248</text>
    </svg>
  );
};
const Spark = ({w=120, h=34, color='#2E75B6'}) => {
  const pts=[2,8,5,12,9,16,11,9,14,18,12,22,19,16,24,28].map((v,i)=>`${(i/15)*w},${h-(v/30)*h}`).join(' ');
  return <svg width={w} height={h}><polyline points={pts} fill="none" stroke={color} strokeWidth="1.6"/></svg>;
};
const Wave = ({w=200, h=44, lines=3}) => {
  const cols=['#16A34A','#2E75B6','#DC2626','#0D9488','#F59E0B','#9aa0a6'];
  const mk=(seed)=>Array.from({length:40}).map((_,i)=>`${(i/39)*w},${h/2+Math.sin(i*0.6+seed)*Math.cos(i*0.21+seed)*(h/2-4)}`).join(' ');
  return <svg width={w} height={h} style={{display:'block'}}>{Array.from({length:lines}).map((_,i)=><polyline key={i} points={mk(i*1.7)} fill="none" stroke={cols[i%cols.length]} strokeWidth="1.2" opacity="0.85"/>)}</svg>;
};
const Gauge = ({size=84, label}) => {
  const r=size/2-7,c=size/2,C=Math.PI*r;
  return <svg width={size} height={size/2+18} viewBox={`0 0 ${size} ${size/2+18}`}>
    <path d={`M7 ${c} A ${r} ${r} 0 0 1 ${size-7} ${c}`} fill="none" stroke="#eef1f4" strokeWidth="9"/>
    <path d={`M7 ${c} A ${r} ${r} 0 0 1 ${size-7} ${c}`} fill="none" stroke="#16A34A" strokeWidth="9" strokeDasharray={`${C*0.68} ${C}`}/>
    <text x={c} y={c+2} textAnchor="middle" fontFamily="var(--mono)" fontSize="14" fontWeight="600" fill="#34393f">68%</text>
    {label&&<text x={c} y={c+15} textAnchor="middle" fontFamily="var(--mono)" fontSize="9" fill="#7c848c">{label}</text>}
  </svg>;
};
const Ring = ({size=30, pct=0.7, color='#16A34A'}) => {
  const r=size/2-3,c=size/2,C=2*Math.PI*r;
  return <svg width={size} height={size}><circle cx={c} cy={c} r={r} fill="none" stroke="#e6e9ed" strokeWidth="3.5"/><circle cx={c} cy={c} r={r} fill="none" stroke={color} strokeWidth="3.5" strokeDasharray={`${pct*C} ${C}`} strokeLinecap="round" transform={`rotate(-90 ${c} ${c})`}/></svg>;
};
const Bars = ({w=18}) => <span style={{display:'inline-flex',alignItems:'flex-end',gap:2,height:14}}>{[5,8,11,14].map((b,i)=><span key={i} style={{width:3,height:b,background:i<3?'#34393f':'#cfd4d9',borderRadius:1}}/>)}</span>;

/* map placeholder */
const MapBox = ({h=300, dark, pins=[['ok','30%','24%'],['warn','58%','40%'],['crit','46%','66%'],['off','74%','58%'],['ok','20%','72%']]}) => (
  <div style={{position:'relative',height:h,background:dark?'#222a35':'#eef2f5',borderRadius:6,overflow:'hidden'}}
       className="wf-hatch">
    <span className="wf-ph-label" style={{position:'absolute',top:10,left:12,color:dark?'#7d8696':undefined}}>GEOSPATIAL MAP</span>
    {pins.map((p,i)=>(
      <span key={i} style={{position:'absolute',left:p[1],top:p[2],transform:'translate(-50%,-100%)'}}>
        <span style={{display:'block',width:16,height:16,borderRadius:'50% 50% 50% 0',transform:'rotate(45deg)',background:`var(--${p[0]})`,border:'2px solid #fff',boxShadow:'0 1px 3px rgba(0,0,0,.3)'}}/>
      </span>
    ))}
  </div>
);

/* ---------- chrome frames ---------- */
const Browser = ({url='aegis-cognis.app', w, children}) => (
  <div className="wf-frame" style={{width:w}}>
    <div className="wf-chrome"><span className="wf-dots"><i/><i/><i/></span><span className="wf-urlbar">🔒 {url}</span></div>
    <div className="wf-canvas">{children}</div>
  </div>
);
const Win = ({title='Aegis Cognis — Desktop', w, children}) => (
  <div className="wf-frame" style={{width:w}}>
    <div className="wf-chrome"><span className="wf-dots"><i/><i/><i/></span><span className="wf-chrome-title">{title}</span></div>
    <div className="wf-canvas">{children}</div>
  </div>
);
const Plain = ({w, children, style={}}) => <div className="wf-frame wf-frame--plain" style={{width:w,...style}}><div className="wf-canvas">{children}</div></div>;

/* phone frame */
const Phone = ({children, cap, armed}) => (
  <div style={{display:'flex',flexDirection:'column',alignItems:'center'}}>
    <div className="wf-phone">
      <div className="wf-phone-screen">
        <div className="wf-notch"/>
        <div style={{position:'absolute',inset:0,display:'flex',flexDirection:'column'}}>
          <div className="wf-classbar" style={{position:'static',height:18,fontSize:7.5,letterSpacing:'.1em'}}>CUI // ITAR</div>
          {armed && <div className="wf-armed">● GESTURES ARMED</div>}
          <div className="wf-statusbar"><span>9:41</span><span>● ▲ ▮▮</span></div>
          <div style={{flex:1,position:'relative',overflow:'hidden'}}>{children}</div>
        </div>
      </div>
    </div>
    {cap && <div className="wf-phone-cap">{cap}</div>}
  </div>
);

/* ---------- composite UI bits ---------- */
const Sidebar = ({items, active, w=190, footer=true}) => (
  <div className="wf-side" style={{width:w,minHeight:'100%'}}>
    <div className="lg">▣ AEGIS COGNIS</div>
    {items.map((it,i)=><div key={i} className={'wf-nav'+(it===active?' active':'')}><span className="ni"/>{it}</div>)}
    {footer && <div className="wf-side-foot"><span className="av"/><Col gap={2}><span style={{fontSize:11,color:'#fff'}}>M. Operator</span><span style={{fontSize:9,color:'#8ea0bd',fontFamily:'var(--mono)'}}>HW TECH</span></Col></div>}
  </div>
);
const FTabs = ({tabs, active}) => <div className="wf-ftabs">{tabs.map((t,i)=><div key={i} className={'wf-ftab'+(t===active?' active':'')}>{t}</div>)}</div>;
const Seg = ({items, active}) => <div className="wf-seg">{items.map((t,i)=><div key={i} className={'sg'+(t===active?' active':'')}>{t}</div>)}</div>;
const Stepper = ({steps, active}) => (
  <div className="wf-stepper">{steps.map((s,i)=>(
    <React.Fragment key={i}>
      <div className={'wf-step'+(i<active?' done':'')+(i===active?' active':'')}><span className="sc">{i<active?'✓':i+1}</span><span className="sl">{s}</span></div>
      {i<steps.length-1 && <div className={'wf-step-line'+(i<active?' done':'')}/>}
    </React.Fragment>
  ))}</div>
);
const Table = ({cols, rows}) => (
  <table className="wf-table"><thead><tr>{cols.map((c,i)=><th key={i}>{c}</th>)}</tr></thead>
    <tbody>{rows.map((r,i)=><tr key={i}>{r.map((cell,j)=><td key={j}>{cell}</td>)}</tr>)}</tbody></table>
);
const TopBar = ({org='JSOC Task Force Alpha'}) => (
  <div style={{display:'flex',alignItems:'center',gap:12,height:46,padding:'0 16px',borderBottom:'1px solid var(--line)',background:'#fff'}}>
    <H size={13}>{org}</H>
    <div style={{flex:1,maxWidth:360,margin:'0 auto'}}><Box h={26} style={{borderRadius:13,display:'flex',alignItems:'center',padding:'0 12px'}}><Label>⌕ Search devices, events…</Label></Box></div>
    <span style={{marginLeft:'auto',display:'flex',gap:14,alignItems:'center'}}><Label>🔔</Label><span className="wf-side-foot" style={{padding:0,border:'none'}}><span className="av" style={{width:24,height:24}}/></span></span>
  </div>
);
const KPI = ({label, val, trend, accent}) => (
  <Box style={{padding:'12px 14px',flex:1}}>
    <Label>{label}</Label>
    <Row align="baseline" gap={8} style={{marginTop:6}}>
      <span style={{fontFamily:'var(--mono)',fontSize:22,fontWeight:600,color:accent||'var(--ink-strong)'}}>{val}</span>
      {trend&&<Chip>{trend}</Chip>}
    </Row>
  </Box>
);

/* ---------- screen scaffold ---------- */
const Screen = ({idx, title, tag, caption, annotations, wide, twoColAnnot, children}) => (
  <div className="wf-screen">
    <div className="wf-screen-head">
      {idx&&<span className="wf-screen-idx">{idx}</span>}
      <span className="wf-screen-title">{title}</span>
      {tag&&<span className="wf-screen-tag">{tag}</span>}
    </div>
    {caption&&<p className="wf-screen-caption">{caption}</p>}
    <div className={'wf-screen-body'+(wide?' wf-wide':'')}>
      <div style={{minWidth:0}}>{children}</div>
      {annotations && (
        <div className="wf-annot">
          <div className="wf-annot-title">Callouts</div>
          <div className={twoColAnnot?'wf-annot-cols':''}>
            {annotations.map((a,i)=>(
              <div className="wf-annot-item" key={i}>
                <span className="wf-annot-num">{i+1}</span>
                <span className="wf-annot-tx" dangerouslySetInnerHTML={{__html:a}} />
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  </div>
);

/* section header */
const SectionHead = ({kicker, title, desc}) => (
  <div className="wf-section-head">
    <div className="wf-section-kicker">{kicker}</div>
    <h2 className="wf-section-title">{title}</h2>
    <p className="wf-section-desc">{desc}</p>
  </div>
);
const Note = ({children}) => <div className="wf-note">{children}</div>;

/* ---------- flow-chart atoms ---------- */
const FNode = ({type='proc', w, title, sub, className='', style={}}) =>
  <div className={'fl-node fl-'+type+(className?' '+className:'')} style={{width:w,...style}}><span>{title}{sub&&<span className="sub">{sub}</span>}</span></div>;
const FDec = ({title, w}) => <div className="fl-dec" style={{width:w}}><span>{title}</span></div>;
const FDown = ({label}) => <div className="fl-down"><span className="ln"/>{label&&<span className="fl-lbl">{label}</span>}{label&&<span className="ln"/>}<span className="ar"/></div>;
const FSplit = ({gap=30, children}) => <div className="fl-row" style={{gap}}>{children}</div>;
const FLane = ({align='center', style={}, children}) => <div className="fl-col" style={{alignItems:align,...style}}>{children}</div>;
const FlowCard = ({tag, title, caption, children}) => (
  <div className="fl-card">
    {tag&&<div className="fl-tag">{tag}</div>}
    <h4>{title}</h4>
    {caption&&<p className="cap">{caption}</p>}
    <div className="fl-wrap"><div className="fl-col">{children}</div></div>
  </div>
);
/* matrix cell helpers */
const MxCheck = () => <span className="mx-check">✓</span>;
const MxDash = () => <span className="mx-dash">—</span>;
const MxNote = ({children}) => <span className="mx-note">{children}</span>;

Object.assign(window, {
  Row, Col, Pad, Line, Lines, Label, H, Box, Btn, Dot, Pill, Chip, Mark,
  Donut, Spark, Wave, Gauge, Ring, Bars, MapBox,
  Browser, Win, Plain, Phone,
  Sidebar, FTabs, Seg, Stepper, Table, TopBar, KPI,
  Screen, SectionHead, Note, STATUS,
  FNode, FDec, FDown, FSplit, FLane, FlowCard, MxCheck, MxDash, MxNote
});