/* TolbNet · macOS app — Mantis tokens over macOS native conventions.
   Uses the macos-window starter for traffic lights, but builds a custom
   sidebar/toolbar/content layout so the inspector and menu bar work.
*/

/* ===== Inline SF Symbol-style glyphs (1.6 stroke) ===== */
function MI({ d, size = 14, stroked = true, fill = "currentColor", ...rest }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24"
         fill={stroked ? "none" : fill}
         stroke={stroked ? "currentColor" : "none"} strokeWidth={stroked ? 1.6 : 0}
         strokeLinecap="round" strokeLinejoin="round" {...rest}>
      {Array.isArray(d) ? d.map((p,i) => <path key={i} d={p}/>) : <path d={d}/>}
    </svg>
  );
}

const Glyph = {
  House:    (p) => <MI {...p} d={["M3 11l9-8 9 8","M5 10v10h14V10"]}/>,
  Chart:    (p) => <MI {...p} d={["M3 3v18h18","M7 15l4-4 3 3 5-6"]}/>,
  Doc:      (p) => <MI {...p} d={["M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z","M14 2v6h6"]}/>,
  Mail:     (p) => <MI {...p} d={["M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z","M22 6l-10 7L2 6"]}/>,
  Calendar: (p) => <MI {...p} d={["M19 4H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Z","M16 2v4","M8 2v4","M3 10h18"]}/>,
  Kanban:   (p) => <MI {...p} d={["M3 3h7v18H3z","M14 3h7v10h-7z","M14 16h7v5h-7z"]}/>,
  Person:   (p) => <MI {...p} d={["M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2","M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"]}/>,
  Card:     (p) => <MI {...p} d={["M20 5H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2Z","M2 11h20"]}/>,
  Star:     (p) => <MI {...p} d={["M12 2l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1 3-7Z"]}/>,
  Search:   (p) => <MI {...p} d={["M21 21l-4.3-4.3","M11 19a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z"]}/>,
  Plus:     (p) => <MI {...p} d={["M12 5v14","M5 12h14"]}/>,
  Share:    (p) => <MI {...p} d={["M12 16V4","M7 9l5-5 5 5","M5 20h14"]}/>,
  Filter:   (p) => <MI {...p} d={["M22 3H2l8 9v7l4 2v-9l8-9Z"]}/>,
  Sidebar:  (p) => <MI {...p} d={["M3 4h18a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1Z","M10 4v16"]}/>,
  Inspector:(p) => <MI {...p} d={["M3 4h18v16H3z","M15 4v16","M19 8h-2M19 12h-2M19 16h-2"]}/>,
  Back:     (p) => <MI {...p} d={["M15 18l-6-6 6-6"]}/>,
  Forward:  (p) => <MI {...p} d={["M9 18l6-6-6-6"]}/>,
  More:     (p) => <MI {...p} d={["M5 12h.01M12 12h.01M19 12h.01"]} stroked={false} fill="currentColor"/>,
  Down:     (p) => <MI {...p} d={["M6 9l6 6 6-6"]}/>,
};

/* ===== System menu bar ===== */
function MenuBar({ openMenu, setOpenMenu }) {
  const titles = ["File", "Edit", "View", "Window", "Help"];
  const fileMenu = (
    <div className="mac-menu" style={{left: 92}}>
      <div className="row"><span>New Window</span><span className="kbd">⌘N</span></div>
      <div className="row"><span>New Tab</span><span className="kbd">⌘T</span></div>
      <div className="row"><span>Open Recent</span><span className="kbd">▸</span></div>
      <hr/>
      <div className="row"><span>Close Window</span><span className="kbd">⌘W</span></div>
      <div className="row disabled"><span>Save</span><span className="kbd">⌘S</span></div>
      <div className="row"><span>Export as PDF…</span><span className="kbd">⇧⌘E</span></div>
      <hr/>
      <div className="row"><span>Print…</span><span className="kbd">⌘P</span></div>
    </div>
  );
  return (
    <>
      <div className="mac-menubar">
        <span className="apple"></span>
        <span className="app-name">TolbNet</span>
        {titles.map(t => (
          <span key={t} className={`item ${openMenu === t ? "open" : ""}`}
                onClick={() => setOpenMenu(openMenu === t ? null : t)}>
            {t}
          </span>
        ))}
        <span className="spacer"/>
        <div className="status">
          <span></span>
          <span>WiFi</span>
          <span>100% 🔋</span>
          <span>Fri 9:41 AM</span>
          <span>🔍</span>
        </div>
      </div>
      {openMenu === "File" && fileMenu}
    </>
  );
}

