/* Mantis · iOS app (recreated as web mock).
   Uses IOSDevice from ios-frame.jsx for the bezel only — content is custom
   so it can use the Mantis design tokens.
*/

const SF = {
  // mini SF Symbols-style glyphs
  Home:    (p) => <I {...p} stroked d={["M3 11l9-8 9 8","M5 10v10h14V10"]}/>,
  Mail:    (p) => <I {...p} stroked 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"]}/>,
  Chart:   (p) => <I {...p} stroked d={["M3 3v18h18","M7 15l4-4 3 3 5-6"]}/>,
  Person:  (p) => <I {...p} stroked 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"]}/>,
  Plus:    (p) => <I {...p} stroked d={["M12 5v14","M5 12h14"]}/>,
  Pencil:  (p) => <I {...p} stroked d={["M12 20h9","M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"]}/>,
  Send:    (p) => <I {...p} stroked d={["M22 2L11 13","M22 2l-7 20-4-9-9-4 20-7Z"]}/>,
  Star:    (p) => <I {...p} stroked d={["M12 2l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1 3-7Z"]}/>,
  Camera:  (p) => <I {...p} stroked d={["M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z","M12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"]}/>,
  Wallet:  (p) => <I {...p} stroked 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","M17 12h.01","M2 9h20"]}/>,
  Gear:    (p) => <I {...p} stroked d={["M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z","M19.4 15a1.7 1.7 0 0 0 .3 1.8 2 2 0 1 1-2.8 2.8 1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 0 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3 2 2 0 1 1-2.8-2.8 1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 0 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8 2 2 0 1 1 2.8-2.8 1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 0 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3 2 2 0 1 1 2.8 2.8 1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 0 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z"]}/>,
  Bell:    (p) => <I {...p} stroked d={["M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9","M10.3 21a1.94 1.94 0 0 0 3.4 0"]}/>,
  Lock:    (p) => <I {...p} stroked d={["M19 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2Z","M7 11V7a5 5 0 0 1 10 0v4"]}/>,
  Globe:   (p) => <I {...p} stroked d={["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z","M2 12h20","M12 2a15 15 0 0 1 4 10 15 15 0 0 1-4 10 15 15 0 0 1-4-10 15 15 0 0 1 4-10Z"]}/>,
  Help:    (p) => <I {...p} stroked d={["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z","M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3","M12 17h0"]}/>,
  Chev:    (p) => <I {...p} stroked d={["M9 18l6-6-6-6"]}/>,
  Back:    (p) => <I {...p} stroked d={["M15 18l-6-6 6-6"]}/>,
  Search:  (p) => <I {...p} stroked d={["M21 21l-4.3-4.3","M11 19a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z"]}/>,
  Mic:     (p) => <I {...p} stroked d={["M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3Z","M19 10v2a7 7 0 0 1-14 0v-2","M12 19v4","M8 23h8"]}/>,
  Arrow:   (p) => <I {...p} stroked d={["M5 12h14","M12 5l7 7-7 7"]}/>,
  X:       (p) => <I {...p} stroked d={["M18 6L6 18","M6 6l12 12"]}/>,
  Check:   (p) => <I {...p} stroked d={["M20 6L9 17l-5-5"]}/>,
  Down:    (p) => <I {...p} stroked d={["M6 9l6 6 6-6"]}/>,
};

/* small inline icon — same as web kit's I */
function I({ d, stroked = true, fill = "currentColor", size = 18, ...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>
  );
}

