import { useState, useEffect } from "react";

// ── CONFIG ────────────────────────────────────────────────────
const API_BASE = "https://yoursite.com";

const DEMO_USERS = [
  { id:1, username:"superadmin", password:"Admin@1234", full_name:"Sheperd Admin",  role:"superadmin", email:"admin@sheperd.co.uk" },
  { id:2, username:"admin",      password:"Admin@1234", full_name:"License Admin",  role:"admin",      email:"admin2@sheperd.co.uk" },
  { id:3, username:"viewer",     password:"Admin@1234", full_name:"Report Viewer",  role:"viewer",     email:"viewer@sheperd.co.uk" },
];

const PRODUCTS = ["BI Pro","DataViz","EduTrack","CRM Suite","Analytics Plus"];

const MOCK_LICENSES = [
  { id:1, license_key:"A1B2-C3D4-E5F6-G7H8", client_name:"Acme Corp",      email:"admin@acme.com",          product:"BI Pro",    issued_date:"2025-01-01", expiry_date:"2026-12-01", is_active:1, max_activations:5, current_activations:3 },
  { id:2, license_key:"X9Y8-Z7W6-V5U4-T3S2", client_name:"Gulf Tech LLC",  email:"it@gulftech.sa",          product:"DataViz",   issued_date:"2025-03-15", expiry_date:"2025-12-31", is_active:1, max_activations:2, current_activations:2 },
  { id:3, license_key:"P1Q2-R3S4-T5U6-V7W8", client_name:"Kerala Schools", email:"admin@keralaschools.in",  product:"EduTrack",  issued_date:"2024-06-01", expiry_date:"2025-06-01", is_active:0, max_activations:10,current_activations:0 },
  { id:4, license_key:"M1N2-O3P4-Q5R6-S7T8", client_name:"NRI Helpdesk",   email:"support@nrihelpdesk.com", product:"BI Pro",    issued_date:"2025-07-01", expiry_date:"2026-07-01", is_active:1, max_activations:3, current_activations:1 },
  { id:5, license_key:"D4E5-F6G7-H8I9-J0K1", client_name:"TechStart Ltd",  email:"cto@techstart.io",        product:"CRM Suite", issued_date:"2025-09-01", expiry_date:"2026-09-01", is_active:1, max_activations:1, current_activations:1 },
];

const genKey = () => { const s=()=>Math.random().toString(36).substring(2,6).toUpperCase(); return `${s()}-${s()}-${s()}-${s()}`; };
const isExpired = d => new Date(d) < new Date();
const daysLeft  = d => Math.max(0, Math.ceil((new Date(d)-new Date())/86400000));
const roleColor = r => ({superadmin:{bg:"#312e81",color:"#a5b4fc"},admin:{bg:"#052e16",color:"#4ade80"},viewer:{bg:"#422006",color:"#fb923c"}}[r]||{bg:"#1e293b",color:"#94a3b8"});
const roleIcon  = r => ({superadmin:"👑",admin:"🛡️",viewer:"👁️"}[r]||"👤");
const can = (user, perm) => {
  const perms = { superadmin:["all"], admin:["license.view","license.create","license.edit","license.delete","license.toggle","report.export"], viewer:["license.view","report.export"] };
  const p = perms[user?.role]||[];
  return p.includes("all") || p.includes(perm);
};

// ── STATUS BADGE ─────────────────────────────────────────────
function Badge({active, expiry}) {
  if (!active)           return <span style={{padding:"3px 10px",borderRadius:20,fontSize:11,fontWeight:700,background:"#1e1b4b",color:"#818cf8",border:"1px solid #312e81"}}>Inactive</span>;
  if (isExpired(expiry)) return <span style={{padding:"3px 10px",borderRadius:20,fontSize:11,fontWeight:700,background:"#431407",color:"#fb923c",border:"1px solid #7c2d12"}}>Expired</span>;
  return <span style={{padding:"3px 10px",borderRadius:20,fontSize:11,fontWeight:700,background:"#052e16",color:"#4ade80",border:"1px solid #166534"}}>Active</span>;
}

// ── TOAST ────────────────────────────────────────────────────
function Toast({toast}) {
  if (!toast) return null;
  const styles = {success:{bg:"#052e16",color:"#4ade80",border:"1px solid #166534"},error:{bg:"#450a0a",color:"#f87171",border:"1px solid #7f1d1d"},info:{bg:"#0c1445",color:"#818cf8",border:"1px solid #312e81"}};
  const s = styles[toast.type]||styles.info;
  return <div style={{position:"fixed",bottom:24,right:24,padding:"12px 20px",borderRadius:10,fontSize:13,fontWeight:600,zIndex:999,animation:"si .3s ease",...s}}>{toast.msg}</div>;
}