/* ===== Sparkline (shared from web kit shape) ===== */
function Sparkline({ data, color = "#1677ff", fill = "rgba(22,119,255,0.18)", w = 200, h = 36 }) {
  const max = Math.max(...data), min = Math.min(...data);
  const r = max - min || 1;
  const pts = data.map((v, i) => [(i/(data.length-1))*w, h - ((v-min)/r)*(h-4) - 2]);
  const line = pts.map((p,i)=>(i?"L":"M")+p[0].toFixed(1)+","+p[1].toFixed(1)).join(" ");
  const area = line + ` L${w},${h} L0,${h} Z`;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" style={{width:"100%",height:h,display:"block"}}>
      <path d={area} fill={fill}/>
      <path d={line} stroke={color} strokeWidth="1.6" fill="none"/>
    </svg>
  );
}

function BarSpark({ data, color = "#faad14", w = 200, h = 36 }) {
  const max = Math.max(...data);
  const bw = w / data.length;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" style={{width:"100%",height:h,display:"block"}}>
      {data.map((v, i) => (
        <rect key={i} x={i*bw + bw*0.15} y={h - (v/max)*h*0.9}
              width={bw*0.7} height={(v/max)*h*0.9} fill={color} rx="1"/>
      ))}
    </svg>
  );
}

/* ===== Sidebar ===== */
function Sidebar({ active, setActive }) {
  const nav = [
    { section: "TolbNet" },
    { id: "dashboard", label: "Dashboard",  icon: <Glyph.House size={14}/> },
    { id: "stats",     label: "Statistics", icon: <Glyph.Chart size={14}/> },
    { section: "Apps" },
    { id: "mail",      label: "Mail",       icon: <Glyph.Mail size={14}/>,     count: "12" },
    { id: "calendar",  label: "Calendar",   icon: <Glyph.Calendar size={14}/> },
    { id: "kanban",    label: "Kanban",     icon: <Glyph.Kanban size={14}/> },
    { id: "invoice",   label: "Invoices",   icon: <Glyph.Doc size={14}/>,      count: "896" },
    { section: "People" },
    { id: "customer",  label: "Customers",  icon: <Glyph.Person size={14}/> },
    { id: "starred",   label: "Starred",    icon: <Glyph.Star size={14}/> },
  ];
  return (
    <div className="mac-sb-content">
      {nav.map((it, i) => it.section ? (
        <div key={i} className="mac-sb-section">{it.section}</div>
      ) : (
        <div key={it.id}
             className={`mac-sb-item ${active === it.id ? "active" : ""}`}
             onClick={() => setActive(it.id)}>
          <span className="ic">{it.icon}</span>
          <span>{it.label}</span>
          {it.count && <span className="count">{it.count}</span>}
        </div>
      ))}
      <div style={{flex:1}}/>
      <div className="mac-support">
        <div className="t">Need help?</div>
        <div className="s">Get to resolve queries.</div>
        <button>Support</button>
      </div>
    </div>
  );
}

/* ===== Toolbar (NSToolbar style, merged with titlebar) ===== */
function Toolbar({ title, view, setView, onInspector, inspectorOpen }) {
  return (
    <div className="mac-toolbar">
      <div className="ti" title="Back"><Glyph.Back size={14}/></div>
      <div className="ti" title="Forward"><Glyph.Forward size={14}/></div>
      <div className="title">{title}</div>
      <div className="seg">
        <button className={view === "overview" ? "on" : ""} onClick={() => setView("overview")}>Overview</button>
        <button className={view === "transactions" ? "on" : ""} onClick={() => setView("transactions")}>Transactions</button>
        <button className={view === "reports" ? "on" : ""} onClick={() => setView("reports")}>Reports</button>
      </div>
      <div className="spacer"/>
      <div className="search">
        <Glyph.Search size={12}/>
        <span>Search</span>
      </div>
      <div className="ti" title="Filter"><Glyph.Filter size={14}/></div>
      <button className="share-btn"><Glyph.Share size={12}/> Share</button>
      <div className={`ti ${inspectorOpen ? "" : ""}`} title="Toggle inspector"
           style={inspectorOpen ? {background:"rgba(0,0,0,0.08)",color:"#1d1d1f"} : null}
           onClick={onInspector}>
        <Glyph.Inspector size={14}/>
      </div>
    </div>
  );
}

