// Product Snapshot — the "real" BaySync dashboard preview
// 8 cards: appointments, ROs, bay utilization, dispatch, parts,
// MPI, customer approvals, manager alerts.

function ProductSnapshot() {
  return (
    <div className="snap-frame" data-screen-label="Product snapshot">
      <div className="snap-bar">
        <div className="lights"><span/><span/><span/></div>
        <div className="url"><span className="lock">●</span> app.baysync.io/manager</div>
      </div>
      <div className="snap-grid">
        <SnapSidebar />
        <div className="snap-main">
          <CardAppointments />
          <CardROs />
          <CardBays />
          <CardDispatch />
          <CardParts />
          <CardMPI />
          <CardCustomerApprovals />
          <CardAlerts />
        </div>
      </div>
    </div>
  );
}

function SnapSidebar() {
  return (
    <aside className="snap-side">
      <div style={{display:"flex",alignItems:"center",gap:8,padding:"4px 8px 14px",borderBottom:"1px solid var(--line)",marginBottom:8}}>
        <div className="brand-mark"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M4 14l4-4 4 4 4-6 4 6"/></svg></div>
        <div>
          <div style={{fontSize:13,fontWeight:600,letterSpacing:"-0.01em"}}>BaySync</div>
          <div style={{fontSize:10,color:"var(--ink-mute)",fontFamily:'"JetBrains Mono",monospace'}}>Magnolia Auto · Mgr</div>
        </div>
      </div>

      <h5>Workspace</h5>
      <a className="active"><span className="label"><span className="ic"><IconChart size={14}/></span>Manager</span></a>
      <a><span className="label"><span className="ic"><IconCar size={14}/></span>Service Drive</span><span className="badge">12</span></a>
      <a><span className="label"><span className="ic"><IconCalendar size={14}/></span>Booking Center</span></a>
      <a><span className="label"><span className="ic"><IconCpu size={14}/></span>AI Dispatch</span></a>
      <a><span className="label"><span className="ic"><IconWrench size={14}/></span>Tech Dashboard</span></a>
      <div className="sep"/>
      <h5>Operations</h5>
      <a><span className="label"><span className="ic"><IconClipboard size={14}/></span>Repair Orders</span><span className="badge">47</span></a>
      <a><span className="label"><span className="ic"><IconCheck size={14}/></span>Inspections (MPI)</span><span className="badge amber">8</span></a>
      <a><span className="label"><span className="ic"><IconBox size={14}/></span>Parts</span><span className="badge red">3</span></a>
      <a><span className="label"><span className="ic"><IconChat size={14}/></span>RO Chat</span></a>
      <div className="sep"/>
      <h5>Admin</h5>
      <a><span className="label"><span className="ic"><IconUsers size={14}/></span>Users</span></a>
      <a><span className="label"><span className="ic"><IconShield2 size={14}/></span>Audit Log</span></a>
    </aside>
  );
}

/* ---------- cards ---------- */

function CardAppointments() {
  return (
    <div className="card c-appts">
      <h4>Today's Appointments <span className="more">⋯</span></h4>
      <div className="num">42<small>/ 56 cap</small></div>
      <div className="delta"><IconArrow size={12}/> 12 checked in · 6 arriving</div>
    </div>
  );
}
function CardROs() {
  return (
    <div className="card c-ros">
      <h4>Open Repair Orders <span className="more">⋯</span></h4>
      <div className="num">47</div>
      <div className="delta amber">9 waiting parts · 4 awaiting approval</div>
    </div>
  );
}

function CardBays() {
  // 16 bays, varied states
  const bays = [
    {n:"01",s:"busy",p:78}, {n:"02",s:"busy",p:62}, {n:"03",s:"empty"},
    {n:"04",s:"on",p:88}, {n:"05",s:"on",p:55}, {n:"06",s:"wait",p:32},
    {n:"07",s:"busy",p:74}, {n:"08",s:"on",p:91},
    {n:"09",s:"empty"}, {n:"10",s:"on",p:46}, {n:"11",s:"busy",p:69},
    {n:"12",s:"on",p:80}, {n:"13",s:"wait",p:40}, {n:"14",s:"on",p:65},
    {n:"15",s:"busy",p:72}, {n:"16",s:"empty"},
  ];
  return (
    <div className="card c-bay">
      <h4>Bay Utilization · Live <span className="mono" style={{color:"var(--teal)"}}>74%</span></h4>
      <div className="bays">
        {bays.map((b,i) => (
          <div key={i} className={`bay ${b.s==="empty"?"empty":b.s==="busy"?"busy":b.s==="wait"?"wait":""}`}>
            {b.s !== "empty" && <div className="fill" style={{height:`${b.p}%`}}/>}
            <div className="num">{b.n}</div>
          </div>
        ))}
      </div>
      <div className="bays-legend">
        <span><i style={{background:"rgba(45,212,191,.6)"}}/>Active</span>
        <span><i style={{background:"rgba(59,130,246,.6)"}}/>In service</span>
        <span><i style={{background:"rgba(245,158,11,.6)"}}/>Waiting parts</span>
        <span><i style={{background:"#1c2735"}}/>Open</span>
      </div>
    </div>
  );
}

