// admin.jsx — admin views for super_admin (tenants, users, invitations) and tenant_admin (own tenant brand + users)
const { useState: useAdmState, useEffect: useAdmEffect } = React;

window.AdminShell = function AdminShell({ user, onBack, onLogout }) {
  const isSuperAdmin = user.role === "super_admin";
  const [section, setSection] = useAdmState(isSuperAdmin ? "tenants" : "brand");

  return (
    <div className="admin-shell">
      <nav className="admin-nav">
        <h2>{isSuperAdmin ? "Super admin" : "Inställningar"}</h2>
        {isSuperAdmin && (
          <>
            <a className={section === "tenants" ? "active" : ""} onClick={(e) => { e.preventDefault(); setSection("tenants"); }} href="#">Tenants</a>
            <a className={section === "users" ? "active" : ""} onClick={(e) => { e.preventDefault(); setSection("users"); }} href="#">Användare</a>
            <a className={section === "invitations" ? "active" : ""} onClick={(e) => { e.preventDefault(); setSection("invitations"); }} href="#">Inbjudningar</a>
          </>
        )}
        {!isSuperAdmin && user.tenant && (
          <>
            <a className={section === "brand" ? "active" : ""} onClick={(e) => { e.preventDefault(); setSection("brand"); }} href="#">Brand</a>
            <a className={section === "users" ? "active" : ""} onClick={(e) => { e.preventDefault(); setSection("users"); }} href="#">Användare</a>
            <a className={section === "invitations" ? "active" : ""} onClick={(e) => { e.preventDefault(); setSection("invitations"); }} href="#">Inbjudningar</a>
          </>
        )}
        <a onClick={(e) => { e.preventDefault(); onBack(); }} href="#" style={{marginTop: 24, color: "rgba(255,255,255,0.5)"}}>← Till portalen</a>
        <a onClick={(e) => { e.preventDefault(); onLogout(); }} href="#" style={{color: "rgba(255,255,255,0.5)"}}>Logga ut</a>
      </nav>
      <main className="admin-main">
        {section === "tenants"     && <TenantsSection user={user} />}
        {section === "users"       && <UsersSection user={user} />}
        {section === "invitations" && <InvitationsSection user={user} />}
        {section === "brand"       && <BrandSection user={user} />}
      </main>
    </div>
  );
};

