/* Me2You - Admin RBAC Panel: Dashboard, Users, Listings, Orders, Disputes */
/* global React, Icon, StatusTag, RoleTag, Price, panelStyle, btnPrimary, btnGhost, btnDanger, btnSmall, ADMIN_USERS, SAMPLE_ORDERS, PRODUCTS */

const { useState } = React;

const ADMIN_STATS = [
 { label:'Active users', value:'847', icon:'users', color:'var(--success)' },
 { label:'Active sellers', value:'124', icon:'package', color:'var(--brand-orange)' },
 { label:'Live listings', value:'312', icon:'tag', color:'var(--info)' },
 { label:'Pending moderation', value:'8', icon:'clock', color:'var(--warning)' },
 { label:'Orders today', value:'23', icon:'receipt', color:'var(--success)' },
 { label:'30-day GMV', value:'R 184 200', icon:'wallet', color:'var(--brand-orange)' },
 { label:'Open disputes', value:'3', icon:'triangle-alert', color:'var(--danger)' },
 { label:'Logged in as', value:'Admin', icon:'shield-check', color:'var(--brand-plum)' },
];

const ADMIN_LISTINGS = [
 { id:1, title:'iPhone 11 64GB - Black', seller:'Thandi Q.', status:'pending', price:4500, date:'1 May 2026' },
 { id:2, title:'Fake Gucci bag', seller:'Scammer X.', status:'pending', price:200, date:'1 May 2026' },
 { id:3, title:'Nike Air Max - UK 9', seller:'Thandi Q.', status:'live', price:1200, date:'28 Apr 2026' },
 { id:4, title:'Hisense 32" Smart TV', seller:'Sipho M.', status:'live', price:1850, date:'25 Apr 2026' },
 { id:5, title:'Cast-iron pot, 4L', seller:'Mama K.', status:'live', price:380, date:'22 Apr 2026' },
];

const ADMIN_ORDERS = [
 { ref:'M2Y-2026-00248', buyer:'Nomsa M.', seller:'Sipho M.', status:'paid', total:1910, date:'28 Apr' },
 { ref:'M2Y-2026-00247', buyer:'Thandi K.', seller:'Mama K.', status:'dispatched', total:440, date:'27 Apr' },
 { ref:'M2Y-2026-00246', buyer:'James R.', seller:'Mandla K.', status:'completed', total:1460, date:'26 Apr' },
 { ref:'M2Y-2026-00245', buyer:'Siya N.', seller:'Naledi S.', status:'received', total:240, date:'25 Apr' },
 { ref:'M2Y-2026-00244', buyer:'Mbali D.', seller:'MaZulu S.', status:'disputed', total:155, date:'24 Apr' },
 { ref:'M2Y-2026-00243', buyer:'Grace D.', seller:'Pieter V.', status:'completed', total:510, date:'23 Apr' },
];

const ADMIN_DISPUTES = [
 { id:1, ref:'M2Y-2026-00244', buyer:'Mbali D.', seller:'MaZulu S.', reason:'Item not as described - received wrong size', status:'open', date:'24 Apr 2026', amount:155 },
 { id:2, ref:'M2Y-2026-00232', buyer:'David L.', seller:'Chris N.', reason:'Package arrived damaged, torn packaging', status:'open', date:'20 Apr 2026', amount:740 },
 { id:3, ref:'M2Y-2026-00218', buyer:'Fatima A.', seller:'Hennie V.', reason:'Never received item, tracking shows delivered', status:'open', date:'15 Apr 2026', amount:820 },
];