/* ===== Stat card ===== */
function StatCard({ label, value, delta, deltaDn, color = "#1677ff", kind, data }) {
  return (
    <div className="mac-stat">
      <div className="l">{label}</div>
      <div className="row">
        <div className="v">{value}</div>
        <span className={`trend ${deltaDn ? "dn" : ""}`}>
          {deltaDn ? "↘" : "↗"} {delta}
        </span>
      </div>
      <div className="spark">
        {kind === "bar"
          ? <BarSpark data={data} color={color}/>
          : <Sparkline data={data} color={color}
                       fill={color === "#f5222d" ? "rgba(245,34,45,.15)"
                            : color === "#52c41a" ? "rgba(82,196,26,.18)"
                            : color === "#faad14" ? "rgba(250,173,20,.2)"
                            : "rgba(22,119,255,.15)"}/>}
      </div>
    </div>
  );
}

/* ===== Hero ===== */
function Hero() {
  return (
    <div className="mac-hero">
      <div>
        <h2>Welcome to TolbNet</h2>
        <p>The purpose of a product update is to add new features, fix bugs or improve the performance of the product.</p>
        <button className="cta">View full statistic</button>
      </div>
      <div className="deco">
        <svg viewBox="0 0 200 120" fill="none" width="180" height="100">
          <g opacity=".55">
            <rect x="14" y="14" width="84" height="92" rx="6" fill="#fff" opacity=".18"/>
            <path d="M22 90 L40 64 L58 76 L76 50 L94 64" stroke="#fff" strokeWidth="2" fill="none"/>
          </g>
          <circle cx="150" cy="50" r="24" fill="#fff" opacity=".22"/>
          <circle cx="150" cy="50" r="14" fill="#fff" opacity=".32"/>
        </svg>
      </div>
    </div>
  );
}

/* ===== Recent activity rows ===== */
function ActivityList() {
  const rows = [
    { who: "Whole Foods",  what: "Groceries · 2:04 PM",       amount: "- $48.12",  up: false, color: "#34c759" },
    { who: "Apple Pay",    what: "iCloud+ · 11:32 AM",        amount: "- $9.99",   up: false, color: "#000" },
    { who: "Stripe",       what: "Invoice #2046",             amount: "+ $1,430",  up: true,  color: "#635bff" },
    { who: "Tesla",        what: "Supercharger · Mon",        amount: "- $22.40",  up: false, color: "#cc0000" },
    { who: "Vanguard",     what: "VTSAX dividend · Mon",      amount: "+ $312.85", up: true,  color: "#a40034" },
  ];
  return rows.map((r, i) => (
    <div key={i} style={{display:"flex",alignItems:"center",gap:12,padding:"10px 0",borderBottom:i<rows.length-1?"0.5px solid rgba(0,0,0,0.06)":"0"}}>
      <div style={{width:30,height:30,borderRadius:"50%",background:r.color,color:"#fff",display:"flex",alignItems:"center",justifyContent:"center",fontSize:13,fontWeight:600,flexShrink:0}}>{r.who[0]}</div>
      <div style={{flex:1,minWidth:0}}>
        <div style={{font:"500 13px/16px var(--mac-font)",color:"var(--mac-label)"}}>{r.who}</div>
        <div style={{font:"400 12px/16px var(--mac-font)",color:"var(--mac-label-2)"}}>{r.what}</div>
      </div>
      <div style={{font:"500 13px/16px var(--mac-font)",color: r.up ? "var(--color-success-7)" : "var(--color-error-7)"}}>{r.amount}</div>
    </div>
  ));
}

