const SIDEBAR_PLAN_INFO = {
  none:    { name: "Sem plano",    price: null,         total: null, cta: "assinar →", target: "checkout" },
  pack_5:  { name: "Pay per use",  price: null,         total: null, cta: "assinar →", target: "checkout" },
  plan_40: { name: "Creator",      price: "R$39/mês",   total: 40,   cta: "gerenciar →", target: "account" },
  plan_120:{ name: "Pro",          price: "R$79/mês",   total: 120,  cta: "gerenciar →", target: "account" },
};

const Sidebar = ({ view, onNav, tweaks, profile }) => {
  const items = [
    { id: "onboarding", label: "Nova Thumbnail", icon: "sparkles" },
    { id: "history", label: "Galeria", icon: "image" },
  ];
  const items2 = [
    { id: "avatars", label: "Meus Avatares", icon: "users" },
  ];
  const items3 = [
    { id: "account", label: "Conta", icon: "settings" },
  ];

  const NavItem = ({ it }) => (
    <div className={"nav-item" + (view === it.id ? " active" : "")} onClick={() => onNav(it.id)}>
      <span className="icon"><Icon name={it.icon} size={17} /></span>
      <span>{it.label}</span>
      {it.badge && <span className="badge">{it.badge}</span>}
    </div>
  );

  return (
    <aside className="sidebar">
      <div className="logo" onClick={() => onNav("landing")} style={{cursor: "pointer"}}>
        <span className="mark">G</span>
        <span>GenerateThumb</span>
      </div>
      <div className="nav-section">Criar</div>
      {items.map(it => <NavItem key={it.id} it={it} />)}
      <div className="nav-section">Avatares</div>
      {items2.map(it => <NavItem key={it.id} it={it} />)}
      <div className="nav-section">Conta</div>
      {items3.map(it => <NavItem key={it.id} it={it} />)}
      <div style={{flex: 1}} />
      {tweaks.showSidebarBadge && profile && (() => {
        const info = SIDEBAR_PLAN_INFO[profile.plan] || SIDEBAR_PLAN_INFO.none;
        const credits = profile.credits_remaining ?? 0;
        return (
          <div className="plan-card">
            <div className="row" style={{justifyContent: "space-between"}}>
              <span className="name">{info.name}</span>
            </div>
            <div className="row" style={{justifyContent: "space-between"}}>
              <span>{credits} crédito{credits === 1 ? "" : "s"}</span>
              <span style={{cursor: "pointer", color: "var(--brand)"}} onClick={() => onNav(info.target)}>
                {info.cta}
              </span>
            </div>
          </div>
        );
      })()}
    </aside>
  );
};

window.Sidebar = Sidebar;