/* global React, SF */
// ============================================================
// apps.jsx — panel content for each system
// cm  客戶管理: coming soon
// dm  設計管理: coming soon
// gw  工務: iframe → app.soulfree.life
// cg  採購: external link → procurement.soulfree.life
// cs  廠商: iframe → app.soulfree.life
// cw  財務: iframe → fa.soulfree.life
// db  待辦: iframe → todo.soulfree.life
// ============================================================
const { useState, useRef } = React;
const Ic = SF.Icon;

// ---------- iframe wrapper (for todo only) ----------
function IframeApp({ sys, url }) {
  const [loaded, setLoaded] = useState(false);

  return (
    <div style={{ position:'absolute', inset:0, display:'flex', flexDirection:'column' }}>
      {!loaded && (
        <div className="iframe-loading">
          <div className="spinner" style={{ borderTopColor: sys.cssC }} />
          載入 {sys.name}…
        </div>
      )}
      <iframe
        src={url}
        style={{ position:'absolute', inset:0, border:'none', width:'100%', height:'100%',
                 display: loaded ? 'block' : 'none' }}
        onLoad={() => setLoaded(true)}
        allow="camera"
      />
    </div>
  );
}

// ---------- external link card ----------
function ExternalApp({ sys, href, desc, btnLabel }) {
  return (
    <div className="ext-card" style={{ '--c': sys.cssC }}>
      <div className="ext-logo">{sys.name[0]}</div>
      <div className="ext-title">{sys.name}</div>
      <div className="ext-host">{sys.host}</div>
      <div className="ext-desc">{desc}</div>
      <a className="ext-link" href={href} target="_blank" rel="noreferrer">
        <Ic name="ext" style={{ width:15, height:15 }} />
        {btnLabel}
      </a>
    </div>
  );
}

// ---------- coming soon placeholder ----------
function ComingSoonApp({ sys }) {
  return (
    <div className="ext-card" style={{ '--c': sys.cssC }}>
      <div className="ext-logo">{sys.name[0]}</div>
      <div className="ext-title">{sys.name}</div>
      <div className="ext-host">{sys.host}</div>
      <div className="ext-desc">此系統正在開發中，即將上線。</div>
      <div style={{
        display:'inline-flex', alignItems:'center', gap:6, padding:'10px 18px',
        borderRadius:'var(--r-sm)', background:'var(--line)', color:'var(--ink-3)',
        fontWeight:700, fontSize:13,
      }}>即將上線</div>
    </div>
  );
}

// ---------- exports ----------
window.SF_APPS = {
  cm: () => <ComingSoonApp sys={SF.systems.cm} />,
  dm: () => <ComingSoonApp sys={SF.systems.dm} />,
  gw: () => <IframeApp sys={SF.systems.gw} url="https://app.soulfree.life" />,
  cg: () => (
    <ExternalApp
      sys={SF.systems.cg}
      href="https://procurement.soulfree.life"
      desc="詢比價、發包合約、採購單管理。請在新分頁登入使用。"
      btnLabel="開啟採購系統"
    />
  ),
  cs: () => <IframeApp sys={SF.systems.cs} url="https://app.soulfree.life" />,
  cw: () => <IframeApp sys={SF.systems.cw} url="https://fa.soulfree.life" />,
  db: () => <IframeApp sys={SF.systems.db} url="https://todo.soulfree.life" />,
  erp: () => <ComingSoonApp sys={SF.systems.erp} />,
};