/* ===== Inspector ===== */
function Inspector() {
  return (
    <aside className="mac-inspector">
      <div>
        <h3>Selected item</h3>
        <div className="group">
          <div style={{display:"flex",alignItems:"center",gap:10,paddingBottom:8,borderBottom:"0.5px solid rgba(0,0,0,0.06)",marginBottom:4}}>
            <div style={{width:36,height:36,borderRadius:8,background:"linear-gradient(135deg,#69b1ff,#1677ff)",color:"#fff",display:"flex",alignItems:"center",justifyContent:"center",fontSize:14,fontWeight:600}}>S</div>
            <div>
              <div style={{fontSize:13,fontWeight:600}}>Stripe</div>
              <div style={{fontSize:12,color:"var(--mac-label-2)"}}>Invoice #2046</div>
            </div>
          </div>
          <div className="field"><span className="k">Type</span><span className="v">Payment</span></div>
          <div className="field"><span className="k">Amount</span><span className="v" style={{color:"var(--color-success-7)"}}>+ $1,430.00</span></div>
          <div className="field"><span className="k">Status</span><span className="v">Approved</span></div>
          <div className="field"><span className="k">Date</span><span className="v">Today, 9:08 AM</span></div>
          <div className="field"><span className="k">Reference</span><span className="v" style={{fontFamily:"var(--font-mono)",fontSize:11}}>#83001</span></div>
        </div>
      </div>
      <div>
        <h3>Activity</h3>
        <div className="group">
          <div className="field"><span className="k">Created</span><span className="v">Nov 03, 2025</span></div>
          <div className="field"><span className="k">Last edited</span><span className="v">Today</span></div>
          <div className="field"><span className="k">Owner</span><span className="v">Stebin Ben</span></div>
        </div>
      </div>
      <div>
        <h3>Tags</h3>
        <div style={{display:"flex",flexWrap:"wrap",gap:6}}>
          <span style={{fontSize:11,padding:"2px 8px",background:"rgba(22,119,255,0.15)",color:"#0958d9",borderRadius:4}}>income</span>
          <span style={{fontSize:11,padding:"2px 8px",background:"rgba(82,196,26,0.15)",color:"#389e0d",borderRadius:4}}>approved</span>
          <span style={{fontSize:11,padding:"2px 8px",background:"rgba(140,140,140,0.15)",color:"#595959",borderRadius:4}}>recurring</span>
        </div>
      </div>
    </aside>
  );
}