/* ===== Dashboard tab ===== */
function HomeTab({ onCompose }) {
  return (
    <>
      <div className="ios-nav">
        <div className="left"></div>
        <div className="right"><SF.Bell size={22}/></div>
      </div>
      <div className="ios-large-title">Overview</div>

      <div className="ios-hero">
        <div className="label">Total Balance</div>
        <div className="amount">$12,480.32</div>
        <div className="delta">▲ 8.4% this month</div>
      </div>

      <div className="ios-actions">
        <div className="ios-action"><div className="ic"><SF.Send size={20}/></div>Send</div>
        <div className="ios-action"><div className="ic"><SF.Arrow size={20}/></div>Receive</div>
        <div className="ios-action" onClick={onCompose}><div className="ic"><SF.Plus size={20}/></div>Add</div>
        <div className="ios-action"><div className="ic"><SF.Chart size={20}/></div>Stats</div>
      </div>

      <div className="ios-section">
        <div className="ios-section-h">Today</div>
        <div className="ios-card">
          <Activity name="Whole Foods" sub="Groceries · 2:04 PM" amount="- $48.12" bg="#34c759"/>
          <Activity name="Apple Pay"   sub="iCloud+ · 11:32 AM"  amount="- $9.99"  bg="#000"/>
          <Activity name="Mom"         sub="Dinner split · 9:15 AM" amount="+ $24.00" up bg="#ff9500"/>
        </div>
      </div>

      <div className="ios-section">
        <div className="ios-section-h">Yesterday</div>
        <div className="ios-card">
          <Activity name="Stripe"      sub="Invoice #2046" amount="+ $1,430.00" up bg="#635bff"/>
          <Activity name="Uber"        sub="Mission to SOMA" amount="- $14.50"  bg="#000"/>
          <Activity name="Reformation" sub="Order #C7821"  amount="- $186.00" bg="#262626"/>
        </div>
      </div>

      <div className="ios-section">
        <div className="ios-section-h">This week</div>
        <div className="ios-card">
          <Activity name="Tesla"       sub="Supercharger · Mon" amount="- $22.40"  bg="#cc0000"/>
          <Activity name="Vanguard"    sub="VTSAX dividend · Mon" amount="+ $312.85" up bg="#a40034"/>
        </div>
      </div>
    </>
  );
}

function Activity({ name, sub, amount, up = false, bg }) {
  return (
    <div className="ios-act">
      <div className="ic" style={{background:bg}}>{name[0]}</div>
      <div className="body">
        <div className="t">{name}</div>
        <div className="s">{sub}</div>
      </div>
      <div className={`amount ${up ? "up":"dn"}`}>{amount}</div>
    </div>
  );
}

