// admin-other.jsx — Features, Costs/P&L, Billing, Support
const { useState: useStateO } = React;
const Icon = window.Icon;

// ── FEATURES ────────────────────────────────────────────────
function FeaturesPage() {
  const { users, features } = window.MOCK;
  const [search, setSearch] = useStateO('');
  const [ws, setWs] = useStateO(null);
  const [flags, setFlags] = useStateO({});
  const [saved, setSaved] = useStateO(false);

  const list = users.filter(u => {
    const q = search.toLowerCase();
    return !q || u.name.toLowerCase().includes(q) || u.email.includes(q);
  });

  const pick = u => { setWs(u); setFlags({ ...u.flags }); setSaved(false); };
  const save = () => { setSaved(true); setTimeout(() => setSaved(false), 2000); };

  return (
    <div style={{ display:'flex', gap:14, height:'calc(100vh - 130px)', minHeight:400 }}>
      {/* List */}
      <div style={{ flex:1, minWidth:0, display:'flex', flexDirection:'column', gap:10 }}>
        <div style={{ display:'flex', alignItems:'center', gap:8, background:'#fff', border:'1px solid #E5E7EB', borderRadius:9, padding:'7px 12px' }}>
          <Icon name="Search" size={13} color="#9CA3AF"/>
          <input value={search} onChange={e => setSearch(e.target.value)} placeholder="Search workspaces…"
            style={{ border:'none', outline:'none', fontFamily:'inherit', fontSize:13, color:'#1A2B3B', background:'transparent', flex:1 }}/>
        </div>
        <div style={{ background:'#fff', border:'1px solid #E5E7EB', borderRadius:14, overflow:'hidden', flex:1, overflowY:'auto' }}>
          {list.map((u, i) => (
            <div key={u.id} onClick={() => pick(u)}
              style={{ display:'flex', alignItems:'center', gap:10, padding:'11px 16px', borderBottom: i<list.length-1?'1px solid #F3F4F6':'none', cursor:'pointer', background: ws?.id===u.id ? '#FFF7ED' : 'transparent', transition:'background 0.1s' }}
              onMouseEnter={e => { if(ws?.id!==u.id) e.currentTarget.style.background='#F9FAFB'; }}
              onMouseLeave={e => { if(ws?.id!==u.id) e.currentTarget.style.background='transparent'; }}
            >
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ fontSize:13, fontWeight:600, color:'#1A2B3B', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{u.name}</div>
                <div style={{ fontSize:11, color:'#9CA3AF' }}>{u.email}</div>
              </div>
              <PlanBadge plan={u.plan}/>
              <Icon name="ChevronRight" size={13} color="#D1D5DB"/>
            </div>
          ))}
        </div>
      </div>

      {/* Panel */}
      {ws ? (
        <div style={{ width:290, flexShrink:0, background:'#fff', border:'1px solid #E5E7EB', borderRadius:14, padding:20, display:'flex', flexDirection:'column', gap:10, overflowY:'auto' }}>
          <div style={{ marginBottom:4 }}>
            <div style={{ fontSize:14, fontWeight:800, color:'#1A2B3B' }}>{ws.name}</div>
            <div style={{ fontSize:11, color:'#9CA3AF', marginTop:1 }}>{ws.email}</div>
          </div>
          <div style={{ flex:1 }}>
            {features.map((f, i) => (
              <div key={f.key} style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'10px 0', borderBottom: i<features.length-1?'1px solid #F3F4F6':'none' }}>
                <div>
                  <div style={{ fontSize:12, fontWeight:600, color:'#1A2B3B' }}>{f.label}</div>
                  <div style={{ fontSize:10, color:'#9CA3AF', marginTop:1 }}>{f.desc}</div>
                </div>
                <Toggle on={flags[f.key]} onClick={() => setFlags(p => ({ ...p, [f.key]: !p[f.key] }))}/>
              </div>
            ))}
          </div>
          <Btn variant="primary" onClick={save} style={{ width:'100%', justifyContent:'center', marginTop:6 }}>
            <Icon name="Save" size={13} color="#fff"/>{saved ? 'Saved!' : 'Save Changes'}
          </Btn>
        </div>
      ) : (
        <div style={{ width:290, flexShrink:0, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:8, color:'#D1D5DB' }}>
          <div style={{ fontSize:13, fontWeight:600, color:'#9CA3AF' }}>Select a user</div>
          <div style={{ fontSize:11, color:'#D1D5DB' }}>to manage their features</div>
        </div>
      )}
    </div>
  );
}

