/* global React */
// ============================================================
// SOULFREE ERP — data model + icon set
// Exposes window.SF = { systems, edges, layouts, Icon, PATHS }
// ============================================================

const PATHS = {
  crane: '<path d="M4 21h16M6 21V5l11-1M6 9h11M9 5v4M17 4v6m0 0l4 2-4 2m4-4l-4 2"/><circle cx="9" cy="13" r="0"/><path d="M14 9v3l-2 2"/>',
  cart: '<circle cx="9" cy="20" r="1.4"/><circle cx="17" cy="20" r="1.4"/><path d="M2.5 3.5h2.2l2.1 11.2a1.5 1.5 0 0 0 1.5 1.2h8.4a1.5 1.5 0 0 0 1.5-1.2l1.3-6.7H6"/>',
  wallet: '<path d="M3 7.5A2.5 2.5 0 0 1 5.5 5H18a1 1 0 0 1 1 1v1.5"/><path d="M3 7.5V18a2 2 0 0 0 2 2h14a1 1 0 0 0 1-1v-3"/><path d="M21 11h-5a2 2 0 0 0 0 5h5a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1Z"/><circle cx="16.5" cy="13.5" r=".8" fill="currentColor" stroke="none"/>',
  store: '<path d="M4 9.5V19a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V9.5"/><path d="M3 9.5 4.6 4.6A1 1 0 0 1 5.55 4h12.9a1 1 0 0 1 .95.6L21 9.5a2.2 2.2 0 0 1-4 1.3 2.2 2.2 0 0 1-3.6 0 2.2 2.2 0 0 1-3.6 0 2.2 2.2 0 0 1-3.6 0A2.2 2.2 0 0 1 3 9.5Z"/><path d="M9 20v-4.5h4V20"/>',
  hub: '<path d="M12 2v3m0 14v3M2 12h3m14 0h3M5 5l2 2m10 10 2 2M19 5l-2 2M7 17l-2 2"/><circle cx="12" cy="12" r="3.4"/>',
  bell: '<path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/>',
  checks: '<path d="m3 12 3 3 5-6M3 18l3 3 9-11"/><path d="M14 7h7M16 12h5M18 17h3"/>',
  search: '<circle cx="11" cy="11" r="7"/><path d="m20 20-3-3"/>',
  x: '<path d="M6 6l12 12M18 6 6 18"/>',
  plus: '<path d="M12 5v14M5 12h14"/>',
  check: '<path d="M5 12.5 9.5 17 19 6.5"/>',
  arrow: '<path d="M5 12h14M13 6l6 6-6 6"/>',
  chevron: '<path d="m9 6 6 6-6 6"/>',
  chevdown: '<path d="m6 9 6 6 6-6"/>',
  ext: '<path d="M14 5h5v5M19 5l-8 8M19 13.5V18a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h4.5"/>',
  clock: '<circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/>',
  bolt: '<path d="M13 2 4 14h7l-1 8 9-12h-7l1-8Z"/>',
  photo: '<rect x="3" y="4" width="18" height="16" rx="2.5"/><circle cx="8.5" cy="9.5" r="1.8"/><path d="m4 18 5-5 4 3 3-3 4 4"/>',
  doc: '<path d="M7 3h7l5 5v12a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z"/><path d="M14 3v5h5M9 13h6M9 17h6"/>',
  alert: '<path d="M12 3 2 20h20L12 3Z"/><path d="M12 9.5v4M12 17h.01"/>',
  coins: '<ellipse cx="9" cy="7" rx="6" ry="3"/><path d="M3 7v5c0 1.66 2.7 3 6 3"/><path d="M3 12v5c0 1.66 2.7 3 6 3"/><ellipse cx="16" cy="14" rx="5" ry="2.6"/><path d="M11 14v5c0 1.5 2.24 2.6 5 2.6s5-1.16 5-2.6v-5"/>',
  user: '<circle cx="12" cy="8" r="3.6"/><path d="M5 20c0-3.6 3.13-6 7-6s7 2.4 7 6"/>',
  pin: '<rect x="4" y="10" width="16" height="11" rx="2.5"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/><circle cx="12" cy="15.5" r="1.4"/>',
  list: '<path d="M8 6h13M8 12h13M8 18h13M3.5 6h.01M3.5 12h.01M3.5 18h.01"/>',
  msg: '<path d="M4 5h16a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H9l-4 4v-4H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z"/>',
  hammer: '<path d="m14 7 3 3-8.5 8.5a2.1 2.1 0 0 1-3-3L14 7Z"/><path d="m13 6 4-4 5 5-4 4M13 6l4 4"/>',
  flag: '<path d="M5 21V4m0 0 8-1 6 2-2 4 2 4-6-1.5L5 14"/>',
  calendar: '<rect x="3.5" y="5" width="17" height="16" rx="2.5"/><path d="M3.5 10h17M8 3v4M16 3v4"/>',
  truck: '<path d="M3 6h11v9H3zM14 9h4l3 3v3h-7"/><circle cx="7" cy="18" r="1.6"/><circle cx="17.5" cy="18" r="1.6"/>',
  shield: '<path d="M12 3 5 6v5c0 4.5 3 8 7 10 4-2 7-5.5 7-10V6l-7-3Z"/><path d="m9 12 2 2 4-4"/>',
  link: '<path d="M9.5 14.5 14.5 9.5M8 12 5.8 14.2a3.1 3.1 0 0 0 4.4 4.4L12 16.4M16 12l2.2-2.2a3.1 3.1 0 0 0-4.4-4.4L12 7.6"/>',
  building: '<rect x="5" y="3" width="14" height="18" rx="1.5"/><path d="M9 7h.01M12 7h.01M15 7h.01M9 11h.01M12 11h.01M15 11h.01M9 15h.01M15 15h.01M11 21v-3.5h2V21"/>',
  filter: '<path d="M3 5h18l-7 8v6l-4-2v-4L3 5Z"/>',
  layers: '<path d="m12 3 9 5-9 5-9-5 9-5Z"/><path d="m3 13 9 5 9-5M3 16.5l9 5 9-5"/>',
  flow: '<rect x="3" y="4" width="6" height="6" rx="1.5"/><rect x="15" y="4" width="6" height="6" rx="1.5"/><rect x="9" y="14" width="6" height="6" rx="1.5"/><path d="M9 7h6M6 10v2.5A1.5 1.5 0 0 0 7.5 14H9m6-4v2.5a1.5 1.5 0 0 1-1.5 1.5H12"/>',
  target: '<circle cx="12" cy="12" r="8.5"/><circle cx="12" cy="12" r="4.5"/><circle cx="12" cy="12" r=".8" fill="currentColor" stroke="none"/>',
};