// ════════════════════════════════════════════════════════════
export default function App() {
  const [user, setUser]         = useState(null);
  const [page, setPage]         = useState("dashboard");
  const [licenses, setLicenses] = useState(MOCK_LICENSES);
  const [selected, setSelected] = useState(null);
  const [toast, setToast]       = useState(null);
  // login
  const [creds, setCreds]       = useState({username:"",password:""});
  const [showPass, setShowPass] = useState(false);
  const [loginErr, setLoginErr] = useState("");
  const [loginLoad, setLoginLoad] = useState(false);
  // forgot
  const [forgotEmail, setForgotEmail] = useState("");
  const [forgotMsg, setForgotMsg]     = useState({err:"",suc:""});
  // list filters
  const [search, setSearch]       = useState("");
  const [fProd, setFProd]         = useState("All");
  const [fStatus, setFStatus]     = useState("All");
  // new license form
  const [form, setForm] = useState({client_name:"",email:"",product:"BI Pro",expiry_date:"",max_activations:1,license_key:genKey()});
  const [formErr, setFormErr] = useState("");
  // sidebar collapse on small
  const [sideOpen, setSideOpen] = useState(true);

  const showToast = (msg, type="success") => { setToast({msg,type}); setTimeout(()=>setToast(null),3200); };

  // ── LOGIN ──
  const doLogin = async () => {
    setLoginErr("");
    if (!creds.username||!creds.password) { setLoginErr("Please enter username and password."); return; }
    setLoginLoad(true);
    await new Promise(r=>setTimeout(r,1000));
    const found = DEMO_USERS.find(u=>u.username===creds.username&&u.password===creds.password);
    setLoginLoad(false);
    if (!found) { setLoginErr("Invalid username or password."); return; }
    setUser(found); setPage("dashboard");
  };

  const doLogout = () => { setUser(null); setCreds({username:"",password:""}); setPage("dashboard"); showToast("Logged out successfully.","info"); };

  // ── FORGOT ──
  const doForgot = async () => {
    setForgotMsg({err:"",suc:""});
    if (!forgotEmail) { setForgotMsg({err:"Enter your email address.",suc:""}); return; }
    await new Promise(r=>setTimeout(r,800));
    setForgotMsg({err:"",suc:`Reset link sent to ${forgotEmail}.`});
  };

  // ── LICENSE ACTIONS ──
  const toggleLicense  = id => { setLicenses(p=>p.map(l=>l.id===id?{...l,is_active:l.is_active?0:1}:l)); showToast("License status updated."); };
  const deleteLicense  = id => { setLicenses(p=>p.filter(l=>l.id!==id)); setSelected(null); showToast("License deleted.","error"); };
  const addLicense     = () => {
    if (!form.client_name||!form.email||!form.expiry_date) { setFormErr("All fields are required."); return; }
    setLicenses(p=>[{...form,id:Date.now(),issued_date:new Date().toISOString().split("T")[0],is_active:1,current_activations:0},...p]);
    setForm({client_name:"",email:"",product:"BI Pro",expiry_date:"",max_activations:1,license_key:genKey()});
    setFormErr(""); showToast("License created successfully!"); setPage("list");
  };
  const copyKey = k => { navigator.clipboard?.writeText(k); showToast("Key copied to clipboard!"); };

  // ── FILTERED LIST ──
  const filtered = licenses.filter(l=>{
    const q=search.toLowerCase();
    const ms=!q||l.license_key.toLowerCase().includes(q)||l.client_name.toLowerCase().includes(q)||l.email.toLowerCase().includes(q);
    const mp=fProd==="All"||l.product===fProd;
    const mst=fStatus==="All"||(fStatus==="Active"&&l.is_active&&!isExpired(l.expiry_date))||(fStatus==="Expired"&&isExpired(l.expiry_date))||(fStatus==="Inactive"&&!l.is_active);
    return ms&&mp&&mst;
  });

  const stats = { total:licenses.length, active:licenses.filter(l=>l.is_active&&!isExpired(l.expiry_date)).length, expired:licenses.filter(l=>isExpired(l.expiry_date)).length, inactive:licenses.filter(l=>!l.is_active).length };

  // ════ STYLES ═══════════════════════════════════════════════
  const S = {
    app:  {fontFamily:"'Segoe UI',sans-serif",background:"#0f172a",minHeight:"100vh",color:"#e2e8f0"},
    card: {background:"#1e293b",border:"1px solid #334155",borderRadius:12,padding:20},
    inp:  {width:"100%",background:"#0f172a",border:"1.5px solid #334155",color:"#e2e8f0",borderRadius:10,padding:"11px 14px",fontSize:13,outline:"none"},
    lbl:  {fontSize:11,color:"#94a3b8",marginBottom:5,display:"block",fontWeight:700,letterSpacing:.5},
    btnP: {padding:"9px 18px",background:"#6366f1",color:"white",border:"none",borderRadius:8,fontSize:13,fontWeight:600,cursor:"pointer"},
    btnG: {padding:"9px 18px",background:"#1e293b",color:"#94a3b8",border:"1px solid #334155",borderRadius:8,fontSize:13,fontWeight:600,cursor:"pointer"},
    th:   {padding:"10px 14px",textAlign:"left",color:"#64748b",fontSize:11,letterSpacing:.8,textTransform:"uppercase",borderBottom:"1px solid #334155"},
    td:   {padding:"12px 14px",borderBottom:"1px solid #1e293b",verticalAlign:"middle",fontSize:13},
  };

  // ════ CSS INJECTION ════════════════════════════════════════
  useEffect(()=>{
    const style=document.createElement("style");
    style.innerHTML=`
      *{box-sizing:border-box;margin:0;padding:0}
      @keyframes si{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
      @keyframes sp{to{transform:rotate(360deg)}}
      .spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;display:inline-block;vertical-align:middle;margin-right:6px}
      .inp:focus{border-color:#6366f1!important;box-shadow:0 0 0 3px rgba(99,102,241,.15)}
      .btn-main{width:100%;padding:13px;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:white;border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;transition:opacity .2s}
      .btn-main:hover:not(:disabled){opacity:.88}
      .btn-main:disabled{opacity:.6;cursor:not-allowed}
      .nav-item{padding:10px 14px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;color:#94a3b8;display:flex;align-items:center;gap:8px;transition:background .15s}
      .nav-item:hover{background:#1e293b;color:#fff}
      .nav-item.active{background:#312e81;color:#a5b4fc}
      .trow:hover td{background:#1e293b}
      .chip{background:#1e1b4b;border:1px solid #3730a3;color:#a5b4fc;padding:5px 12px;border-radius:6px;font-size:11px;cursor:pointer;font-weight:600}
      .chip:hover{background:#312e81}
      .key-chip{font-family:monospace;font-size:11px;background:#0f172a;border:1px solid #334155;padding:4px 8px;border-radius:6px;letter-spacing:1px;cursor:pointer;white-space:nowrap}
      .key-chip:hover{border-color:#6366f1}
      .pb{background:#0f172a;border-radius:10px;height:5px;overflow:hidden;margin-top:4px}
      .pf{height:100%;border-radius:10px;background:linear-gradient(90deg,#6366f1,#8b5cf6)}
      .modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;z-index:100}
      .modal{background:#1e293b;border:1px solid #334155;border-radius:16px;padding:28px;width:500px;max-width:95vw}
      .div-line{display:flex;align-items:center;gap:12px;color:#475569;font-size:12px;margin:18px 0 12px}
      .div-line::before,.div-line::after{content:'';flex:1;height:1px;background:#334155}
      select{background:#0f172a;border:1.5px solid #334155;color:#e2e8f0;border-radius:10px;padding:11px 14px;font-size:13px;width:100%;outline:none}
      select:focus{border-color:#6366f1}
      input[type=date]{color-scheme:dark}
      .sb-btn:hover{background:#991b1b!important}
    `;
    document.head.appendChild(style);
    return ()=>document.head.removeChild(style);
  },[]);

  // ════ LOGIN SCREEN ════════════════════════════════════════
  if (!user) return (
    <div style={{...S.app,display:"flex",alignItems:"center",justifyContent:"center",minHeight:"100vh",padding:20,background:"radial-gradient(ellipse at 60% 20%,#1e1b4b 0%,#0f172a 65%)"}}>
      {page==="login"||page==="dashboard" ? (
        <div style={{width:"100%",maxWidth:420}}>
          <div style={{textAlign:"center",marginBottom:30}}>
            <div style={{fontSize:46,marginBottom:8}}>🔑</div>
            <div style={{fontSize:26,fontWeight:900,color:"#a5b4fc",letterSpacing:-1}}>LicenseHQ</div>
            <div style={{fontSize:13,color:"#475569",marginTop:4}}>Sheperd Limited — Admin Portal</div>
          </div>
          <div style={{...S.card,borderRadius:16,padding:"36px 32px"}}>
            <div style={{fontWeight:800,fontSize:20,marginBottom:6}}>Welcome back 👋</div>
            <div style={{color:"#64748b",fontSize:13,marginBottom:24}}>Sign in to manage your licenses</div>
            <div style={{display:"flex",flexDirection:"column",gap:16}}>
              <div>
                <span style={S.lbl}>USERNAME</span>
                <div style={{position:"relative"}}>
                  <span style={{position:"absolute",left:13,top:"50%",transform:"translateY(-50%)",fontSize:15,pointerEvents:"none"}}>👤</span>
                  <input className="inp" style={{...S.inp,paddingLeft:40}} placeholder="Enter your username" value={creds.username}
                    onChange={e=>{setCreds(f=>({...f,username:e.target.value}));setLoginErr("");}}
                    onKeyDown={e=>e.key==="Enter"&&doLogin()} />
                </div>
              </div>
              <div>
                <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:5}}>
                  <span style={S.lbl}>PASSWORD</span>
                  <span style={{color:"#818cf8",fontSize:13,cursor:"pointer"}} onClick={()=>setPage("forgot")}>Forgot password?</span>
                </div>
                <div style={{position:"relative"}}>
                  <span style={{position:"absolute",left:13,top:"50%",transform:"translateY(-50%)",fontSize:15,pointerEvents:"none"}}>🔒</span>
                  <input className="inp" style={{...S.inp,paddingLeft:40,paddingRight:42}} type={showPass?"text":"password"} placeholder="Enter your password"
                    value={creds.password} onChange={e=>{setCreds(f=>({...f,password:e.target.value}));setLoginErr("");}}
                    onKeyDown={e=>e.key==="Enter"&&doLogin()} />
                  <span onClick={()=>setShowPass(s=>!s)} style={{position:"absolute",right:13,top:"50%",transform:"translateY(-50%)",cursor:"pointer",fontSize:15,color:"#64748b"}}>{showPass?"🙈":"👁️"}</span>
                </div>
              </div>
              {loginErr && <div style={{background:"#450a0a",border:"1px solid #7f1d1d",color:"#fca5a5",padding:"11px 14px",borderRadius:8,fontSize:13}}>⚠️ {loginErr}</div>}
              <button className="btn-main" onClick={doLogin} disabled={loginLoad}>
                {loginLoad?<><span className="spin"/>Signing in…</>:"Sign In →"}
              </button>
            </div>
            <div className="div-line">Quick Demo Login</div>
            <div style={{display:"flex",gap:8,flexWrap:"wrap"}}>
              {DEMO_USERS.map(u=>(
                <span key={u.username} className="chip" onClick={()=>setCreds({username:u.username,password:u.password})}>
                  {roleIcon(u.role)} {u.username}
                </span>
              ))}
            </div>
            <div style={{fontSize:11,color:"#475569",marginTop:8}}>Click a chip to auto-fill · Password: <code style={{color:"#a5b4fc"}}>Admin@1234</code></div>
          </div>
          <div style={{textAlign:"center",marginTop:20,fontSize:12,color:"#334155"}}>© 2026 Sheperd Limited · All rights reserved</div>
        </div>
      ) : (
        <div style={{width:"100%",maxWidth:400}}>
          <div style={{textAlign:"center",marginBottom:28}}>
            <div style={{fontSize:40,marginBottom:8}}>📧</div>
            <div style={{fontSize:22,fontWeight:900,color:"#a5b4fc"}}>Reset Password</div>
            <div style={{fontSize:13,color:"#475569",marginTop:4}}>Enter your email to receive a reset link</div>
          </div>
          <div style={{...S.card,borderRadius:16,padding:"32px"}}>
            <div style={{display:"flex",flexDirection:"column",gap:14}}>
              <div>
                <span style={S.lbl}>EMAIL ADDRESS</span>
                <div style={{position:"relative"}}>
                  <span style={{position:"absolute",left:13,top:"50%",transform:"translateY(-50%)",fontSize:15,pointerEvents:"none"}}>📧</span>
                  <input className="inp" style={{...S.inp,paddingLeft:40}} type="email" placeholder="your@email.com"
                    value={forgotEmail} onChange={e=>{setForgotEmail(e.target.value);setForgotMsg({err:"",suc:""});}} />
                </div>
              </div>
              {forgotMsg.err && <div style={{background:"#450a0a",border:"1px solid #7f1d1d",color:"#fca5a5",padding:"10px 14px",borderRadius:8,fontSize:13}}>⚠️ {forgotMsg.err}</div>}
              {forgotMsg.suc && <div style={{background:"#052e16",border:"1px solid #166534",color:"#86efac",padding:"10px 14px",borderRadius:8,fontSize:13}}>✅ {forgotMsg.suc}</div>}
              <button className="btn-main" onClick={doForgot}>Send Reset Link</button>
              <div style={{textAlign:"center"}}>
                <span style={{color:"#818cf8",fontSize:13,cursor:"pointer"}} onClick={()=>{setPage("login");setForgotMsg({err:"",suc:""});}}>← Back to Login</span>
              </div>
            </div>
          </div>
        </div>
      )}
      <Toast toast={toast}/>
    </div>
  );

  // ════ MAIN APP ════════════════════════════════════════════
  return (
    <div style={{...S.app,display:"flex"}}>

      {/* ── SIDEBAR ── */}
      <div style={{width:220,background:"#0f172a",borderRight:"1px solid #1e293b",padding:"20px 12px",display:"flex",flexDirection:"column",gap:4,flexShrink:0,minHeight:"100vh"}}>
        <div style={{padding:"0 8px 20px",borderBottom:"1px solid #1e293b",marginBottom:8}}>
          <div style={{fontSize:18,fontWeight:800,color:"#a5b4fc"}}>🔑 LicenseHQ</div>
          <div style={{fontSize:11,color:"#475569",marginTop:2}}>Sheperd Limited</div>
        </div>
        {[
          ["dashboard","📊","Dashboard"],
          ["list","📋","All Licenses"],
          ...(can(user,"license.create")?[["add","➕","New License"]]:[]),
          ...(can(user,"user.manage")?[["users","👥","Users"]]:[]),
        ].map(([id,ic,lb])=>(
          <div key={id} className={`nav-item ${page===id?"active":""}`} onClick={()=>setPage(id)}>{ic} {lb}</div>
        ))}
        <div style={{marginTop:"auto",borderTop:"1px solid #1e293b",paddingTop:14}}>
          <div style={{display:"flex",alignItems:"center",gap:10,padding:"8px 8px 12px"}}>
            <div style={{width:35,height:35,borderRadius:"50%",background:"linear-gradient(135deg,#6366f1,#8b5cf6)",display:"flex",alignItems:"center",justifyContent:"center",fontSize:15,fontWeight:800,flexShrink:0}}>
              {user.full_name[0]}
            </div>
            <div style={{minWidth:0}}>
              <div style={{fontSize:13,fontWeight:700,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}}>{user.full_name}</div>
              <span style={{fontSize:10,padding:"2px 7px",borderRadius:10,fontWeight:700,...roleColor(user.role)}}>{roleIcon(user.role)} {user.role}</span>
            </div>
          </div>
          <div style={{padding:"0 4px",marginBottom:6,fontSize:11,color:"#334155"}}>
            <span style={{display:"inline-block",width:7,height:7,borderRadius:"50%",background:"#4ade80",marginRight:4,boxShadow:"0 0 5px #4ade80"}}></span>Session Active
          </div>
          <button onClick={doLogout} style={{width:"100%",background:"#1e293b",border:"1px solid #334155",color:"#f87171",borderRadius:8,padding:"8px 0",fontSize:13,fontWeight:600,cursor:"pointer"}} className="sb-btn">
            🚪 Logout
          </button>
        </div>
      </div>

      {/* ── CONTENT ── */}
      <div style={{flex:1,padding:24,overflow:"auto",minHeight:"100vh"}}>

        {/* ── DASHBOARD PAGE ── */}
        {page==="dashboard" && (
          <div>
            <div style={{background:"linear-gradient(135deg,#312e81,#1e1b4b)",border:"1px solid #3730a3",borderRadius:16,padding:"22px 26px",marginBottom:22,display:"flex",justifyContent:"space-between",alignItems:"center"}}>
              <div>
                <div style={{fontSize:21,fontWeight:800}}>Welcome back, {user.full_name.split(" ")[0]}! 👋</div>
                <div style={{color:"#818cf8",fontSize:13,marginTop:4}}>
                  {new Date().toLocaleDateString("en-GB",{weekday:"long",year:"numeric",month:"long",day:"numeric"})} · Logged in as <strong>{user.username}</strong>
                </div>
              </div>
              <span style={{fontSize:13,padding:"6px 14px",borderRadius:20,fontWeight:700,...roleColor(user.role)}}>{roleIcon(user.role)} {user.role.toUpperCase()}</span>
            </div>

            {/* Stats */}
            <div style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:14,marginBottom:22}}>
              {[
                {label:"Total Licenses",val:stats.total,icon:"🔑",color:"#6366f1"},
                {label:"Active",val:stats.active,icon:"✅",color:"#4ade80"},
                {label:"Expired",val:stats.expired,icon:"⏰",color:"#fb923c"},
                {label:"Inactive",val:stats.inactive,icon:"🚫",color:"#818cf8"},
              ].map(s=>(
                <div key={s.label} style={{...S.card,textAlign:"center",background:"linear-gradient(135deg,#1e293b,#0f172a)"}}>
                  <div style={{fontSize:24}}>{s.icon}</div>
                  <div style={{fontSize:30,fontWeight:900,color:s.color,margin:"6px 0 2px"}}>{s.val}</div>
                  <div style={{fontSize:12,color:"#64748b"}}>{s.label}</div>
                  <div className="pb"><div className="pf" style={{width:`${(s.val/stats.total)*100}%`,background:s.color}}></div></div>
                </div>
              ))}
            </div>

            {/* Recent licenses */}
            <div style={S.card}>
              <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:16}}>
                <div style={{fontWeight:700,fontSize:15}}>📋 Recent Licenses</div>
                <button style={S.btnP} onClick={()=>setPage("list")}>View All</button>
              </div>
              <table style={{width:"100%",borderCollapse:"collapse",fontSize:13}}>
                <thead><tr>
                  {["Client","Product","Key","Expires","Status"].map(h=><th key={h} style={S.th}>{h}</th>)}
                </tr></thead>
                <tbody>
                  {licenses.slice(0,5).map(l=>(
                    <tr key={l.id} className="trow" style={{cursor:"pointer"}} onClick={()=>setSelected(l)}>
                      <td style={S.td}><div style={{fontWeight:600}}>{l.client_name}</div><div style={{fontSize:11,color:"#64748b"}}>{l.email}</div></td>
                      <td style={S.td}><span style={{background:"#1e1b4b",color:"#a5b4fc",padding:"2px 8px",borderRadius:6,fontSize:11}}>{l.product}</span></td>
                      <td style={S.td}><span className="key-chip" onClick={e=>{e.stopPropagation();copyKey(l.license_key);}}>{l.license_key}</span></td>
                      <td style={{...S.td,color:isExpired(l.expiry_date)?"#fb923c":"#94a3b8",fontSize:12}}>{l.expiry_date}<br/><span style={{fontSize:10}}>{daysLeft(l.expiry_date)}d left</span></td>
                      <td style={S.td}><Badge active={l.is_active} expiry={l.expiry_date}/></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {/* ── LIST PAGE ── */}
        {page==="list" && (
          <div>
            <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:20}}>
              <div>
                <div style={{fontSize:22,fontWeight:800}}>All Licenses</div>
                <div style={{color:"#64748b",fontSize:13,marginTop:2}}>{filtered.length} of {licenses.length} licenses</div>
              </div>
              {can(user,"license.create") && <button style={S.btnP} onClick={()=>setPage("add")}>+ New License</button>}
            </div>
            <div style={{display:"grid",gridTemplateColumns:"1fr 160px 160px",gap:12,marginBottom:16}}>
              <div style={{position:"relative"}}>
                <span style={{position:"absolute",left:13,top:"50%",transform:"translateY(-50%)",fontSize:14,pointerEvents:"none"}}>🔍</span>
                <input className="inp" style={{...S.inp,paddingLeft:38}} placeholder="Search client, email or key…" value={search} onChange={e=>setSearch(e.target.value)}/>
              </div>
              <select value={fProd} onChange={e=>setFProd(e.target.value)}><option>All</option>{PRODUCTS.map(p=><option key={p}>{p}</option>)}</select>
              <select value={fStatus} onChange={e=>setFStatus(e.target.value)}>{["All","Active","Expired","Inactive"].map(s=><option key={s}>{s}</option>)}</select>
            </div>
            <div style={{...S.card,padding:0,overflow:"hidden"}}>
              <table style={{width:"100%",borderCollapse:"collapse",fontSize:13}}>
                <thead><tr>{["Client","Product","License Key","Activations","Expires","Status","Actions"].map(h=><th key={h} style={S.th}>{h}</th>)}</tr></thead>
                <tbody>
                  {filtered.map(l=>(
                    <tr key={l.id} className="trow">
                      <td style={S.td}><div style={{fontWeight:600}}>{l.client_name}</div><div style={{fontSize:11,color:"#64748b"}}>{l.email}</div></td>
                      <td style={S.td}><span style={{background:"#1e1b4b",color:"#a5b4fc",padding:"2px 8px",borderRadius:6,fontSize:11}}>{l.product}</span></td>
                      <td style={S.td}><span className="key-chip" title="Click to copy" onClick={()=>copyKey(l.license_key)}>{l.license_key}</span></td>
                      <td style={S.td}><div style={{fontSize:12}}>{l.current_activations}/{l.max_activations}</div><div className="pb" style={{width:60}}><div className="pf" style={{width:`${(l.current_activations/l.max_activations)*100}%`}}></div></div></td>
                      <td style={{...S.td,fontSize:12,color:isExpired(l.expiry_date)?"#fb923c":"#94a3b8"}}>{l.expiry_date}<br/><span style={{fontSize:10}}>{daysLeft(l.expiry_date)}d left</span></td>
                      <td style={S.td}><Badge active={l.is_active} expiry={l.expiry_date}/></td>
                      <td style={S.td}>
                        <div style={{display:"flex",gap:6}}>
                          <button style={S.btnG} onClick={()=>setSelected(l)}>View</button>
                          {can(user,"license.toggle") && (
                            <button style={{padding:"5px 10px",background:l.is_active?"#422006":"#052e16",color:l.is_active?"#fb923c":"#4ade80",border:"none",borderRadius:6,fontSize:11,fontWeight:600,cursor:"pointer"}} onClick={()=>toggleLicense(l.id)}>
                              {l.is_active?"Disable":"Enable"}
                            </button>
                          )}
                        </div>
                      </td>
                    </tr>
                  ))}
                  {filtered.length===0 && <tr><td colSpan={7} style={{textAlign:"center",color:"#475569",padding:40}}>No licenses found.</td></tr>}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {/* ── ADD LICENSE PAGE ── */}
        {page==="add" && can(user,"license.create") && (
          <div style={{maxWidth:560}}>
            <div style={{marginBottom:22}}>
              <div style={{fontSize:22,fontWeight:800}}>Create New License</div>
              <div style={{color:"#64748b",fontSize:13,marginTop:4}}>Fill in the details to generate a license key</div>
            </div>
            <div style={{...S.card,display:"flex",flexDirection:"column",gap:16}}>
              <div>
                <span style={S.lbl}>LICENSE KEY (AUTO-GENERATED)</span>
                <div style={{display:"flex",gap:8}}>
                  <input className="inp" style={{...S.inp,fontFamily:"monospace",letterSpacing:1}} value={form.license_key} readOnly/>
                  <button style={{...S.btnG,whiteSpace:"nowrap"}} onClick={()=>setForm(f=>({...f,license_key:genKey()}))}>🔄 New</button>
                </div>
              </div>
              <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
                <div>
                  <span style={S.lbl}>CLIENT NAME *</span>
                  <input className="inp" style={S.inp} placeholder="e.g. Acme Corp" value={form.client_name} onChange={e=>{setForm(f=>({...f,client_name:e.target.value}));setFormErr("");}}/>
                </div>
                <div>
                  <span style={S.lbl}>EMAIL *</span>
                  <input className="inp" style={S.inp} placeholder="client@example.com" value={form.email} onChange={e=>{setForm(f=>({...f,email:e.target.value}));setFormErr("");}}/>
                </div>
              </div>
              <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
                <div>
                  <span style={S.lbl}>PRODUCT</span>
                  <select value={form.product} onChange={e=>setForm(f=>({...f,product:e.target.value}))}>{PRODUCTS.map(p=><option key={p}>{p}</option>)}</select>
                </div>
                <div>
                  <span style={S.lbl}>MAX ACTIVATIONS</span>
                  <input className="inp" style={S.inp} type="number" min="1" value={form.max_activations} onChange={e=>setForm(f=>({...f,max_activations:parseInt(e.target.value)||1}))}/>
                </div>
              </div>
              <div>
                <span style={S.lbl}>EXPIRY DATE *</span>
                <input className="inp" style={S.inp} type="date" value={form.expiry_date} min={new Date().toISOString().split("T")[0]} onChange={e=>{setForm(f=>({...f,expiry_date:e.target.value}));setFormErr("");}}/>
              </div>
              {formErr && <div style={{background:"#450a0a",border:"1px solid #7f1d1d",color:"#fca5a5",padding:"10px 14px",borderRadius:8,fontSize:13}}>⚠️ {formErr}</div>}
              <div style={{display:"flex",gap:10,marginTop:4}}>
                <button style={{...S.btnP,flex:1,padding:"11px"}} onClick={addLicense}>✅ Create License</button>
                <button style={S.btnG} onClick={()=>setPage("list")}>Cancel</button>
              </div>
            </div>
          </div>
        )}

        {/* ── USERS PAGE ── */}
        {page==="users" && can(user,"user.manage") && (
          <div>
            <div style={{fontSize:22,fontWeight:800,marginBottom:4}}>User Management</div>
            <div style={{color:"#64748b",fontSize:13,marginBottom:20}}>Admin portal accounts and roles</div>
            <div style={{...S.card,padding:0,overflow:"hidden"}}>
              <table style={{width:"100%",borderCollapse:"collapse",fontSize:13}}>
                <thead><tr>{["User","Email","Role","Status","Actions"].map(h=><th key={h} style={S.th}>{h}</th>)}</tr></thead>
                <tbody>
                  {DEMO_USERS.map(u=>(
                    <tr key={u.id} className="trow">
                      <td style={S.td}>
                        <div style={{display:"flex",alignItems:"center",gap:10}}>
                          <div style={{width:32,height:32,borderRadius:"50%",background:"linear-gradient(135deg,#6366f1,#8b5cf6)",display:"flex",alignItems:"center",justifyContent:"center",fontWeight:800,fontSize:14}}>
                            {u.full_name[0]}
                          </div>
                          <div>
                            <div style={{fontWeight:600}}>{u.full_name}</div>
                            <div style={{fontSize:11,color:"#64748b"}}>@{u.username}</div>
                          </div>
                        </div>
                      </td>
                      <td style={{...S.td,color:"#94a3b8"}}>{u.email}</td>
                      <td style={S.td}><span style={{fontSize:11,padding:"3px 10px",borderRadius:20,fontWeight:700,...roleColor(u.role)}}>{roleIcon(u.role)} {u.role}</span></td>
                      <td style={S.td}><span style={{padding:"3px 10px",borderRadius:20,fontSize:11,fontWeight:700,background:"#052e16",color:"#4ade80",border:"1px solid #166534"}}>Active</span></td>
                      <td style={S.td}>
                        <div style={{display:"flex",gap:6}}>
                          <button style={S.btnG}>Edit</button>
                          {u.username!=="superadmin" && <button style={{padding:"5px 10px",background:"#450a0a",color:"#f87171",border:"1px solid #7f1d1d",borderRadius:6,fontSize:11,fontWeight:600,cursor:"pointer"}}>Remove</button>}
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}
      </div>

      {/* ── DETAIL MODAL ── */}
      {selected && (
        <div className="modal-bg" onClick={()=>setSelected(null)}>
          <div className="modal" onClick={e=>e.stopPropagation()}>
            <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:20}}>
              <div style={{fontWeight:800,fontSize:18}}>License Details</div>
              <button style={{...S.btnG,padding:"5px 10px",fontSize:12}} onClick={()=>setSelected(null)}>✕ Close</button>
            </div>
            <div style={{background:"#0f172a",borderRadius:10,padding:14,textAlign:"center",marginBottom:16}}>
              <div style={{fontFamily:"monospace",fontSize:16,letterSpacing:2,color:"#a5b4fc",fontWeight:700}}>{selected.license_key}</div>
              <button style={{...S.btnG,padding:"6px 14px",fontSize:12,marginTop:10}} onClick={()=>copyKey(selected.license_key)}>📋 Copy Key</button>
            </div>
            <div style={{display:"flex",flexDirection:"column",gap:10,marginBottom:16}}>
              {[["Client",selected.client_name],["Email",selected.email],["Product",selected.product],["Issued",selected.issued_date],["Expires",`${selected.expiry_date} (${daysLeft(selected.expiry_date)} days left)`],["Activations",`${selected.current_activations} / ${selected.max_activations}`]].map(([k,v])=>(
                <div key={k} style={{display:"flex",justifyContent:"space-between",fontSize:13,borderBottom:"1px solid #1e293b",paddingBottom:8}}>
                  <span style={{color:"#64748b"}}>{k}</span><span style={{fontWeight:600}}>{v}</span>
                </div>
              ))}
              <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",paddingBottom:4}}>
                <span style={{color:"#64748b",fontSize:13}}>Status</span>
                <Badge active={selected.is_active} expiry={selected.expiry_date}/>
              </div>
            </div>
            {can(user,"license.toggle")||can(user,"license.delete") ? (
              <div style={{display:"flex",gap:8}}>
                {can(user,"license.toggle") && (
                  <button style={{flex:1,padding:"9px",background:selected.is_active?"#422006":"#052e16",color:selected.is_active?"#fb923c":"#4ade80",border:"none",borderRadius:8,fontWeight:700,fontSize:13,cursor:"pointer"}}
                    onClick={()=>{toggleLicense(selected.id);setSelected(l=>({...l,is_active:l.is_active?0:1}));}}>
                    {selected.is_active?"🚫 Disable":"✅ Enable"}
                  </button>
                )}
                {can(user,"license.delete") && (
                  <button style={{padding:"9px 16px",background:"#7f1d1d",color:"#fca5a5",border:"none",borderRadius:8,fontWeight:700,fontSize:13,cursor:"pointer"}} onClick={()=>deleteLicense(selected.id)}>
                    🗑 Delete
                  </button>
                )}
              </div>
            ) : <div style={{fontSize:12,color:"#475569",textAlign:"center"}}>You have view-only access.</div>}
          </div>
        </div>
      )}

      <Toast toast={toast}/>
    </div>
  );
}