// admin.jsx — platform backend for Nexus Booking operators

const ADMIN_NAV = [
  { id: "overview", label: "Overview", icon: "grid" },
  { id: "customers", label: "Customers", icon: "layers" },
  { id: "users", label: "Users", icon: "users" },
  { id: "revenue", label: "Revenue", icon: "rev" },
  { id: "billing", label: "Billing", icon: "card" },
  { id: "announcements", label: "Announcements", icon: "bell" },
  { id: "settings", label: "Settings", icon: "cog" },
];

function AdminShell({ data, actions, onBack }) {
  const [active, setActive] = React.useState("overview");
  const platform = data.platform;
  const currency = platform.settings.platformCurrency || data.profile.currency || "GBP";

  return (
    <div className="admin-shell" data-theme={data.profile.theme || "dark"} style={getBrandStyle(data.profile)}>
      <aside className="admin-side">
        <div className="sb-brand">
          <div className="sb-mark">{data.profile.logoUrl ? <img src={data.profile.logoUrl} alt=""/> : getLogoText(data.profile)}</div>
          <div>
            <div className="sb-brand-name">Nexus Backend</div>
            <div className="admin-mini">Platform admin</div>
          </div>
        </div>
        <nav className="sb-nav">
          {ADMIN_NAV.map((item) => (
            <button key={item.id} className={"sb-nav-item " + (active === item.id ? "is-active" : "")} onClick={() => setActive(item.id)}>
              {React.createElement(I[item.icon], { className: "sb-icon" })}
              <span>{item.label}</span>
            </button>
          ))}
        </nav>
        <div className="sb-quick">
          <h4>Customer app</h4>
          <p>Return to the scheduling workspace.</p>
          <button className="sb-copy" onClick={onBack}><I.arrow size={14}/> Open app</button>
        </div>
      </aside>
      <main className="admin-main">
        <AdminHeader active={active} onBack={onBack}/>
        {active === "overview" && <AdminOverview platform={platform} currency={currency}/>}
        {active === "customers" && <AdminCustomers customers={platform.customers} currency={currency} actions={actions}/>}
        {active === "users" && <AdminUsers users={platform.users}/>}
        {active === "revenue" && <AdminRevenue platform={platform} currency={currency}/>}
        {active === "billing" && <AdminBilling billing={platform.billing} currency={currency}/>}
        {active === "announcements" && <AdminAnnouncements announcements={platform.announcements} actions={actions}/>}
        {active === "settings" && <AdminSettings settings={platform.settings} actions={actions}/>}
      </main>
    </div>
  );
}

function AdminHeader({ active, onBack }) {
  const title = ADMIN_NAV.find((item) => item.id === active)?.label || "Overview";
  return (
    <div className="view-h admin-head">
      <div>
        <h1>{title}</h1>
        <div className="sub">Manage customers, revenue, billing, messages, and platform controls.</div>
      </div>
      <div className="view-actions">
        <button className="btn ghost" onClick={onBack}><I.chevL size={13}/> Customer app</button>
      </div>
    </div>
  );
}

function AdminMetric({ label, value, detail, icon }) {
  return (
    <div className="kpi">
      <div className="kpi-h">
        <span className="kpi-label">{label}</span>
        <span className="kpi-icon">{icon}</span>
      </div>
      <div className="kpi-value">{value}</div>
      <div className="kpi-delta"><strong>{detail}</strong></div>
    </div>
  );
}