function Icon({ name, style, className }) {
  return React.createElement('svg', {
    viewBox: '0 0 24 24', width: 24, height: 24,
    fill: 'none', stroke: 'currentColor', strokeWidth: 1.8,
    strokeLinecap: 'round', strokeLinejoin: 'round',
    style, className,
    dangerouslySetInnerHTML: { __html: PATHS[name] || '' },
  });
}

// ---------- Systems ----------
const systems = {
  cm: {
    id:'cm', name:'客戶管理', host:'crm.soulfree.life', icon:'user',
    cssC:'#C026D3', tint:'#F8E8FB', soft:'#FCF4FD', tone:'m',
    roles:['業主','業務'], desc:'合約、收款與工程記錄',
    scopeDesc:'業主關係、合約、收款與工程記錄',
    actions:[
      { g:'合約管理', items:['設計合約','營造合約','房屋買賣合約（預售屋 / 新成屋）'] },
      { g:'款項追蹤', items:['期款時程與收款狀態','追加 / 追減單管理'] },
      { g:'工程記錄', items:['工程大事紀（關鍵節點時間軸）','工程照片時間軸'] },
      { g:'溝通記錄', items:['與客戶往來討論記錄'] },
      { g:'串接', items:['設計需求 → 設計管理系統','缺失/變更 → 工務系統','收款確認 → 財務系統'] },
    ],
  },
  dm: {
    id:'dm', name:'設計管理', host:'design.soulfree.life', icon:'doc',
    cssC:'#0D9488', tint:'#E0F5F3', soft:'#F0FAFA', tone:'t',
    roles:['設計師','業主'], desc:'圖說管理與工程算量',
    scopeDesc:'設計圖說、算量與討論記錄管理',
    actions:[
      { g:'圖說管理', items:['建照圖 / 結構圖 / 機電圖','室裝圖 / 綠化圖 / 廚具圖','版本控制（核准版 / 修改版）'] },
      { g:'工程算量', items:['依圖說自動 / 手動算量'] },
      { g:'變更管理', items:['設計變更單發出與追蹤'] },
      { g:'討論記錄', items:['與客戶所有圖說確認與修改意見'] },
      { g:'串接', items:['施工圖確認 → 工務系統（開始派工）','材料規格確認 → 採購系統（詢比價）'] },
    ],
  },
  gw: {
    id:'gw', name:'工務系統', host:'app.soulfree.life', icon:'crane',
    cssC:'var(--gw)', tint:'var(--gw-tint)', soft:'var(--gw-soft)', tone:'g',
    roles:['主管','工務','工班'], desc:'現場工程派工、缺失與驗收',
    scopeDesc:'現場工程派工、缺失與驗收管理',
    actions:[
      { g:'派工管理', items:['建立 / 指派工地派工單','追蹤工班到場與進度'] },
      { g:'品質管理', items:['記錄工地缺失，拍照上傳','執行現場驗收，標記通過 / 退回'] },
      { g:'串接', items:['發出叫貨需求 → 採購系統','驗收核准後解鎖廠商請款 → 財務系統'] },
    ],
  },
  cg: {
    id:'cg', name:'採購系統', host:'procurement.soulfree.life', icon:'cart',
    cssC:'var(--cg)', tint:'var(--cg-tint)', soft:'var(--cg-soft)', tone:'p',
    roles:['採購人員'], desc:'詢比價、發包與採購單',
    scopeDesc:'詢比價、發包合約與採購單管理',
    actions:[
      { g:'詢比價', items:['接收工地叫貨需求，帶出料號與數量','建立詢價單，發送廠商比價','三家比價彙整與評選'] },
      { g:'發包', items:['開立發包合約、採購單','推送合約通知給廠商'] },
    ],
  },
  cs: {
    id:'cs', name:'廠商入口', host:'app.soulfree.life · 廠商', icon:'store',
    cssC:'var(--cs)', tint:'var(--cs-tint)', soft:'var(--cs-soft)', tone:'b',
    roles:['建材供應商','分包工班'], desc:'廠商接案、回報與請款',
    scopeDesc:'廠商接案、報價回填與請款管理',
    actions:[
      { g:'接案', items:['接收分包合約與詢價單','回填報價（即時回到採購）'] },
      { g:'請款', items:['完工拍照上傳、填寫施作說明','上傳發票，送出請款申請','查看審核進度與匯款狀態'] },
    ],
  },
  cw: {
    id:'cw', name:'財務系統', host:'fa.soulfree.life', icon:'wallet',
    cssC:'var(--cw)', tint:'var(--cw-tint)', soft:'var(--cw-soft)', tone:'o',
    roles:['會計','CEO'], desc:'請款審核、簽核與匯款',
    scopeDesc:'請款審核、簽核與銀行匯款',
    actions:[
      { g:'審核流程', items:['接收廠商請款申請','採購核對（金額 / 合約比對）','會計審核','CEO 電子簽核'] },
      { g:'付款', items:['執行銀行匯款','沖帳完成，回寫廠商請款狀態'] },
    ],
  },
  db: {
    id:'db', name:'待辦管理', host:'todo.soulfree.life', icon:'hub',
    cssC:'var(--db)', tint:'var(--db-tint)', soft:'var(--db-soft)', tone:'r',
    roles:['全員'], desc:'跨系統任務與通知聚合', hub:true,
    scopeDesc:'跨系統待辦任務與通知聚合中樞',
    actions:[
      { g:'任務管理', items:['彙整全系統待辦（派工/比價/驗收/簽核）','任務指派與追蹤','排程管理（工序時間軸）','封存已完成任務'] },
      { g:'通知', items:['逾期與待處理即時推送'] },
    ],
  },
  erp: {
    id:'erp', name:'ERP 中央系統', host:'erp.soulfree.life', icon:'layers',
    cssC:'#64748B', tint:'#F1F5F9', soft:'#F8FAFC', tone:'e',
    roles:['管理者'], desc:'統一入口 · 各系統資訊彙整',
    scopeDesc:'各子系統核心資訊統一彙整至中央管理平台',
    future: true,
    actions:[
      { g:'從子系統彙入', items:[
        '客戶管理 → 建案清單・合約金額・收款進度',
        '設計管理 → 圖說版本狀態・算量數據',
        '工務系統 → 施工進度（%）・缺失統計',
        '採購系統 → 採購金額・發包狀態・vs 預算',
        '廠商入口 → 廠商履約狀態・待審請款金額',
        '財務系統 → 現金流・已付 / 待付・待簽核清單',
        '待辦管理 → 跨系統逾期任務・即時通知',
      ]},
      { g:'提供功能', items:[
        '統一登入（SSO — 免重複登入各系統）',
        '全局儀表板（建案 / 財務 / 採購即時狀態）',
        '老闆看板（CEO 決策用數字彙整）',
        '跨系統搜尋',
        '系統架構地圖（即 process.soulfree.life）',
      ]},
    ],
  },
};