function AdminPanel() {
 const [tab, setTab] = useState('dashboard');
 const tabs = [
 { key:'dashboard', label:'Dashboard', icon:'bar-chart' },
 { key:'users', label:'Users', icon:'users' },
 { key:'listings', label:'Listings', icon:'package' },
 { key:'orders', label:'Orders', icon:'receipt' },
 { key:'disputes', label:'Disputes', icon:'triangle-alert' },
 { key:'payouts', label:'Payouts', icon:'wallet' },
 { key:'audit', label:'Audit log', icon:'shield-check' },
 ];

 return (
 <div style={{display:'grid',gridTemplateColumns:'220px 1fr',gap:0,minHeight:'calc(100vh - 72px)'}}>
 {/* Sidebar */}
 <aside style={{background:'var(--paper)',borderRight:'1px solid var(--ink-200)',padding:'24px 0'}}>
 <div style={{padding:'0 20px 20px',display:'flex',alignItems:'center',gap:10}}>
 <div style={{width:36,height:36,borderRadius:10,background:'var(--brand-plum-100)',
 display:'flex',alignItems:'center',justifyContent:'center',color:'var(--brand-plum)'}}>
 <Icon name="shield-check" size={18}/>
 </div>
 <div>
 <div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:14}}>Admin panel</div>
 <div style={{fontSize:11,color:'var(--ink-500)'}}>Marco P.</div>
 </div>
 </div>
 <nav style={{display:'flex',flexDirection:'column',gap:2}}>
 {tabs.map(t => (
 <button key={t.key} onClick={() => setTab(t.key)} style={{
 display:'flex',alignItems:'center',gap:10,padding:'10px 20px',
 background: tab===t.key ? 'var(--ink-50)' : 'transparent',
 border:'none',cursor:'pointer',fontFamily:'var(--font-body)',
 fontWeight: tab===t.key ? 700 : 500,fontSize:14,
 color: tab===t.key ? 'var(--ink-900)' : 'var(--ink-500)',
 borderLeft: tab===t.key ? '3px solid var(--brand-orange)' : '3px solid transparent',
 transition:'all .12s'
 }}>
 <Icon name={t.icon} size={18}/> {t.label}
 {t.key === 'disputes' && <span style={{marginLeft:'auto',background:'var(--danger)',color:'white',fontSize:10,fontWeight:800,borderRadius:999,padding:'2px 6px'}}>3</span>}
 {t.key === 'listings' && <span style={{marginLeft:'auto',background:'var(--warning)',color:'white',fontSize:10,fontWeight:800,borderRadius:999,padding:'2px 6px'}}>8</span>}
 </button>
 ))}
 </nav>
 </aside>

 {/* Main */}
 <div style={{padding:32,overflow:'auto'}}>
 {tab === 'dashboard' && <AdminDash/>}
 {tab === 'users' && <AdminUsers/>}
 {tab === 'listings' && <AdminListings/>}
 {tab === 'orders' && <AdminOrders/>}
 {tab === 'disputes' && <AdminDisputes/>}
 {tab === 'payouts' && <AdminPayoutRun/>}
 {tab === 'audit' && <AdminAuditLog/>}
 </div>
 </div>
 );
}

function AdminDash() {
 return (
 <div>
 <h1 style={{marginBottom:4}}>Dashboard</h1>
 <p style={{color:'var(--ink-500)',fontSize:14,marginBottom:24}}>Live snapshot - m2y.online</p>
 <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:12,marginBottom:32}}>
 {ADMIN_STATS.map(s => (
 <div key={s.label} style={{...panelStyle,padding:16,marginBottom:0}}>
 <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:6}}>
 <div style={{width:32,height:32,borderRadius:8,
 background:`color-mix(in oklch, ${s.color} 12%, white)`,
 display:'flex',alignItems:'center',justifyContent:'center',color:s.color}}>
 <Icon name={s.icon} size={16}/>
 </div>
 <span style={{fontFamily:'var(--font-body)',fontSize:11,color:'var(--ink-500)',fontWeight:600}}>{s.label}</span>
 </div>
 <div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:22}}>{s.value}</div>
 </div>
 ))}
 </div>
 <h3 style={{fontSize:18,marginBottom:12}}>Recent orders</h3>
 <AdminTable data={ADMIN_ORDERS} columns={[
 { key:'ref', label:'Ref', mono:true },
 { key:'buyer', label:'Buyer' },
 { key:'seller', label:'Seller' },
 { key:'status', label:'Status', render: v => <StatusTag status={v}/> },
 { key:'total', label:'Total', align:'right', render: v => <Price amount={v} size="sm"/> },
 ]}/>
 </div>
 );
}