function AdminOverview({ platform, currency }) {
  const customers = platform.customers;
  const active = customers.filter((c) => c.status === "Active").length;
  const trial = customers.filter((c) => c.status === "Trial").length;
  const revenue = customers.reduce((sum, c) => sum + c.revenue, 0);
  const users = platform.users.length;
  return (
    <>
      <div className="kpi-grid">
        <AdminMetric label="Customers" value={String(customers.length)} detail={`${active} active · ${trial} trial`} icon={<I.layers size={14}/>}/>
        <AdminMetric label="Users" value={String(users)} detail="Across all workspaces" icon={<I.users size={14}/>}/>
        <AdminMetric label="Revenue" value={formatMoney(revenue, currency)} detail="Customer lifetime value" icon={<I.rev size={14}/>}/>
        <AdminMetric label="Open invoices" value={String(platform.billing.filter((b) => b.status !== "Paid").length)} detail="Needs attention" icon={<I.card size={14}/>}/>
      </div>
      <div className="admin-grid">
        <div className="card">
          <div className="card-h"><h3>Recent Customers</h3></div>
          <AdminCustomerTable customers={customers.slice(0, 5)} currency={currency} compact/>
        </div>
        <div className="card">
          <div className="card-h"><h3>Announcements</h3></div>
          <div className="admin-list">
            {platform.announcements.map((a) => (
              <div className="admin-list-row" key={a.id}>
                <div>
                  <div className="name">{a.title}</div>
                  <div className="desc">{a.audience} · {a.date}</div>
                </div>
                <span className={"pill " + (a.status === "Published" ? "confirmed" : "pending")}>{a.status}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}

function AdminCustomerTable({ customers, currency, actions, compact = false }) {
  return (
    <table className="table">
      <thead>
        <tr><th>Business</th><th>Owner</th><th>Plan</th><th>Status</th><th>Revenue</th>{!compact && <th></th>}</tr>
      </thead>
      <tbody>
        {customers.map((customer) => (
          <tr key={customer.id}>
            <td>{customer.business}</td>
            <td>{customer.owner}</td>
            <td>{customer.plan}</td>
            <td><span className={"pill " + (customer.status === "Active" ? "confirmed" : customer.status === "Trial" ? "pending" : "cancelled")}>{customer.status}</span></td>
            <td>{formatMoney(customer.revenue, currency)}</td>
            {!compact && (
              <td style={{textAlign:"right"}}>
                <select className="status-select" value={customer.status} onChange={(e) => actions.updateCustomerStatus(customer.id, e.target.value)}>
                  <option>Active</option>
                  <option>Trial</option>
                  <option>Past due</option>
                  <option>Cancelled</option>
                </select>
              </td>
            )}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

function AdminCustomers({ customers, currency, actions }) {
  const [query, setQuery] = React.useState("");
  const filtered = customers.filter((c) => `${c.business} ${c.owner} ${c.email}`.toLowerCase().includes(query.toLowerCase()));
  return (
    <>
      <div className="toolbar">
        <div className="search"><I.show size={14}/><input placeholder="Search customers..." value={query} onChange={(e) => setQuery(e.target.value)}/></div>
        <button className="btn primary"><I.layers size={13}/> Add customer</button>
      </div>
      <div className="card"><AdminCustomerTable customers={filtered} currency={currency} actions={actions}/></div>
    </>
  );
}

function AdminUsers({ users }) {
  return (
    <div className="card">
      <table className="table">
        <thead><tr><th>Name</th><th>Email</th><th>Role</th><th>Status</th><th>Last seen</th></tr></thead>
        <tbody>
          {users.map((user) => (
            <tr key={user.id}>
              <td>{user.name}</td><td>{user.email}</td><td>{user.role}</td>
              <td><span className={"pill " + (user.status === "Active" ? "confirmed" : "pending")}>{user.status}</span></td>
              <td>{user.lastSeen}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function AdminRevenue({ platform, currency }) {
  const byPlan = platform.customers.reduce((acc, customer) => {
    acc[customer.plan] = (acc[customer.plan] || 0) + customer.revenue;
    return acc;
  }, {});
  const total = Object.values(byPlan).reduce((sum, value) => sum + value, 0);
  return (
    <div className="card settings-card">
      <h3 className="section-h">Revenue by Plan</h3>
      <div className="usage-row" style={{marginTop:18}}>
        {Object.entries(byPlan).map(([plan, value]) => (
          <div className="usage-row" key={plan}>
            <div className="usage-h"><span className="label">{plan}</span><span className="val">{formatMoney(value, currency)}</span></div>
            <div className="usage-bar"><div className="fill" style={{width:`${Math.max(8, Math.round((value / total) * 100))}%`}}/></div>
          </div>
        ))}
      </div>
    </div>
  );
}

function AdminBilling({ billing, currency }) {
  return (
    <div className="card">
      <table className="table">
        <thead><tr><th>Invoice</th><th>Customer</th><th>Date</th><th>Amount</th><th>Status</th></tr></thead>
        <tbody>
          {billing.map((invoice) => (
            <tr key={invoice.id}>
              <td>{invoice.id}</td><td>{invoice.customer}</td><td>{formatIsoDate(invoice.date, { year: true })}</td>
              <td>{formatMoney(invoice.amount, currency)}</td>
              <td><span className={"pill " + (invoice.status === "Paid" ? "confirmed" : "cancelled")}>{invoice.status}</span></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function AdminAnnouncements({ announcements, actions }) {
  const [draft, setDraft] = React.useState({ title: "", message: "", audience: "All customers" });
  const canSave = draft.title.trim() && draft.message.trim();
  return (
    <div className="admin-grid">
      <div className="card settings-card">
        <h3 className="section-h">Create Announcement</h3>
        <button
          className="btn ghost"
          style={{marginTop:12}}
          onClick={() => setDraft({
            title: "Maintenance window",
            audience: "All customers",
            message: "Scheduled maintenance this Sunday at 10pm.",
          })}>
          Use maintenance template
        </button>
        <div className="field-grid single" style={{marginTop:16}}>
          <div className="bk-field"><label>Title</label><input className="bk-input" value={draft.title} onChange={(e) => setDraft({...draft, title:e.target.value})}/></div>
          <div className="bk-field"><label>Audience</label><input className="bk-input" value={draft.audience} onChange={(e) => setDraft({...draft, audience:e.target.value})}/></div>
          <div className="bk-field"><label>Message</label><textarea className="bk-textarea" value={draft.message} onChange={(e) => setDraft({...draft, message:e.target.value})}/></div>
        </div>
        <div style={{display:"flex", justifyContent:"flex-end", marginTop:16}}>
          <button className="btn primary" disabled={!canSave} onClick={() => { actions.addAnnouncement(draft); setDraft({ title: "", message: "", audience: "All customers" }); }}>Save draft</button>
        </div>
      </div>
      <div className="card">
        <div className="card-h"><h3>Announcement History</h3></div>
        <div className="admin-list">
          {announcements.map((a) => (
            <div className="admin-list-row" key={a.id}>
              <div><div className="name">{a.title}</div><div className="desc">{a.message}</div></div>
              <span className={"pill " + (a.status === "Published" ? "confirmed" : "pending")}>{a.status}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function AdminSettings({ settings, actions }) {
  const [draft, setDraft] = React.useState(settings);
  React.useEffect(() => setDraft(settings), [settings]);
  return (
    <div className="card settings-card">
      <h3 className="section-h">Platform Settings</h3>
      <div className="field-grid" style={{marginTop:18}}>
        <div className="bk-field"><label>Support email</label><input className="bk-input" value={draft.supportEmail} onChange={(e) => setDraft({...draft, supportEmail:e.target.value})}/></div>
        <div className="bk-field">
          <label>Platform currency</label>
          <select className="bk-input" value={draft.platformCurrency} onChange={(e) => setDraft({...draft, platformCurrency:e.target.value})}>
            {CURRENCIES.map((currency) => <option key={currency.code} value={currency.code}>{currency.symbol} {currency.code}</option>)}
          </select>
        </div>
        <div className="bk-field"><label>Trial days</label><input className="bk-input" value={draft.trialDays} onChange={(e) => setDraft({...draft, trialDays:e.target.value})}/></div>
        <div className="notif-row" style={{borderTop:0}}>
          <div><div className="title">Allow new trials</div><div className="desc">Let new customers start without a paid plan.</div></div>
          <label className="switch">
            <input type="checkbox" checked={draft.allowTrials} onChange={() => setDraft({...draft, allowTrials:!draft.allowTrials})}/>
            <span className="track"><span className="knob"/></span>
          </label>
        </div>
      </div>
      <div style={{display:"flex", justifyContent:"flex-end", marginTop:18}}>
        <button className="btn primary" onClick={() => actions.updatePlatformSettings(draft)}>Save settings</button>
      </div>
    </div>
  );
}

window.AdminShell = AdminShell;