const orderMain = ['cm','dm','gw','cg','cs','cw'];

// ---------- Edges ----------
const edges = [
  // main flow
  { id:'e1', from:'gw', to:'cg', tone:'g', num:1, kind:'flow', label:'發採購 / 叫貨需求',
    pass:'工地把缺料、叫貨需求送進採購，自動帶出料號與數量。' },
  { id:'e2', from:'gw', to:'cw', tone:'g', num:2, kind:'flow', label:'驗收核准 → 解鎖請款',
    pass:'工務驗收通過後，財務端才會解鎖該筆的廠商請款。' },
  { id:'e3', from:'cg', to:'cs', tone:'p', num:3, kind:'flow', label:'發包合約 / 通知詢價',
    pass:'採購把比價結果發包給廠商，並推送分包合約與詢價單。' },
  { id:'er1', from:'cs', to:'cg', tone:'b', num:null, kind:'return', label:'回報報價 / 比價',
    pass:'廠商在入口回填報價，三家比價即時回到採購待處理。' },
  { id:'e4', from:'cs', to:'cw', tone:'b', num:4, kind:'flow', label:'廠商申請請款',
    pass:'廠商完工拍照、上傳發票後送出請款，進入財務審核流程。' },
  { id:'er2', from:'cw', to:'cs', tone:'o', num:5, kind:'return', label:'審核完成 → 匯款',
    pass:'會計與 CEO 簽核後匯款，沖帳結果回寫廠商請款狀態。' },
  // design management edges
  { id:'ed1', from:'dm', to:'gw', tone:'t', num:null, kind:'flow', label:'施工圖確認 → 派工',
    pass:'設計確認施工圖後，工務系統開立派工單，工班進場施工。' },
  { id:'ed2', from:'dm', to:'cg', tone:'t', num:null, kind:'flow', label:'材料規格 → 採購',
    pass:'設計確認材料規格後，採購系統開始詢比價作業。' },
  // customer management edges
  { id:'ec1', from:'cm', to:'dm', tone:'m', num:null, kind:'flow', label:'設計需求 / 合約',
    pass:'業主確認設計需求後，設計系統開始進行圖說管理與版本控制。' },
  { id:'ec2', from:'cm', to:'cw', tone:'m', num:null, kind:'flow', label:'收款確認',
    pass:'業主完成期款後，財務系統記錄收款並更新合約付款進度。' },
  { id:'ec3', from:'cm', to:'gw', tone:'m', num:null, kind:'return', label:'缺失 / 變更回報',
    pass:'業主回報工程缺失或設計變更，工務系統建立缺失單處理。' },
  // hub spokes
  { id:'h1', from:'db', to:'gw', tone:'r', num:null, kind:'hub', label:'待驗收 · 缺失提醒',
    pass:'待辦把待驗收、缺失通知即時推給工務主管。' },
  { id:'h2', from:'db', to:'cg', tone:'r', num:null, kind:'hub', label:'待比價 · 待下單',
    pass:'採購的待處理詢價、需老闆確認事項集中在待辦。' },
  { id:'h3', from:'db', to:'cs', tone:'r', num:null, kind:'hub', label:'派工 · 到貨待辦',
    pass:'廠商端的派工、到貨確認與簽約提醒由待辦驅動。' },
  { id:'h4', from:'db', to:'cw', tone:'r', num:null, kind:'hub', label:'待簽核 · 待匯款',
    pass:'CEO 簽核、待匯款清單每日彙整到待辦看板。' },
  { id:'h5', from:'db', to:'dm', tone:'r', num:null, kind:'hub', label:'設計待確認',
    pass:'設計版本待確認、變更單待處理等通知由待辦推送。' },
  { id:'h6', from:'db', to:'cm', tone:'r', num:null, kind:'hub', label:'待回簽 · 收款提醒',
    pass:'合約待業主回簽、期款到期提醒由待辦中樞管理。' },
  // ERP sync (illustrative — future architecture)
  { id:'xe_cm', from:'cm', to:'erp', tone:'e', kind:'erp', label:'合約 · 收款' },
  { id:'xe_dm', from:'dm', to:'erp', tone:'e', kind:'erp', label:'圖說 · 算量' },
  { id:'xe_gw', from:'gw', to:'erp', tone:'e', kind:'erp', label:'進度 · 缺失' },
  { id:'xe_cg', from:'cg', to:'erp', tone:'e', kind:'erp', label:'採購 · 發包' },
  { id:'xe_cs', from:'cs', to:'erp', tone:'e', kind:'erp', label:'履約 · 請款' },
  { id:'xe_cw', from:'cw', to:'erp', tone:'e', kind:'erp', label:'現金流 · 簽核' },
  { id:'xe_db', from:'db', to:'erp', tone:'e', kind:'erp', label:'任務 · 通知' },
];