function TenantsSection({ user }) {
  const [tenants, setTenants] = useAdmState([]);
  const [showNew, setShowNew] = useAdmState(false);
  const [editing, setEditing] = useAdmState(null);

  function load() {
    window.api.get("/admin/tenants").then((d) => setTenants(d.tenants || []));
  }
  useAdmEffect(load, []);

  return (
    <div>
      <h1>Tenants</h1>
      <p className="lead">Skapa och hantera kunder. Varje tenant är isolerad — egen användare, egna use cases, egen brand.</p>
      <div className="toolbar">
        <div className="grow" />
        <button className="btn btn-primary btn-sm" onClick={() => setShowNew(true)}>+ Ny tenant</button>
      </div>
      <table className="data-table">
        <thead>
          <tr>
            <th>Brand</th>
            <th>Namn</th>
            <th>Slug</th>
            <th>Användare</th>
            <th>Use cases</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {tenants.map((t) => (
            <tr key={t.id}>
              <td>
                <span className="swatch" style={{background: t.primaryColor}}></span>
                <span className="swatch" style={{background: t.accentColor}}></span>
              </td>
              <td><strong>{t.name}</strong></td>
              <td><code style={{fontSize: 12}}>{t.slug}</code></td>
              <td>{t.userCount}</td>
              <td>{t.useCaseCount}</td>
              <td>
                <button className="btn btn-ghost btn-sm" onClick={() => setEditing(t)}>Redigera</button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>

      {showNew && <NewTenantModal onClose={() => setShowNew(false)} onCreated={() => { setShowNew(false); load(); }} />}
      {editing && <EditTenantModal tenant={editing} onClose={() => setEditing(null)} onSaved={() => { setEditing(null); load(); }} />}
    </div>
  );
}

function NewTenantModal({ onClose, onCreated }) {
  const [name, setName] = useAdmState("");
  const [slug, setSlug] = useAdmState("");
  const [logoUrl, setLogoUrl] = useAdmState("");
  const [primaryColor, setPrimaryColor] = useAdmState("#00C8FF");
  const [accentColor, setAccentColor] = useAdmState("#070451");
  const [busy, setBusy] = useAdmState(false);
  const [err, setErr] = useAdmState(null);

  function autoSlug(s) {
    return s.toLowerCase().normalize("NFD").replace(/[̀-ͯ]/g, "").replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "").slice(0, 40);
  }

  async function submit(e) {
    e.preventDefault();
    setBusy(true);
    setErr(null);
    try {
      await window.api.post("/admin/tenants", { name, slug: slug || autoSlug(name), logoUrl, primaryColor, accentColor });
      onCreated();
    } catch (e) {
      setErr(e.data && e.data.error === "slug_taken" ? "Slug är redan tagen." : (e.message || "Fel"));
    } finally { setBusy(false); }
  }

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <h3>Ny tenant</h3>
        <p className="lead">Skapas tom. Bjud in första användaren via "Inbjudningar" efter.</p>
        {err && <div className="err">{err}</div>}
        <form onSubmit={submit}>
          <div className="field-row">
            <label className="field-label">Namn</label>
            <input className="field" value={name} onChange={(e) => { setName(e.target.value); if (!slug) setSlug(autoSlug(e.target.value)); }} required autoFocus />
          </div>
          <div className="field-row">
            <label className="field-label">Slug (URL-säker)</label>
            <input className="field" value={slug} onChange={(e) => setSlug(e.target.value)} placeholder={autoSlug(name)} />
          </div>
          <div className="field-row">
            <label className="field-label">Logo URL (valfritt)</label>
            <input className="field" type="url" value={logoUrl} onChange={(e) => setLogoUrl(e.target.value)} placeholder="https://..." />
          </div>
          <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12}}>
            <div className="field-row">
              <label className="field-label">Primär brand-färg</label>
              <div style={{display: "flex", gap: 8, alignItems: "center"}}>
                <input type="color" value={primaryColor} onChange={(e) => setPrimaryColor(e.target.value)} style={{width: 40, height: 36, border: "1px solid var(--ink-100)", borderRadius: 6}} />
                <input className="field" value={primaryColor} onChange={(e) => setPrimaryColor(e.target.value)} />
              </div>
            </div>
            <div className="field-row">
              <label className="field-label">Accent-färg</label>
              <div style={{display: "flex", gap: 8, alignItems: "center"}}>
                <input type="color" value={accentColor} onChange={(e) => setAccentColor(e.target.value)} style={{width: 40, height: 36, border: "1px solid var(--ink-100)", borderRadius: 6}} />
                <input className="field" value={accentColor} onChange={(e) => setAccentColor(e.target.value)} />
              </div>
            </div>
          </div>
          <div className="modal-foot">
            <button type="button" className="btn btn-ghost btn-sm" onClick={onClose}>Avbryt</button>
            <button className="btn btn-primary btn-sm" type="submit" disabled={busy || !name}>
              {busy && <span className="spinner" />} Skapa tenant
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

function EditTenantModal({ tenant, onClose, onSaved }) {
  const [name, setName] = useAdmState(tenant.name);
  const [logoUrl, setLogoUrl] = useAdmState(tenant.logoUrl || "");
  const [primaryColor, setPrimaryColor] = useAdmState(tenant.primaryColor);
  const [accentColor, setAccentColor] = useAdmState(tenant.accentColor);
  const [busy, setBusy] = useAdmState(false);
  const [uploadBusy, setUploadBusy] = useAdmState(false);
  const [uploadErr, setUploadErr] = useAdmState(null);

  async function submit(e) {
    e.preventDefault();
    setBusy(true);
    try {
      await window.api.patch(`/admin/tenants/${tenant.slug}`, { name, logoUrl, primaryColor, accentColor });
      onSaved();
    } catch (e) {
      alert("Kunde inte spara: " + e.message);
    } finally { setBusy(false); }
  }

  async function handleFile(e) {
    const file = e.target.files && e.target.files[0];
    if (!file) return;
    setUploadErr(null);
    setUploadBusy(true);
    try {
      const fd = new FormData();
      fd.append("logo", file);
      const res = await fetch(`/api/admin/tenants/${tenant.slug}/logo`, {
        method: "POST",
        credentials: "same-origin",
        body: fd,
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || "upload_failed");
      setLogoUrl(data.logoUrl);
    } catch (err) {
      setUploadErr(
        err.message === "invalid_file_type" ? "Filtypen stöds inte. Använd PNG, JPG, SVG, WebP eller GIF." :
        err.message === "file_too_large" ? "Filen är för stor (max 2 MB)." :
        "Kunde inte ladda upp: " + err.message
      );
    } finally {
      setUploadBusy(false);
      e.target.value = "";
    }
  }

  async function removeLogo() {
    if (!confirm("Ta bort logon?")) return;
    setUploadBusy(true);
    try {
      await window.api.delete(`/admin/tenants/${tenant.slug}/logo`);
      setLogoUrl("");
    } finally { setUploadBusy(false); }
  }

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <h3>Redigera {tenant.name}</h3>
        <p className="lead">Slug ({tenant.slug}) går inte att ändra.</p>
        <form onSubmit={submit}>
          <div className="field-row">
            <label className="field-label">Namn</label>
            <input className="field" value={name} onChange={(e) => setName(e.target.value)} />
          </div>

          <div className="field-row">
            <label className="field-label">Logotyp</label>
            <div style={{
              display: "flex", alignItems: "center", gap: 14, padding: 14,
              border: "1px solid var(--ink-100)", borderRadius: "var(--radius-md)",
              background: "var(--bg-mist)",
            }}>
              <div style={{
                width: 80, height: 56,
                background: "var(--white)",
                border: "1px solid var(--ink-100)",
                borderRadius: 8,
                display: "flex", alignItems: "center", justifyContent: "center",
                overflow: "hidden", flexShrink: 0,
              }}>
                {logoUrl
                  ? <img src={logoUrl} alt="" style={{maxWidth: "85%", maxHeight: "85%", objectFit: "contain"}} />
                  : <span style={{fontSize: 10, color: "var(--ink-400)"}}>Ingen logo</span>}
              </div>
              <div style={{flex: 1, minWidth: 0}}>
                <label className="btn btn-secondary btn-sm" style={{cursor: "pointer", display: "inline-flex"}}>
                  {uploadBusy && <span className="spinner" />}
                  {uploadBusy ? "Laddar upp…" : (logoUrl ? "Byt logo" : "Ladda upp logo")}
                  <input type="file" accept="image/png,image/jpeg,image/svg+xml,image/webp,image/gif" style={{display: "none"}} onChange={handleFile} disabled={uploadBusy} />
                </label>
                {logoUrl && (
                  <button type="button" className="btn btn-ghost btn-sm" onClick={removeLogo} disabled={uploadBusy} style={{marginLeft: 6}}>
                    Ta bort
                  </button>
                )}
                <div style={{fontSize: 11, color: "var(--ink-400)", marginTop: 6}}>
                  PNG, JPG, SVG, WebP eller GIF · max 2 MB
                </div>
              </div>
            </div>
            {uploadErr && <div className="err" style={{marginTop: 8}}>{uploadErr}</div>}
          </div>

          <div className="field-row">
            <label className="field-label">Eller länk till hostad logo</label>
            <input className="field" type="url" value={logoUrl} onChange={(e) => setLogoUrl(e.target.value)} placeholder="https://..." />
          </div>

          <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12}}>
            <div className="field-row">
              <label className="field-label">Primär brand-färg</label>
              <div style={{display: "flex", gap: 8, alignItems: "center"}}>
                <input type="color" value={primaryColor} onChange={(e) => setPrimaryColor(e.target.value)} style={{width: 40, height: 36}} />
                <input className="field" value={primaryColor} onChange={(e) => setPrimaryColor(e.target.value)} />
              </div>
            </div>
            <div className="field-row">
              <label className="field-label">Accent-färg</label>
              <div style={{display: "flex", gap: 8, alignItems: "center"}}>
                <input type="color" value={accentColor} onChange={(e) => setAccentColor(e.target.value)} style={{width: 40, height: 36}} />
                <input className="field" value={accentColor} onChange={(e) => setAccentColor(e.target.value)} />
              </div>
            </div>
          </div>
          <div className="modal-foot">
            <button type="button" className="btn btn-ghost btn-sm" onClick={onClose}>Stäng</button>
            <button className="btn btn-primary btn-sm" type="submit" disabled={busy}>
              {busy && <span className="spinner" />} Spara
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

function BrandSection({ user }) {
  const [tenant, setTenant] = useAdmState(null);

  useAdmEffect(() => {
    window.api.get("/me").then((d) => setTenant(d.tenant));
  }, []);

  if (!tenant) return <div><h1>Brand</h1><div className="loading-page"><div className="spinner"/></div></div>;

  return (
    <div>
      <h1>Brand</h1>
      <p className="lead">Justera er logo och färgpalett. Förändringen syns direkt i portalen.</p>
      <EditTenantModal tenant={tenant} onClose={() => {}} onSaved={() => window.location.reload()} />
    </div>
  );
}

function UsersSection({ user }) {
  const [users, setUsers] = useAdmState([]);
  function load() { window.api.get("/admin/users").then((d) => setUsers(d.users || [])); }
  useAdmEffect(load, []);

  async function remove(id) {
    if (!confirm("Ta bort användaren?")) return;
    await window.api.delete(`/admin/users/${id}`);
    load();
  }

  return (
    <div>
      <h1>Användare</h1>
      <p className="lead">Bjud in nya via "Inbjudningar"-fliken.</p>
      <table className="data-table">
        <thead>
          <tr>
            <th>Email</th>
            <th>Namn</th>
            <th>Roll</th>
            {user.role === "super_admin" && <th>Tenant</th>}
            <th>Senaste login</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {users.map((u) => (
            <tr key={u.id}>
              <td>{u.email}</td>
              <td>{u.name || "—"}</td>
              <td><span className={"role-badge " + u.role}>{u.role.replace("_", " ")}</span></td>
              {user.role === "super_admin" && <td>{u.tenant_name || "—"}</td>}
              <td style={{color: "var(--ink-500)", fontSize: 12}}>{u.last_login_at || "Aldrig"}</td>
              <td>
                {u.id !== user.id && <button className="btn btn-danger btn-sm" onClick={() => remove(u.id)}>Ta bort</button>}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function InvitationsSection({ user }) {
  const [invitations, setInvitations] = useAdmState([]);
  const [tenants, setTenants] = useAdmState([]);
  const [showNew, setShowNew] = useAdmState(false);

  function load() {
    window.api.get("/admin/invitations").then((d) => setInvitations(d.invitations || []));
    if (user.role === "super_admin") {
      window.api.get("/admin/tenants").then((d) => setTenants(d.tenants || []));
    }
  }
  useAdmEffect(load, []);

  async function revoke(id) {
    if (!confirm("Återkalla inbjudan?")) return;
    await window.api.delete(`/admin/invitations/${id}`);
    load();
  }

  return (
    <div>
      <h1>Inbjudningar</h1>
      <p className="lead">Skapa en inbjudan, skicka länken till användaren via t.ex. mail.</p>
      <div className="toolbar">
        <div className="grow" />
        <button className="btn btn-primary btn-sm" onClick={() => setShowNew(true)}>+ Ny inbjudan</button>
      </div>
      <table className="data-table">
        <thead>
          <tr>
            <th>Email</th>
            <th>Roll</th>
            {user.role === "super_admin" && <th>Tenant</th>}
            <th>Status</th>
            <th>Länk</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {invitations.map((i) => (
            <tr key={i.id}>
              <td>{i.email}</td>
              <td><span className={"role-badge " + i.role}>{i.role.replace("_", " ")}</span></td>
              {user.role === "super_admin" && <td>{i.tenantName || "—"}</td>}
              <td>{i.claimedAt ? <span style={{color: "var(--success)"}}>Inlöst</span> : <span style={{color: "var(--warn)"}}>Väntar</span>}</td>
              <td>
                {!i.claimedAt && (
                  <button className="btn btn-ghost btn-sm" onClick={() => {
                    navigator.clipboard.writeText(window.location.origin + i.inviteUrl);
                    alert("Inbjudningslänk kopierad till urklipp.");
                  }}>Kopiera länk</button>
                )}
              </td>
              <td>
                {!i.claimedAt && <button className="btn btn-danger btn-sm" onClick={() => revoke(i.id)}>Återkalla</button>}
              </td>
            </tr>
          ))}
        </tbody>
      </table>

      {showNew && (
        <NewInvitationModal
          isSuperAdmin={user.role === "super_admin"}
          tenants={tenants}
          onClose={() => setShowNew(false)}
          onCreated={() => { setShowNew(false); load(); }}
        />
      )}
    </div>
  );
}

function NewInvitationModal({ isSuperAdmin, tenants, onClose, onCreated }) {
  const [email, setEmail] = useAdmState("");
  const [role, setRole] = useAdmState("member");
  const [tenantSlug, setTenantSlug] = useAdmState(tenants[0] ? tenants[0].slug : "");
  const [busy, setBusy] = useAdmState(false);
  const [err, setErr] = useAdmState(null);
  const [createdLink, setCreatedLink] = useAdmState(null);

  async function submit(e) {
    e.preventDefault();
    setBusy(true); setErr(null);
    try {
      const body = { email, role };
      if (isSuperAdmin && role !== "super_admin") body.tenantSlug = tenantSlug;
      const { invitation } = await window.api.post("/admin/invitations", body);
      setCreatedLink(window.location.origin + invitation.inviteUrl);
    } catch (e) {
      setErr(e.data && e.data.error || e.message);
    } finally { setBusy(false); }
  }

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        {createdLink ? (
          <>
            <h3>Inbjudan skapad</h3>
            <p className="lead">Skicka länken till användaren. Den fungerar tills någon registrerar sig med den.</p>
            <input className="field" readOnly value={createdLink} onClick={(e) => e.target.select()} />
            <div className="modal-foot">
              <button className="btn btn-secondary btn-sm" onClick={() => { navigator.clipboard.writeText(createdLink); }}>Kopiera</button>
              <button className="btn btn-primary btn-sm" onClick={onCreated}>Klar</button>
            </div>
          </>
        ) : (
          <form onSubmit={submit}>
            <h3>Ny inbjudan</h3>
            {err && <div className="err">{err}</div>}
            <div className="field-row">
              <label className="field-label">Email</label>
              <input className="field" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required autoFocus />
            </div>
            <div className="field-row">
              <label className="field-label">Roll</label>
              <select className="field" value={role} onChange={(e) => setRole(e.target.value)}>
                <option value="member">Medlem (kan redigera tabs och anteckningar)</option>
                <option value="tenant_admin">Kund-admin (kan även hantera anv & brand)</option>
                {isSuperAdmin && <option value="super_admin">Super admin (kan hantera alla tenants)</option>}
              </select>
            </div>
            {isSuperAdmin && role !== "super_admin" && (
              <div className="field-row">
                <label className="field-label">Tenant</label>
                <select className="field" value={tenantSlug} onChange={(e) => setTenantSlug(e.target.value)}>
                  {tenants.map((t) => <option key={t.slug} value={t.slug}>{t.name}</option>)}
                </select>
              </div>
            )}
            <div className="modal-foot">
              <button type="button" className="btn btn-ghost btn-sm" onClick={onClose}>Avbryt</button>
              <button className="btn btn-primary btn-sm" type="submit" disabled={busy || !email}>
                {busy && <span className="spinner" />} Skapa inbjudan
              </button>
            </div>
          </form>
        )}
      </div>
    </div>
  );
}