/* ===== Mail tab ===== */
function MailTab() {
  const msgs = [
    { from:"Stebin Ben", time:"2:04 PM", subj:"Welcome to TolbNet 🎉", prev:"Thanks for joining — here's everything you need to get started.", unread:true },
    { from:"GitHub",     time:"1:32 PM", subj:"[tolbnet] PR #142 merged", prev:"Your pull request has been merged into main by dtolb.", unread:true },
    { from:"Linear",     time:"11:08 AM", subj:"3 issues assigned this week", prev:"View your weekly summary and what's next in your queue.", unread:false },
    { from:"Figma",      time:"Tue", subj:"Mantis v2.2.4 published", prev:"Your library has been updated. 12 new components, 4 fixed.", unread:false },
    { from:"Apple",      time:"Mon", subj:"Your receipt from Apple", prev:"Receipt #4D2N8KP for $29.00 — iCloud+ 2TB.", unread:false },
    { from:"Vercel",     time:"Sun", subj:"Deployment ready", prev:"tolbnet.vercel.app deployed in 47 seconds.", unread:false },
  ];
  return (
    <>
      <div className="ios-nav">
        <div className="left"><span style={{cursor:"pointer"}}>Edit</span></div>
        <div className="right"><SF.Pencil size={22}/></div>
      </div>
      <div className="ios-large-title">Inbox</div>
      <div className="ios-search">
        <SF.Search size={16} style={{color:"var(--ios-label-3)"}}/>
        <span style={{flex:1}}>Search</span>
        <SF.Mic size={16}/>
      </div>
      <div style={{background:"#fff"}}>
        {msgs.map((m,i) => (
          <div key={i} className="ios-mail-row">
            <div className="unread" style={{visibility:m.unread?"visible":"hidden"}}/>
            <div className="body">
              <div className="top">
                <span className="from">{m.from}</span>
                <span className="time">{m.time} <SF.Chev size={12} style={{color:"var(--ios-label-4)"}}/></span>
              </div>
              <div className="subj">{m.subj}</div>
              <div className="prev">{m.prev}</div>
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

/* ===== Profile tab ===== */
function ProfileTab({ onSignOut }) {
  return (
    <>
      <div className="ios-nav">
        <div className="left"></div>
        <div className="right"><span style={{cursor:"pointer"}}>Done</span></div>
      </div>
      <div className="ios-large-title">Profile</div>

      <div className="ios-card" style={{margin:"4px 16px 0",padding:"20px",display:"flex",alignItems:"center",gap:14}}>
        <div style={{width:60,height:60,borderRadius:30,background:"linear-gradient(135deg,#69b1ff,#1677ff)",color:"#fff",fontSize:24,fontWeight:700,display:"flex",alignItems:"center",justifyContent:"center"}}>SB</div>
        <div style={{flex:1}}>
          <div style={{fontSize:20,fontWeight:600}}>Stebin Ben</div>
          <div style={{fontSize:15,color:"var(--ios-label-3)"}}>stebin.ben@tolb.net</div>
        </div>
        <SF.Chev style={{color:"var(--ios-label-4)"}}/>
      </div>

      <div className="ios-section">
        <div className="ios-section-h">Account</div>
        <div className="ios-card">
          <Row icon={<SF.Person/>} bg="#1677ff" title="Personal Information" chev/>
          <Row icon={<SF.Wallet/>} bg="#34c759" title="Wallet" detail="3 cards" chev/>
          <Row icon={<SF.Bell/>}   bg="#ff9500" title="Notifications" chev/>
          <Row icon={<SF.Lock/>}   bg="#5856d6" title="Privacy & Security" chev/>
        </div>
      </div>

      <div className="ios-section">
        <div className="ios-section-h">Preferences</div>
        <div className="ios-card">
          <Row icon={<SF.Globe/>}  bg="#0a84ff" title="Language" detail="English (US)" chev/>
          <Row icon={<SF.Gear/>}   bg="#8e8e93" title="Appearance" detail="Automatic" chev/>
          <Row icon={<SF.Help/>}   bg="#ff2d55" title="Help & Support" chev/>
        </div>
      </div>

      <div className="ios-section">
        <div className="ios-card">
          <div className="ios-row destructive" onClick={onSignOut} style={{justifyContent:"center"}}>
            <div className="t" style={{color:"var(--ios-destructive)",textAlign:"center",width:"100%"}}>Sign Out</div>
          </div>
        </div>
      </div>
    </>
  );
}

function Row({ icon, bg, title, detail, chev }) {
  return (
    <div className="ios-row">
      <div className="lead" style={{background:bg}}>{icon}</div>
      <div className="body"><div className="t">{title}</div></div>
      {detail ? <span className="value">{detail}</span> : null}
      {chev ? <SF.Chev size={16} className="chev"/> : null}
    </div>
  );
}

/* ===== Compose sheet (modal) ===== */
function ComposeSheet({ onClose }) {
  return (
    <div className="ios-sheet-mask" onClick={onClose}>
      <div className="ios-sheet" onClick={e => e.stopPropagation()}>
        <div className="ios-sheet-handle"/>
        <div className="ios-sheet-head">
          <a onClick={onClose}>Cancel</a>
          <span className="ttl">New Transaction</span>
          <a style={{fontWeight:600}} onClick={onClose}>Save</a>
        </div>
        <div className="ios-card">
          <Row icon={<SF.Wallet/>} bg="#34c759" title="Amount" detail="$0.00" chev/>
          <Row icon={<SF.Person/>} bg="#1677ff" title="To" detail="Choose..." chev/>
          <Row icon={<SF.Mail/>}   bg="#ff9500" title="Note" detail="Optional" chev/>
        </div>
        <div className="ios-section">
          <div className="ios-section-h">Schedule</div>
          <div className="ios-card">
            <Row icon={<SF.Star/>}  bg="#5856d6" title="Send now"/>
            <Row icon={<SF.Globe/>} bg="#5e6ad2" title="Repeat" detail="Never" chev/>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ===== Tab bar ===== */
function TabBar({ active, onChange }) {
  const tabs = [
    { id:"home",    label:"Home",    icon:<SF.Home size={26}/> },
    { id:"mail",    label:"Mail",    icon:<SF.Mail size={26}/> },
    { id:"stats",   label:"Stats",   icon:<SF.Chart size={26}/> },
    { id:"profile", label:"Profile", icon:<SF.Person size={26}/> },
  ];
  return (
    <div className="ios-tabbar">
      {tabs.map(t => (
        <div key={t.id} className={`ios-tab ${active===t.id?"active":""}`} onClick={() => onChange(t.id)}>
          {t.icon}<span>{t.label}</span>
        </div>
      ))}
    </div>
  );
}

/* ===== App ===== */
function MantisIOS() {
  const [tab, setTab] = React.useState("home");
  const [sheet, setSheet] = React.useState(false);
  const [signedOut, setSignedOut] = React.useState(false);

  if (signedOut) {
    return (
      <div className="ios-app" style={{justifyContent:"center",alignItems:"center",textAlign:"center",padding:"0 32px",gap:0}}>
        <div style={{display:"flex",flexDirection:"column",alignItems:"center",gap:12,marginBottom:36}}>
          <img src="../../assets/tolbnet-icon.svg" width="72" height="72"/>
          <div style={{fontSize:34,fontWeight:700,letterSpacing:"-0.9px",color:"#000",marginTop:4}}>Welcome to TolbNet</div>
          <div style={{fontSize:17,color:"var(--ios-label-3)",maxWidth:280,lineHeight:1.35}}>
            The purpose of a product update is to add new features, fix bugs or improve the performance of the product.
          </div>
        </div>
        <div style={{width:"100%",display:"flex",flexDirection:"column",gap:10}}>
          <button onClick={() => setSignedOut(false)}
                  style={{width:"100%",height:50,background:"#000",color:"#fff",border:0,borderRadius:14,fontSize:17,fontWeight:600,letterSpacing:"-0.4px",display:"flex",alignItems:"center",justifyContent:"center",gap:8}}>
             Sign in with Apple
          </button>
          <button onClick={() => setSignedOut(false)}
                  style={{width:"100%",height:50,background:"var(--ios-tint)",color:"#fff",border:0,borderRadius:14,fontSize:17,fontWeight:600,letterSpacing:"-0.4px"}}>
            Continue with email
          </button>
          <button style={{width:"100%",height:50,background:"transparent",color:"var(--ios-tint)",border:0,fontSize:17,marginTop:4}}>
            I don't have an account
          </button>
        </div>
        <div style={{position:"absolute",bottom:42,left:32,right:32,fontSize:12,color:"var(--ios-label-3)",textAlign:"center"}}>
          By continuing you agree to our Terms and Privacy Policy.
        </div>
      </div>
    );
  }

  return (
    <div className="ios-app">
      <div className="ios-content">
        {tab === "home"    && <HomeTab onCompose={() => setSheet(true)}/>}
        {tab === "mail"    && <MailTab/>}
        {tab === "stats"   && <HomeTab onCompose={() => setSheet(true)}/>}
        {tab === "profile" && <ProfileTab onSignOut={() => setSignedOut(true)}/>}
      </div>
      <TabBar active={tab} onChange={setTab}/>
      {sheet && <ComposeSheet onClose={() => setSheet(false)}/>}
    </div>
  );
}

Object.assign(window, { MantisIOS, SF, I });