// Shared atoms + app chrome for ケミコDX
const { useState } = React;

const Btn = ({ kind='pri', size, block, icon, children, ...p }) => (
  <button className={`cx-btn ${kind}${size?' '+size:''}${block?' block':''}`} {...p}>
    {icon && <CXIcon name={icon} size={size==='sm'?14:16} />}{children}
  </button>
);

const Chip = ({ tone='muted', dot, children }) => (
  <span className={`cx-chip ${tone}`}>{dot && <span className="dot" style={{background:'currentColor'}}/>}{children}</span>
);

// status → chip tone
const STATUS_TONE = {
  '施工中':'primary', '準備中':'muted', '集計中':'warn', '完了':'ok',
  'live':'ok', 'beta':'warn', 'soon':'muted',
};
const STATUS_LABEL = { live:'利用可能', beta:'β版', soon:'準備中' };

const Stat = ({ lab, icon, val, unit, delta, up }) => (
  <div className="cx-stat">
    <div className="lab"><span className="ic"><CXIcon name={icon} size={15}/></span>{lab}</div>
    <div className="val">{val}{unit && <small>{unit}</small>}</div>
    {delta && <div className={`delta ${up?'up':'down'}`}><CXIcon name={up?'arrowUp':'arrowDown'} size={12}/>{delta}</div>}
  </div>
);

const AppHeader = ({ theme, onHome, onLogout, onOpenSearch }) => {
  const u = CXDATA.user;
  return (
    <header className="cx-header">
      <div className="brand" onClick={onHome}>
        <img src={window.__resources?.markIcon || "img/chemico-mark.svg"} width="30" height="30" alt="" style={{borderRadius:8}}/>
        <b>ケミコプラットフォーム</b>
        {theme && <><span className="sep"/><span className="theme">{theme}</span></>}
      </div>
      <div className="spacer"/>
      <div className="cx-search" onClick={onOpenSearch} style={{cursor:'pointer'}}>
        <CXIcon name="search" size={15} color="#989898"/>
        <input placeholder="プラットフォーム内を検索" readOnly style={{cursor:'pointer'}}/>
      </div>
      <button className="cx-icon-btn"><CXIcon name="bell" size={18}/><span className="dotbadge"/></button>
      <button className="cx-icon-btn" onClick={onHome} title="ホーム"><CXIcon name="home" size={18}/></button>
      <button className="cx-icon-btn" onClick={onLogout} title="ログアウト"><CXIcon name="logout" size={18}/></button>
      <div className="cx-avatar" title={u.name}>{u.initial}</div>
    </header>
  );
};

const PageHeader = ({ crumb, title, onBack, actions }) => (
  <div className="cx-page-h">
    {onBack && <button className="cx-icon-btn back" onClick={onBack}><CXIcon name="chevronLeft" size={20}/></button>}
    <div>
      {crumb && <div className="crumb">{crumb}</div>}
      <h1>{title}</h1>
    </div>
    {actions && <div className="ph-actions">{actions}</div>}
  </div>
);

const Toast = ({ msg, onDone }) => {
  React.useEffect(() => { const t = setTimeout(onDone, 2200); return () => clearTimeout(t); }, []);
  return <div className="cx-toast"><CXIcon name="checkCircle" size={16} color="#4dde91"/>{msg}</div>;
};

const Modal = ({ title, body, danger, confirmLabel='OK', onClose }) => (
  <div className="cx-scrim" onClick={onClose}>
    <div className="cx-modal" onClick={e=>e.stopPropagation()}>
      <h3>{title}</h3>
      <p>{body}</p>
      <div className="acts">
        <Btn kind="sec" onClick={onClose}>キャンセル</Btn>
        <Btn kind={danger?'danger':'pri'} onClick={onClose}>{confirmLabel}</Btn>
      </div>
    </div>
  </div>
);

// faux blueprint page (pile plan) for viewers
const BlueprintPage = ({ children }) => (
  <div className="cx-page">
    <svg viewBox="0 0 640 452" style={{width:'100%',height:'100%',position:'absolute',inset:0}} xmlns="http://www.w3.org/2000/svg">
      <rect width="640" height="452" fill="#fff"/>
      <g stroke="#d7dde5" strokeWidth="0.5">
        {Array.from({length:32}).map((_,i)=><line key={'v'+i} x1={i*20} y1="0" x2={i*20} y2="452"/>)}
        {Array.from({length:23}).map((_,i)=><line key={'h'+i} x1="0" y1={i*20} x2="640" y2={i*20}/>)}
      </g>
      <g stroke="#1f2937" strokeWidth="1" fill="none">
        <rect x="32" y="28" width="576" height="396"/>
        <rect x="440" y="350" width="168" height="74"/>
        <line x1="440" y1="375" x2="608" y2="375"/><line x1="520" y1="350" x2="520" y2="424"/>
      </g>
      {/* pile grid symbols */}
      <g fill="none" stroke="#0b57c4" strokeWidth="1.25">
        {Array.from({length:4}).map((_,r)=>Array.from({length:6}).map((_,c)=>(
          <circle key={r+'-'+c} cx={90+c*58} cy={90+r*60} r="11"/>
        )))}
      </g>
      <g fill="#656c87" fontFamily="ui-monospace,Menlo,monospace" fontSize="8">
        <text x="446" y="368">図面</text><text x="525" y="368">杭伏図 S-03</text>
        <text x="446" y="392">工事</text><text x="525" y="392">川崎区 護岸補強</text>
        <text x="446" y="414">縮尺</text><text x="525" y="414">1:200</text>
      </g>
    </svg>
    {children}
  </div>
);

Object.assign(window, { Btn, Chip, Stat, AppHeader, PageHeader, Toast, Modal, BlueprintPage, STATUS_TONE, STATUS_LABEL });