function AdminUsers() {
 const [search, setSearch] = useState('');
 const filtered = ADMIN_USERS.filter(u => u.name.toLowerCase().includes(search.toLowerCase()) || u.email.toLowerCase().includes(search.toLowerCase()));
 return (
 <div>
 <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:20}}>
 <h1>Users</h1>
 <div style={{display:'flex',gap:8}}>
 <input value={search} onChange={e => setSearch(e.target.value)} placeholder="Search users..."
 style={{padding:'10px 14px',border:'1.5px solid var(--ink-200)',borderRadius:'var(--radius-sm)',fontFamily:'var(--font-body)',fontSize:14,width:240}}/>
 <button style={btnPrimary}><Icon name="plus" size={16}/> Add user</button>
 </div>
 </div>
 <AdminTable data={filtered} columns={[
 { key:'name', label:'Name', render:(v,r) => (
 <div style={{display:'flex',alignItems:'center',gap:10}}>
 <div style={{width:32,height:32,borderRadius:999,background:'var(--brand-orange-100)',
 display:'flex',alignItems:'center',justifyContent:'center',fontWeight:700,fontSize:13,color:'var(--brand-orange-700)'}}>
 {v.charAt(0)}
 </div>
 <div>
 <div style={{fontWeight:600}}>{v}</div>
 <div style={{fontSize:12,color:'var(--ink-500)'}}>{r.email}</div>
 </div>
 </div>
 )},
 { key:'role', label:'Role', render: v => <RoleTag role={v}/> },
 { key:'status', label:'Status', render: v => <StatusTag status={v}/> },
 { key:'joined', label:'Joined' },
 { key:'listings', label:'Listings', align:'center' },
 { key:'orders', label:'Orders', align:'center' },
 { key:'_actions', label:'', render:(_,r) => (
 <div style={{display:'flex',gap:4}}>
 <button style={{...btnSmall,padding:'4px 8px'}} title="Edit"><Icon name="edit" size={14}/></button>
 {r.status === 'active'
 ? <button style={{...btnSmall,padding:'4px 8px',color:'var(--danger)'}} title="Suspend"><Icon name="ban" size={14}/></button>
 : <button style={{...btnSmall,padding:'4px 8px',color:'var(--success)'}} title="Activate"><Icon name="check-circle" size={14}/></button>
 }
 </div>
 )},
 ]}/>
 </div>
 );
}

function AdminListings() {
 return (
 <div>
 <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:20}}>
 <h1>Listing moderation</h1>
 <div style={{display:'flex',gap:8}}>
 {['All','Pending','Live','Removed'].map(f => (
 <button key={f} style={{...btnSmall,padding:'6px 14px',fontSize:13}}>{f}</button>
 ))}
 </div>
 </div>
 <AdminTable data={ADMIN_LISTINGS} columns={[
 { key:'title', label:'Title', render:(v,r) => <span style={{fontWeight:600}}>{v}</span> },
 { key:'seller', label:'Seller' },
 { key:'price', label:'Price', render: v => <Price amount={v} size="sm"/> },
 { key:'status', label:'Status', render: v => <StatusTag status={v}/> },
 { key:'date', label:'Date' },
 { key:'_actions', label:'', render:(_,r) => (
 <div style={{display:'flex',gap:4}}>
 {r.status === 'pending' && <>
 <button style={{...btnSmall,padding:'4px 10px',color:'var(--success)',borderColor:'var(--success)',fontSize:12}}>
 <Icon name="check" size={14}/> Approve
 </button>
 <button style={{...btnSmall,padding:'4px 10px',color:'var(--danger)',borderColor:'var(--danger)',fontSize:12}}>
 <Icon name="x" size={14}/> Reject
 </button>
 </>}
 {r.status === 'live' && <button style={{...btnSmall,padding:'4px 10px',color:'var(--danger)',fontSize:12}}>
 <Icon name="trash" size={14}/> Remove
 </button>}
 </div>
 )},
 ]}/>
 </div>
 );
}