// ── COSTS & P&L ─────────────────────────────────────────────
function CostsPage() {
  const [view, setView] = useStateO('costs');
  const { metrics, api_costs, users, plans_breakdown } = window.MOCK;
  const total = metrics.totalCosts;

  return (
    <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
      <Tabs options={[{label:'API Costs',value:'costs'},{label:'P&L Statement',value:'pl'}]} value={view} onChange={setView}/>

      {view === 'costs' && (
        <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
          {/* Summary */}
          <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:12 }} className="g3">
            {[
              { l:'Total Costs (30d)', v:`$${total.toFixed(0)}`,             s:`${api_costs.length} services`,      c:'#F43F5E' },
              { l:'Cost / Paid User',  v:`$${metrics.costPerPaidUser}`,      s:'per user per month',                c:'#1A2B3B' },
              { l:'Gross Margin',      v:`${metrics.grossMargin}%`,          s:'revenue minus COGS',                c:'#10B981' },
            ].map(m => (
              <div key={m.l} style={{ background:'#fff', border:'1px solid #E5E7EB', borderRadius:14, padding:'18px 20px' }}>
                <div style={{ fontSize:11, fontWeight:700, color:'#9CA3AF', textTransform:'uppercase', letterSpacing:'0.07em', marginBottom:10 }}>{m.l}</div>
                <div style={{ fontSize:26, fontWeight:900, color:m.c, letterSpacing:'-0.02em', lineHeight:1 }}>{m.v}</div>
                <div style={{ fontSize:11, color:'#9CA3AF', marginTop:4 }}>{m.s}</div>
              </div>
            ))}
          </div>

          {/* Breakdown */}
          <div style={{ background:'#fff', border:'1px solid #E5E7EB', borderRadius:14, padding:20 }}>
            <div style={{ fontSize:13, fontWeight:700, color:'#1A2B3B', marginBottom:16 }}>Cost Breakdown</div>
            {api_costs.map((c, i) => (
              <div key={c.service} style={{ display:'flex', alignItems:'center', gap:12, padding:'11px 0', borderBottom: i<api_costs.length-1?'1px solid #F3F4F6':'none' }}>
                <div style={{ width:8, height:8, borderRadius:'50%', background:c.color, flexShrink:0 }}/>
                <div style={{ flex:1, minWidth:0 }}>
                  <div style={{ fontSize:13, fontWeight:600, color:'#1A2B3B' }}>{c.service}</div>
                  <div style={{ fontSize:11, color:'#9CA3AF' }}>{c.units}</div>
                </div>
                <div style={{ width:80 }}>
                  <div style={{ height:4, borderRadius:2, background:'#F3F4F6' }}>
                    <div style={{ height:'100%', width:`${(c.cost/total)*100}%`, background:c.color, borderRadius:2 }}/>
                  </div>
                </div>
                <div style={{ fontSize:13, fontWeight:700, color:'#1A2B3B', minWidth:60, textAlign:'right' }}>${c.cost.toFixed(2)}</div>
              </div>
            ))}
          </div>

          {/* Per-user cost table */}
          <div style={{ background:'#fff', border:'1px solid #E5E7EB', borderRadius:14, padding:20 }}>
            <div style={{ fontSize:13, fontWeight:700, color:'#1A2B3B', marginBottom:14 }}>Cost per User — Top 10</div>
            {[...users].sort((a,b)=>b.api_cost-a.api_cost).slice(0,10).map((u,i) => (
              <div key={u.id} style={{ display:'flex', alignItems:'center', gap:10, padding:'8px 0', borderBottom: i<9?'1px solid #F3F4F6':'none' }}>
                <span style={{ fontSize:10, color:'#D1D5DB', fontWeight:700, width:16, textAlign:'center' }}>{i+1}</span>
                <div style={{ flex:1, minWidth:0 }}>
                  <div style={{ fontSize:12, fontWeight:600, color:'#1A2B3B', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{u.name}</div>
                </div>
                <PlanBadge plan={u.plan}/>
                <span style={{ fontSize:12, fontWeight:700, color:'#F43F5E', minWidth:52, textAlign:'right' }}>${u.api_cost.toFixed(2)}</span>
                <span style={{ fontSize:11, color: u.mrr>0?'#10B981':'#9CA3AF', minWidth:58, textAlign:'right' }}>
                  {u.mrr>0 ? `${((1-(u.api_cost/u.mrr))*100).toFixed(0)}% mgn` : 'no rev'}
                </span>
              </div>
            ))}
          </div>
        </div>
      )}

      {view === 'pl' && (
        <div style={{ maxWidth:600 }}>
          <div style={{ background:'#fff', border:'1px solid #E5E7EB', borderRadius:14, padding:28 }}>
            <div style={{ marginBottom:22, paddingBottom:16, borderBottom:'1px solid #F3F4F6' }}>
              <div style={{ fontSize:16, fontWeight:800, color:'#1A2B3B' }}>Profit & Loss</div>
              <div style={{ fontSize:12, color:'#9CA3AF', marginTop:2 }}>April 2026 · Monthly</div>
            </div>

            {/* Revenue */}
            <div style={{ fontSize:10, fontWeight:800, color:'#9CA3AF', textTransform:'uppercase', letterSpacing:'0.08em', padding:'14px 0 6px' }}>Revenue</div>
            {plans_breakdown.filter(p=>p.price>0).map(p => (
              <div key={p.key||p.name} style={{ display:'flex', justifyContent:'space-between', padding:'9px 0', borderBottom:'1px solid #F3F4F6', fontSize:14 }}>
                <span style={{ color:'#6B7280' }}>{p.name} <span style={{ color:'#D1D5DB' }}>({p.users} × ${p.price})</span></span>
                <span style={{ fontWeight:700 }}>${(p.users*p.price).toLocaleString()}</span>
              </div>
            ))}
            <div style={{ display:'flex', justifyContent:'space-between', padding:'9px 0', borderBottom:'1px solid #F3F4F6', fontSize:14 }}>
              <span style={{ color:'#6B7280' }}>Credit Top-ups <span style={{ color:'#D1D5DB' }}>(est. @$0.02/credit)</span></span>
              <span style={{ fontWeight:700 }}>${(metrics.topUpRevenue||0).toLocaleString()}</span>
            </div>
            <div style={{ display:'flex', justifyContent:'space-between', padding:'12px 0', fontWeight:800, fontSize:14, borderTop:'2px solid #1A2B3B', marginTop:2 }}>
              <span>Gross Revenue</span><span style={{ color:'#10B981' }}>${metrics.mrr.toLocaleString()}</span>
            </div>

            {/* COGS */}
            <div style={{ fontSize:10, fontWeight:800, color:'#9CA3AF', textTransform:'uppercase', letterSpacing:'0.08em', padding:'18px 0 6px' }}>Cost of Revenue</div>
            {api_costs.map((c,i,arr) => (
              <div key={c.service} style={{ display:'flex', justifyContent:'space-between', padding:'9px 0', borderBottom: i<arr.length-1?'1px solid #F3F4F6':'none', fontSize:14 }}>
                <span style={{ color:'#6B7280' }}>{c.service} <span style={{ color:'#D1D5DB', fontSize:11 }}>— {c.desc}</span></span>
                <span style={{ color:'#F43F5E', fontWeight:600 }}>(${c.cost.toFixed(2)})</span>
              </div>
            ))}
            <div style={{ display:'flex', justifyContent:'space-between', padding:'12px 0', fontWeight:800, fontSize:14, borderTop:'2px solid #1A2B3B', marginTop:2 }}>
              <span>Total COGS</span><span style={{ color:'#F43F5E' }}>(${ total.toFixed(2) })</span>
            </div>

            {/* Gross profit highlight */}
            <div style={{ background:'#F9FAFB', borderRadius:10, padding:'14px 18px', margin:'18px 0', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
              <div>
                <div style={{ fontSize:13, fontWeight:800, color:'#1A2B3B' }}>Gross Profit</div>
                <div style={{ fontSize:11, color:'#9CA3AF', marginTop:2 }}>Margin: {metrics.grossMargin}%</div>
              </div>
              <div style={{ fontSize:22, fontWeight:900, color:'#10B981', letterSpacing:'-0.02em' }}>${metrics.netProfit.toLocaleString()}</div>
            </div>

            {/* Annualised */}
            <div style={{ fontSize:10, fontWeight:800, color:'#9CA3AF', textTransform:'uppercase', letterSpacing:'0.08em', padding:'8px 0 6px' }}>Annualised</div>
            {[
              { l:'ARR',                   v:`$${metrics.arr.toLocaleString()}` },
              { l:'Annual Gross Profit',   v:`$${(metrics.netProfit*12).toLocaleString()}` },
            ].map(({ l, v }) => (
              <div key={l} style={{ display:'flex', justifyContent:'space-between', padding:'9px 0', borderBottom:'1px solid #F3F4F6', fontSize:14 }}>
                <span style={{ color:'#6B7280' }}>{l}</span><span style={{ fontWeight:700 }}>{v}</span>
              </div>
            ))}

            {/* Investor KPIs */}
            <div style={{ fontSize:10, fontWeight:800, color:'#9CA3AF', textTransform:'uppercase', letterSpacing:'0.08em', padding:'18px 0 6px' }}>Investor KPIs</div>
            {[
              { l:'MRR Growth (MoM)',          v:'+12%' },
              { l:'Gross Margin',               v:`${metrics.grossMargin}%` },
              { l:'Trial → Paid Conversion',    v:'34%' },
              { l:'Cost / Paid User',           v:`$${metrics.costPerPaidUser}/mo` },
              { l:'LTV / CAC Ratio',            v:'~8.4×' },
              { l:'Net Revenue Retention',      v:'~108%' },
              { l:'Churn Rate',                 v:'~2.1%/mo' },
            ].map(({ l, v }, i, arr) => (
              <div key={l} style={{ display:'flex', justifyContent:'space-between', padding:'9px 0', borderBottom: i<arr.length-1?'1px solid #F3F4F6':'none', fontSize:14 }}>
                <span style={{ color:'#6B7280' }}>{l}</span><span style={{ fontWeight:700, color:'#1A2B3B' }}>{v}</span>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

// ── BILLING ──────────────────────────────────────────────────
function BillingPage() {
  const { users } = window.MOCK;
  const [filter, setFilter] = useStateO('all');

  const groups = {
    all:     users,
    paid:    users.filter(u => u.status==='active' && u.plan!=='trial'),
    trial:   users.filter(u => u.plan==='trial' || u.status==='trialing'),
    pastdue: users.filter(u => u.status==='past_due'),
    churned: users.filter(u => u.status==='canceled'),
  };
  const shown = groups[filter] || users;

  return (
    <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
      {/* Summary cards */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:12 }} className="g4">
        {[
          { l:'Active',   v:groups.paid.length,    c:'#10B981', id:'paid'    },
          { l:'Trial',    v:groups.trial.length,   c:'#F59E0B', id:'trial'   },
          { l:'Past Due', v:groups.pastdue.length, c:'#F97316', id:'pastdue' },
          { l:'Churned',  v:groups.churned.length, c:'#F43F5E', id:'churned' },
        ].map(s => (
          <div key={s.id} onClick={() => setFilter(filter===s.id?'all':s.id)}
            style={{ background:'#fff', border: filter===s.id ? `2px solid ${s.c}` : '1px solid #E5E7EB', borderRadius:14, padding:'18px 20px', cursor:'pointer', transition:'border 0.15s' }}>
            <div style={{ fontSize:11, fontWeight:700, color:'#9CA3AF', textTransform:'uppercase', letterSpacing:'0.07em', marginBottom:10 }}>{s.l}</div>
            <div style={{ fontSize:26, fontWeight:900, color:s.c, letterSpacing:'-0.02em' }}>{s.v}</div>
          </div>
        ))}
      </div>

      {/* Table */}
      <div style={{ background:'#fff', border:'1px solid #E5E7EB', borderRadius:14, overflow:'hidden' }}>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 78px 96px 64px 100px', padding:'9px 20px', borderBottom:'1px solid #E5E7EB', background:'#F9FAFB' }}>
          {['Customer','Plan','Status','MRR','Next Billing'].map(h => (
            <span key={h} style={{ fontSize:10, fontWeight:800, color:'#9CA3AF', textTransform:'uppercase', letterSpacing:'0.07em' }}>{h}</span>
          ))}
        </div>
        {shown.map((u, i) => (
          <div key={u.id} style={{ display:'grid', gridTemplateColumns:'1fr 78px 96px 64px 100px', alignItems:'center', padding:'11px 20px', borderBottom: i<shown.length-1?'1px solid #F3F4F6':'none', transition:'background 0.1s' }}
            onMouseEnter={e => e.currentTarget.style.background='#F9FAFB'}
            onMouseLeave={e => e.currentTarget.style.background='transparent'}
          >
            <div style={{ minWidth:0 }}>
              <div style={{ fontSize:13, fontWeight:600, color:'#1A2B3B', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{u.name}</div>
              <div style={{ fontSize:11, color:'#9CA3AF', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{u.email}</div>
            </div>
            <PlanBadge plan={u.plan}/>
            <StatusDot status={u.status}/>
            <span style={{ fontSize:13, fontWeight:700, color:u.mrr>0?'#10B981':'#9CA3AF' }}>{u.mrr>0?`$${u.mrr}`:'—'}</span>
            <span style={{ fontSize:12, color:'#6B7280' }}>{u.next_billing ? new Date(u.next_billing).toLocaleDateString('en-US',{month:'short',day:'numeric'}) : '—'}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ── SUPPORT ──────────────────────────────────────────────────
function SupportPage() {
  const { support_tickets } = window.MOCK;
  const [filter, setFilter] = useStateO('open');
  const [grants, setGrants] = useStateO([]);
  const [grantsLoading, setGrantsLoading] = useStateO(true);
  const [copiedId, setCopiedId] = useStateO(null);

  React.useEffect(() => {
    if (!window.AdminService) { setGrantsLoading(false); return; }
    window.AdminService.fetchSupportGrants()
      .then(grants => { setGrants(grants); setGrantsLoading(false); })
      .catch(() => setGrantsLoading(false));
  }, []);

  const copyLink = (link, id) => {
    navigator.clipboard.writeText(link);
    setCopiedId(id);
    setTimeout(() => setCopiedId(null), 2000);
  };

  const counts = { open: support_tickets.filter(t=>t.status==='open').length, pending: support_tickets.filter(t=>t.status==='pending').length, closed: support_tickets.filter(t=>t.status==='closed').length };
  const shown  = filter === 'all' ? support_tickets : support_tickets.filter(t => t.status === filter);

  const priorityColor = { high:'#F43F5E', medium:'#F59E0B', low:'#9CA3AF' };
  const statusColor   = { open:'#F43F5E', pending:'#F59E0B', closed:'#10B981' };

  return (
    <div style={{ display:'flex', flexDirection:'column', gap:20 }}>

      {/* Support Access Grants */}
      <div style={{ background:'#fff', border:'1px solid #E5E7EB', borderRadius:16, overflow:'hidden' }}>
        <div style={{ padding:'16px 20px', borderBottom:'1px solid #F3F4F6', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
          <div>
            <div style={{ fontSize:13, fontWeight:800, color:'#1A2B3B' }}>Support Access Grants</div>
            <div style={{ fontSize:11, color:'#9CA3AF', marginTop:2 }}>Users who enabled support access — click to log in as them</div>
          </div>
          <div style={{ padding:'4px 10px', background: grants.length > 0 ? '#ECFDF5' : '#F3F4F6', borderRadius:20, fontSize:11, fontWeight:700, color: grants.length > 0 ? '#10B981' : '#9CA3AF' }}>
            {grantsLoading ? '…' : `${grants.length} active`}
          </div>
        </div>

        {grantsLoading ? (
          <div style={{ padding:'32px 20px', textAlign:'center', color:'#9CA3AF', fontSize:13 }}>Loading…</div>
        ) : grants.length === 0 ? (
          <div style={{ padding:'32px 20px', textAlign:'center', color:'#9CA3AF', fontSize:13 }}>No users have granted support access.</div>
        ) : (
          <div>
            {grants.map((g, i) => (
              <div key={g.workspace_id} style={{ display:'grid', gridTemplateColumns:'1fr 1fr auto', alignItems:'center', gap:12, padding:'14px 20px', borderBottom: i < grants.length - 1 ? '1px solid #F3F4F6' : 'none' }}>
                {/* User info */}
                <div>
                  <div style={{ fontSize:13, fontWeight:700, color:'#1A2B3B' }}>{g.owner_name || g.owner_email}</div>
                  <div style={{ fontSize:11, color:'#9CA3AF', marginTop:2 }}>{g.owner_email}</div>
                </div>
                {/* Granted at */}
                <div style={{ fontSize:11, color:'#9CA3AF' }}>
                  {g.granted_at ? new Date(g.granted_at).toLocaleString('en-US', { month:'short', day:'numeric', year:'numeric', hour:'2-digit', minute:'2-digit' }) : '—'}
                </div>
                {/* Actions */}
                <div style={{ display:'flex', gap:8 }}>
                  <a
                    href={g.access_link}
                    target="_blank"
                    rel="noopener noreferrer"
                    style={{ padding:'8px 16px', background:'#1A2B3B', color:'#fff', borderRadius:10, fontSize:12, fontWeight:800, textDecoration:'none', display:'inline-flex', alignItems:'center', gap:6, whiteSpace:'nowrap' }}
                  >
                    🔑 Access Account
                  </a>
                  <button
                    onClick={() => copyLink(g.access_link, g.workspace_id)}
                    style={{ padding:'8px 12px', background: copiedId === g.workspace_id ? '#ECFDF5' : '#F9FAFB', color: copiedId === g.workspace_id ? '#10B981' : '#6B7280', border:'1px solid #E5E7EB', borderRadius:10, fontSize:12, fontWeight:700, cursor:'pointer', whiteSpace:'nowrap' }}
                  >
                    {copiedId === g.workspace_id ? '✓ Copied' : 'Copy link'}
                  </button>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Counts */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:12 }} className="g3">
        {[{l:'Open',s:'open',c:'#F43F5E'},{l:'Pending',s:'pending',c:'#F59E0B'},{l:'Resolved',s:'closed',c:'#10B981'}].map(s => (
          <div key={s.s} onClick={() => setFilter(filter===s.s?'all':s.s)}
            style={{ background:'#fff', border: filter===s.s?`2px solid ${s.c}`:'1px solid #E5E7EB', borderRadius:14, padding:'18px 20px', cursor:'pointer', transition:'border 0.15s' }}>
            <div style={{ fontSize:11, fontWeight:700, color:'#9CA3AF', textTransform:'uppercase', letterSpacing:'0.07em', marginBottom:10 }}>{s.l}</div>
            <div style={{ fontSize:26, fontWeight:900, color:s.c, letterSpacing:'-0.02em' }}>{counts[s.s]}</div>
          </div>
        ))}
      </div>

      <Tabs options={[{label:'Open',value:'open'},{label:'Pending',value:'pending'},{label:'Closed',value:'closed'},{label:'All',value:'all'}]} value={filter} onChange={setFilter}/>

      {/* Tickets */}
      <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
        {shown.map(t => (
          <div key={t.id}
            style={{ background:'#fff', border:'1px solid #E5E7EB', borderRadius:12, padding:'14px 16px', display:'flex', gap:12, alignItems:'flex-start', cursor:'pointer', transition:'border-color 0.12s' }}
            onMouseEnter={e => e.currentTarget.style.borderColor='#D1D5DB'}
            onMouseLeave={e => e.currentTarget.style.borderColor='#E5E7EB'}
          >
            <div style={{ width:6, height:6, borderRadius:'50%', background:priorityColor[t.priority], marginTop:5, flexShrink:0 }}/>
            <div style={{ flex:1, minWidth:0 }}>
              <div style={{ fontSize:13, fontWeight:700, color:'#1A2B3B', marginBottom:3 }}>{t.subject}</div>
              <div style={{ fontSize:11, color:'#9CA3AF' }}>{t.user} · {t.email}</div>
            </div>
            <div style={{ display:'flex', flexDirection:'column', alignItems:'flex-end', gap:5, flexShrink:0 }}>
              <span style={{ fontSize:10, fontWeight:700, color:statusColor[t.status], textTransform:'uppercase', letterSpacing:'0.06em' }}>{t.status}</span>
              <PlanBadge plan={t.plan}/>
              <span style={{ fontSize:10, color:'#9CA3AF' }}>{t.time}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { FeaturesPage, CostsPage, BillingPage, SupportPage });