/* global React, ReactDOM, SF, ArchMap, SF_APPS */
const { useState, useCallback, useRef } = React;

const LIVE_IDS = new Set(['gw','cg','cs','cw','db']);

// Scope panel — rendered in the dock like a regular panel
function ScopePanel({ id, openIds, onClose, onOpenPanel }) {
  const s = SF.systems[id];
  const isOpen = openIds.includes(id);
  const isLive = LIVE_IDS.has(id);

  function handleOpen() {
    onOpenPanel(id);
    onClose();
  }

  return (
    <div className="panel" style={{ '--c': s.cssC }}>
      {/* chrome header — same style as other panels */}
      <div className="panel-chrome" style={{ '--c': s.cssC }}>
        <div className="pc-icon"><SF.Icon name={s.icon} /></div>
        <div className="pc-title">
          <b>{s.name} · 工作範疇</b>
          <span>{s.scopeDesc}</span>
        </div>
        <div className="sp" />
        <button className="pc-btn" title="關閉" onClick={onClose}>
          <SF.Icon name="x" />
        </button>
      </div>

      {/* scope content */}
      <div className="panel-screen" style={{ padding:'14px 16px', overflowY:'auto' }}>
        <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
          {(s.actions || []).map(group => (
            <div key={group.g}>
              <div style={{
                fontSize:9.5, fontWeight:800, letterSpacing:'.9px',
                color:'var(--ink-4)', textTransform:'uppercase', marginBottom:7,
              }}>{group.g}</div>
              <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
                {group.items.map(item => (
                  <div key={item} style={{
                    display:'flex', alignItems:'center', gap:8,
                    padding:'7px 11px', borderRadius:9,
                    background:'var(--surface-2)', border:'1px solid var(--line-2)',
                    fontSize:12, fontWeight:600, color:'var(--ink-2)',
                  }}>
                    <span style={{
                      flex:'0 0 5px', height:5, borderRadius:'50%',
                      background: s.cssC, display:'inline-block',
                    }} />
                    {item}
                  </div>
                ))}
              </div>
            </div>
          ))}

          {/* open button */}
          <div style={{ paddingTop:4 }}>
            {isLive ? (
              <button
                onClick={handleOpen}
                style={{
                  width:'100%', padding:'10px', borderRadius:10,
                  background: isOpen ? 'var(--gw-tint)' : s.cssC,
                  color: isOpen ? 'var(--gw)' : '#fff',
                  border: isOpen ? '1.5px solid var(--gw)' : 'none',
                  fontWeight:700, fontSize:13, cursor:'pointer',
                  transition:'opacity .15s',
                }}
              >{isOpen ? '✓ 面板已開啟' : '開啟系統面板'}</button>
            ) : (
              <div style={{
                width:'100%', padding:'10px', borderRadius:10, textAlign:'center',
                background:'var(--line)', color:'var(--ink-3)',
                fontWeight:700, fontSize:13,
              }}>即將上線</div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

function Panel({ id, onClose, toast }) {
  const s = SF.systems[id];
  const App = SF_APPS[id];
  return (
    <div className="panel">
      <div className="panel-chrome" style={{ '--c': s.cssC }}>
        <div className="pc-icon"><SF.Icon name={s.icon} /></div>
        <div className="pc-title"><b>{s.name}</b><span>{s.host}</span></div>
        <div className="sp" />
        <button className="pc-btn" title="關閉" onClick={onClose}>
          <SF.Icon name="x" />
        </button>
      </div>
      <div className="panel-screen">
        <App toast={toast} />
      </div>
    </div>
  );
}

function App() {
  const [layoutId, setLayoutId] = useState('lane');
  const [openIds, setOpenIds] = useState([]);
  const [scopeId, setScopeId] = useState(null);
  const [hoverNode, setHoverNode] = useState(null);
  const [toastMsg, setToastMsg] = useState(null);
  const toastTimer = useRef(null);

  const toast = useCallback((msg) => {
    setToastMsg(msg);
    clearTimeout(toastTimer.current);
    toastTimer.current = setTimeout(() => setToastMsg(null), 2400);
  }, []);

  const handleNodeClick = useCallback((id) => {
    setScopeId(prev => prev === id ? null : id);
  }, []);

  const openPanel = useCallback((id) => {
    setOpenIds(prev => prev.includes(id) ? prev : [...prev, id]);
  }, []);

  const closePanel = useCallback((id) => {
    setOpenIds(prev => prev.filter(x => x !== id));
  }, []);

  const layout = SF.layouts[layoutId];
  const dockEmpty = !scopeId && openIds.length === 0;

  return (
    <div className="app">
      {/* Topbar */}
      <div className="topbar">
        <div className="brand-mark">
          <div className="brand-logo">S</div>
          <div className="brand-text">
            <b>SOULFREE ERP</b>
            <span>系統架構地圖</span>
          </div>
        </div>

        <div className="seg" style={{ marginLeft: 6 }}>
          {Object.values(SF.layouts).map(l => (
            <button key={l.id} className={layoutId === l.id ? 'on' : ''} onClick={() => setLayoutId(l.id)}>
              <SF.Icon name={l.icon} className="ic" />
              {l.name}
            </button>
          ))}
        </div>

        <span style={{
          fontSize:11, fontWeight:600, color:'var(--ink-4)',
          paddingLeft:4, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap',
          maxWidth:300,
        }}>
          {layout.caption}
        </span>

        <div className="topbar-spacer" />

        {(scopeId || openIds.length > 0) && (
          <button className="tb-btn" onClick={() => { setOpenIds([]); setScopeId(null); }}>
            <SF.Icon name="x" /> 關閉全部
          </button>
        )}
        <button className="tb-btn" onClick={() => setOpenIds(['gw','cg','cs','cw'])} title="同時開啟四大系統比較">
          <SF.Icon name="layers" /> 全部展開
        </button>
      </div>

      {/* Body */}
      <div className="body">
        <div className="stage">
          <div className="stage-grid" />
          <ArchMap
            layoutId={layoutId}
            openIds={openIds}
            onToggle={handleNodeClick}
            hoverNode={hoverNode}
            setHoverNode={setHoverNode}
          />

          {/* Legend */}
          <div className="legend">
            <h4>連線圖例</h4>
            <div className="legend-row">
              <span className="sw" style={{ borderColor:'var(--gw)' }} />
              主流程 · 帶編號 ①–④
            </div>
            <div className="legend-row">
              <span className="sw" style={{ borderColor:'var(--cs)', borderStyle:'dashed' }} />
              回報 / 回寫通道
            </div>
            <div className="legend-row">
              <span className="sw" style={{ borderColor:'var(--db)', borderTopWidth:2, borderStyle:'dotted' }} />
              待辦中樞推送
            </div>
            <div className="legend-row">
              <span className="sw" style={{ borderColor:'#64748B', borderTopWidth:1.5, borderStyle:'dashed' }} />
              資訊彙入 ERP（規劃中）
            </div>
          </div>

          <div className="hint">
            <SF.Icon name="target" style={{ width:14, height:14 }} />
            點節點查看工作範疇 · 從範疇面板開啟系統 · 可同時對照多個系統
          </div>

          <div className={'toast' + (toastMsg ? ' show' : '')}>
            <SF.Icon name="check" /> {toastMsg}
          </div>
        </div>

        {/* Dock */}
        <div className={'dock' + (dockEmpty ? ' empty' : '')}>
          {scopeId && (
            <ScopePanel
              key={'scope-' + scopeId}
              id={scopeId}
              openIds={openIds}
              onClose={() => setScopeId(null)}
              onOpenPanel={openPanel}
            />
          )}
          {openIds.map(id => (
            <Panel key={id} id={id} onClose={() => closePanel(id)} toast={toast} />
          ))}
        </div>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);