function CardDispatch() {
  const techs = [
    {i:"MR",n:"Marcus Reyes",sub:"Master · A1 · A4 · Hybrid",p:92,bay:"Bay 04"},
    {i:"JT",n:"Jay Thompson",sub:"Master · Diag · ASE",p:88,bay:"Bay 08"},
    {i:"LK",n:"Luis Kim",sub:"Cert · Maint · Tires",p:71,bay:"Bay 11"},
    {i:"AP",n:"Anika Patel",sub:"Cert · Maint · Recall",p:64,bay:"Bay 14"},
    {i:"SO",n:"Sam Okafor",sub:"Apprentice · Express",p:48,bay:"Express 2"},
  ];
  return (
    <div className="card c-disp">
      <h4>Technician Dispatch <span className="more">⋯</span></h4>
      <div className="techs">
        {techs.map((t,i) => (
          <div key={i} className="tech">
            <div className="av">{t.i}</div>
            <div className="name">{t.n}<small>{t.sub} · {t.bay}</small></div>
            <div className="util"><b style={{width:`${t.p}%`}}/></div>
            <div className="pct">{t.p}%</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function CardParts() {
  const items = [
    {sku:"04465-0E120", name:"Brake pad set (front)", st:"in"},
    {sku:"90919-02250", name:"Ignition coil", st:"eta"},
    {sku:"17801-31170", name:"Air filter", st:"po"},
    {sku:"04152-YZZA6", name:"Oil filter", st:"in"},
    {sku:"42603-08010", name:"Wheel center cap", st:"bo"},
  ];
  const lbl = {in:"IN", eta:"ETA 10:40", po:"P.O.", bo:"B/O"};
  return (
    <div className="card c-parts">
      <h4>Parts Waiting <span className="more">⋯</span></h4>
      <div className="parts-list">
        {items.map((p,i)=>(
          <div key={i} className="pq">
            <span className="sku">{p.sku}</span>
            <span className="name">{p.name}</span>
            <span className={`pill ${p.st}`}>{lbl[p.st]}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function CardMPI() {
  const R = 38, C = 2 * Math.PI * R;
  const pct = 0.62;
  return (
    <div className="card c-mpi">
      <h4>MPI / Inspection Status</h4>
      <div className="ring-wrap">
        <div className="ring">
          <svg width="96" height="96" viewBox="0 0 96 96">
            <circle cx="48" cy="48" r={R} stroke="#1c2735" strokeWidth="9" fill="none"/>
            <circle cx="48" cy="48" r={R} stroke="url(#g1)" strokeWidth="9" fill="none"
              strokeDasharray={`${C*pct} ${C}`} strokeLinecap="round"/>
            <defs>
              <linearGradient id="g1" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stopColor="#2dd4bf"/>
                <stop offset="100%" stopColor="#38bdf8"/>
              </linearGradient>
            </defs>
          </svg>
          <div className="ring-center">
            <b>62<small style={{fontSize:13}}>%</small></b>
            <small>complete</small>
          </div>
        </div>
        <div className="ring-legend">
          <div><i style={{background:"#2dd4bf"}}/>Passed · 18</div>
          <div><i style={{background:"#f59e0b"}}/>Yellow · 7</div>
          <div><i style={{background:"#ef4444"}}/>Red · 3</div>
          <div><i style={{background:"#1c2735"}}/>Pending · 12</div>
        </div>
      </div>
    </div>
  );
}

function CardCustomerApprovals() {
  const items = [
    {name:"Hannah Brooks", veh:"22 RAV4 · 7HFE423", amt:"$1,284.50", st:"pending"},
    {name:"Marcus Quinn", veh:"19 Tacoma · 9XLG118", amt:"$642.00", st:"viewed"},
    {name:"Dani Ortega", veh:"24 Camry · 8YKE221", amt:"$298.75", st:"approved"},
  ];
  const lbl = {pending:"AWAITING", viewed:"VIEWED", approved:"APPROVED"};
  return (
    <div className="card c-cust">
      <h4>Customer Approvals</h4>
      <div>
        {items.map((c,i)=>(
          <div key={i} className="ca">
            <div className="who">{c.name}<small>{c.veh}</small></div>
            <div className="amt">{c.amt}</div>
            <div className={`st ${c.st}`}>{lbl[c.st]}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function CardAlerts() {
  const items = [
    {kind:"amber", icon:<IconWarn size={13}/>, body:"Promise time at risk · RO 31988", meta:"Bay 04 · Reyes · ETA +14 min", time:"2m"},
    {kind:"red", icon:<IconBell size={13}/>, body:"Recall surfaced at intake · 23 Sienna", meta:"NHTSA 24V-512 · Open in queue", time:"7m"},
    {kind:"teal", icon:<IconCheck size={13}/>, body:"PDI lane available · 3 vehicles queued", meta:"Lane reassign suggested", time:"12m"},
  ];
  return (
    <div className="card c-alerts">
      <h4>Manager Alerts</h4>
      <div>
        {items.map((a,i)=>(
          <div key={i} className={`alert ${a.kind}`}>
            <div className="ic">{a.icon}</div>
            <div className="body">{a.body}<small>{a.meta}</small></div>
            <div className="time">{a.time}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { ProductSnapshot });