/* ===== Dashboard content ===== */
function DashboardContent() {
  return (
    <>
      <Hero/>

      <div className="mac-stats">
        <StatCard label="Total Users"     value="78,250"   delta="70.5%" color="#1677ff" data={[12,18,14,20,22,30,28,35,32,40]}/>
        <StatCard label="Total Orders"    value="18,800"   delta="27.4%" deltaDn color="#f5222d" data={[40,38,36,34,30,28,30,26,28,24]}/>
        <StatCard label="Total Sales"     value="$35,078"  delta="27.4%" deltaDn color="#faad14" kind="bar" data={[18,30,22,38,28,42,30,46,32,40,36,44]}/>
        <StatCard label="Total Marketing" value="$1,12,083" delta="70.5%" color="#52c41a" data={[10,14,12,18,16,22,18,24,22,28,26,32]}/>
      </div>

      <div style={{display:"grid",gridTemplateColumns:"2fr 1fr",gap:16}}>
        <div className="mac-card">
          <div className="mac-card-h">Recent activity <Glyph.More/></div>
          <div className="mac-card-b" style={{padding:"4px 16px 16px"}}>
            <ActivityList/>
          </div>
        </div>
        <div className="mac-card">
          <div className="mac-card-h">Analytics report <Glyph.More/></div>
          <div className="mac-card-b">
            <div style={{display:"flex",justifyContent:"space-between",padding:"4px 0",borderBottom:"0.5px solid rgba(0,0,0,0.06)"}}>
              <span style={{fontSize:13}}>Company finance growth</span>
              <span style={{fontSize:13,fontWeight:600,color:"var(--color-success-7)"}}>+45.14%</span>
            </div>
            <div style={{display:"flex",justifyContent:"space-between",padding:"4px 0",borderBottom:"0.5px solid rgba(0,0,0,0.06)"}}>
              <span style={{fontSize:13}}>Company expenses ratio</span>
              <span style={{fontSize:13,fontWeight:600}}>0.58%</span>
            </div>
            <div style={{display:"flex",justifyContent:"space-between",padding:"4px 0"}}>
              <span style={{fontSize:13}}>Business risk cases</span>
              <span style={{fontSize:13,fontWeight:600}}>Low</span>
            </div>
            <div style={{marginTop:12,height:80,background:"linear-gradient(180deg,rgba(250,173,20,0.15) 0%,transparent 100%)",borderRadius:6,position:"relative"}}>
              <svg viewBox="0 0 200 80" style={{width:"100%",height:"100%"}}>
                <path d="M0,50 Q20,30 40,40 T80,50 T120,30 T160,40 T200,30" stroke="#faad14" strokeWidth="2" fill="none"/>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

/* ===== App root ===== */
function TolbNetMac() {
  const [active, setActive] = React.useState("dashboard");
  const [view, setView] = React.useState("overview");
  const [inspector, setInspector] = React.useState(true);
  const [openMenu, setOpenMenu] = React.useState(null);

  const titles = {
    dashboard: "Dashboard", stats: "Statistics", mail: "Mail",
    calendar: "Calendar", kanban: "Kanban", invoice: "Invoices",
    customer: "Customers", starred: "Starred",
  };

  return (
    <div className="mac-page mac-app" onClick={(e) => {
      if (!e.target.closest(".mac-menubar") && !e.target.closest(".mac-menu")) setOpenMenu(null);
    }}>
      <MenuBar openMenu={openMenu} setOpenMenu={setOpenMenu}/>

      <div className="mac-window-wrap">
        <div className="mac-window" style={{
          width: 1180, height: 760,
          flexShrink: 0,
          borderRadius: 12, overflow: "hidden",
          background: "#fff",
          boxShadow: "0 0 0 1px rgba(0,0,0,0.18), 0 16px 48px rgba(0,0,0,0.35)",
          display: "flex", position: "relative",
        }}>
          {/* Sidebar (vibrant) */}
          <div style={{
            width: 220, flexShrink: 0, position: "relative",
            background: "rgba(210,225,245,0.55)",
            backdropFilter: "blur(50px) saturate(180%)",
            WebkitBackdropFilter: "blur(50px) saturate(180%)",
            borderRight: "0.5px solid rgba(0,0,0,0.08)",
            display: "flex", flexDirection: "column",
          }}>
            {/* Traffic lights */}
            <div style={{height: 38, display:"flex", alignItems:"center", paddingLeft: 12}}>
              <MacTrafficLights/>
            </div>
            <Sidebar active={active} setActive={setActive}/>
          </div>

          {/* Main area */}
          <div style={{flex: 1, display:"flex", flexDirection:"column", minWidth: 0}}>
            <Toolbar title={titles[active]} view={view} setView={setView}
                     onInspector={() => setInspector(!inspector)}
                     inspectorOpen={inspector}/>
            <div style={{flex:1, display:"flex", overflow:"hidden"}}>
              <div className="mac-content" style={{flex:1, overflowY:"auto"}}>
                <div className="crumbs">
                  <span>TolbNet</span><span className="sep">/</span>
                  <span>{titles[active]}</span>
                </div>
                <h1 className="title">{titles[active]}</h1>
                {active === "dashboard" ? <DashboardContent/> : (
                  <div className="mac-card">
                    <div className="mac-card-h">{titles[active]} <Glyph.More/></div>
                    <div className="mac-card-b" style={{padding:"60px 16px",textAlign:"center",color:"var(--mac-label-2)"}}>
                      <div style={{font:"600 14px var(--mac-font)",color:"var(--mac-label)",marginBottom:4}}>{titles[active]}</div>
                      <div style={{fontSize:12}}>This screen mirrors the web kit's {titles[active]} view.</div>
                    </div>
                  </div>
                )}
              </div>
              {inspector && <Inspector/>}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.TolbNetMac = TolbNetMac;