// ---------- Layouts ----------
const layouts = {
  pipeline: {
    id:'pipeline', name:'流程管線', icon:'flow',
    caption:'依「客戶→設計→工務→採購→廠商→財務」由左到右完整串接',
    lanes:[],
    pos:{
      erp:{x:0.90,y:0.08},
      cm:{x:0.06,y:0.22}, dm:{x:0.06,y:0.68},
      db:{x:0.50,y:0.10},
      gw:{x:0.28,y:0.43}, cg:{x:0.52,y:0.43},
      cs:{x:0.72,y:0.66}, cw:{x:0.90,y:0.43},
    },
    bend:{ e1:0.2, e2:0.45, e3:0.45, er1:0.45, e4:0.42, er2:0.42,
           ed1:0.28, ed2:0.32, ec1:0.15, ec2:-0.38, ec3:0.22,
           xe_cm:-0.18, xe_dm:-0.22, xe_db:-0.15, xe_gw:-0.12,
           xe_cg:-0.10, xe_cw:0.05, xe_cs:-0.15 },
  },
  hub: {
    id:'hub', name:'中樞放射', icon:'target',
    caption:'以「待辦管理」為通知中樞，六大系統環狀運轉、循環交付',
    center:'db',
    pos:{
      erp:{x:0.84,y:0.08},
      db:{x:0.50,y:0.50},
      dm:{x:0.50,y:0.10}, cm:{x:0.15,y:0.30},
      gw:{x:0.85,y:0.30}, cg:{x:0.85,y:0.70},
      cw:{x:0.15,y:0.70}, cs:{x:0.50,y:0.90},
    },
    bend:{ e1:-0.28, e3:-0.5, e4:-0.5, e2:0.32, er1:-0.5, er2:-0.5,
           ed1:-0.3, ed2:-0.3, ec1:-0.25, ec2:0.28, ec3:-0.22,
           xe_db:0.18, xe_cm:0.12, xe_dm:0.08, xe_gw:0.05,
           xe_cg:-0.12, xe_cw:0.15, xe_cs:-0.18 },
  },
  lane: {
    id:'lane', name:'泳道分層', icon:'layers',
    caption:'業主→設計→工務→採購→財務→廠商，待辦居左貫穿',
    lanes:[
      { label:'中央彙整（規劃中）', y0:0.00, y1:0.21, tone:'e' },
      { label:'業主', y0:0.22, y1:0.37, tone:'m' },
      { label:'內部團隊', y0:0.38, y1:0.80, tone:'n' },
      { label:'外部廠商', y0:0.81, y1:0.97, tone:'b' },
    ],
    pos:{
      erp:{x:0.50,y:0.11},
      cm:{x:0.32,y:0.30},
      db:{x:0.07,y:0.58},
      dm:{x:0.21,y:0.50}, gw:{x:0.61,y:0.50},
      cg:{x:0.41,y:0.67}, cw:{x:0.83,y:0.65},
      cs:{x:0.65,y:0.88},
    },
    bend:{ e1:-0.28, e2:-0.42, e3:0.38, er1:0.40, e4:0.35, er2:0.35,
           ed1:0.15, ed2:0.28, ec1:0.18, ec2:-0.32, ec3:-0.22,
           xe_cm:0.10, xe_dm:-0.14, xe_gw:-0.08, xe_db:-0.20,
           xe_cg:-0.08, xe_cw:0.12, xe_cs:0.18 },
    labelDy:{ er2:-20, er1:20 },
  },
};

window.SF = { systems, orderMain, edges, layouts, Icon, PATHS };