function AdminOrders() {
 return (
 <div>
 <h1 style={{marginBottom:20}}>Orders</h1>
 <AdminTable data={ADMIN_ORDERS} columns={[
 { key:'ref', label:'Reference', mono:true },
 { key:'buyer', label:'Buyer' },
 { key:'seller', label:'Seller' },
 { key:'status', label:'Status', render: v => <StatusTag status={v}/> },
 { key:'total', label:'Total', align:'right', render: v => <Price amount={v} size="sm"/> },
 { key:'date', label:'Date' },
 { key:'_actions', label:'', render:() => <button style={{...btnSmall,padding:'4px 10px',fontSize:12}}><Icon name="eye" size={14}/> View</button> },
 ]}/>
 </div>
 );
}

function AdminDisputes() {
 return (
 <div>
 <h1 style={{marginBottom:4}}>Disputes</h1>
 <p style={{color:'var(--ink-500)',fontSize:14,marginBottom:20}}>Review buyer complaints and resolve escrow holds.</p>
 {ADMIN_DISPUTES.map(d => (
 <div key={d.id} style={{...panelStyle,borderLeft:'4px solid var(--danger)'}}>
 <div style={{display:'flex',justifyContent:'space-between',alignItems:'start',marginBottom:8}}>
 <div>
 <div style={{fontFamily:'var(--font-mono)',fontSize:12,fontWeight:600,color:'var(--ink-500)'}}>{d.ref}</div>
 <div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:16,marginTop:4}}>{d.reason}</div>
 </div>
 <StatusTag status={d.status}/>
 </div>
 <div style={{fontSize:13,color:'var(--ink-500)',marginBottom:12}}>
 Buyer: <strong>{d.buyer}</strong> - Seller: <strong>{d.seller}</strong> - {d.date} - <Price amount={d.amount} size="sm"/>
 </div>
 <div style={{display:'flex',gap:8}}>
 <button style={{...btnSmall,color:'var(--success)',borderColor:'var(--success)',fontSize:12}}>
 <Icon name="check" size={14}/> Refund buyer
 </button>
 <button style={{...btnSmall,color:'var(--brand-orange-700)',borderColor:'var(--brand-orange)',fontSize:12}}>
 <Icon name="arrow-right" size={14}/> Release to seller
 </button>
 <button style={{...btnSmall,fontSize:12}}>
 <Icon name="message-circle" size={14}/> Contact both
 </button>
 </div>
 </div>
 ))}
 </div>
 );
}

/* --- Reusable admin table --- */
function AdminTable({ data, columns }) {
 return (
 <div style={{...panelStyle,padding:0,overflow:'hidden'}}>
 <table style={{width:'100%',borderCollapse:'collapse',fontFamily:'var(--font-body)',fontSize:14}}>
 <thead>
 <tr style={{background:'var(--ink-50)'}}>
 {columns.map(c => (
 <th key={c.key} style={{padding:'10px 16px',fontFamily:'var(--font-mono)',fontSize:11,fontWeight:600,
 color:'var(--ink-500)',textTransform:'uppercase',letterSpacing:'.06em',textAlign:c.align||'left'}}>
 {c.label}
 </th>
 ))}
 </tr>
 </thead>
 <tbody>
 {data.map((row,i) => (
 <tr key={i} style={{borderBottom:'1px solid var(--ink-100)',transition:'background .1s'}}
 onMouseEnter={e => e.currentTarget.style.background='var(--ink-50)'}
 onMouseLeave={e => e.currentTarget.style.background='transparent'}>
 {columns.map(c => (
 <td key={c.key} style={{padding:'12px 16px',textAlign:c.align||'left',
 fontFamily: c.mono ? 'var(--font-mono)' : 'inherit',fontSize: c.mono ? 12 : 14}}>
 {c.render ? c.render(row[c.key], row) : row[c.key]}
 </td>
 ))}
 </tr>
 ))}
 </tbody>
 </table>
 </div>
 );
}

Object.assign(window, { AdminPanel });