/* ProHippo — Sidebar nav */

const NAV_ITEMS = [
  { id: "dashboard", label: "Dashboard", icon: "dashboard" },
  { id: "assessees", label: "Assessees", icon: "users", badge: "247" },
  { id: "matters", label: "Matters", icon: "scale" },
  { id: "notices", label: "Notices", icon: "doc", badge: "4" },
  { id: "hearings", label: "Hearings", icon: "calendar" },
  { id: "invoices", label: "Invoices", icon: "invoice" },
  { id: "communications", label: "Communications", icon: "chat" },
  { id: "ai", label: "AI Parser", icon: "sparkle" },
  { id: "reports", label: "Reports", icon: "chart" },
];

const NAV_BOTTOM = [
  { id: "settings", label: "Settings", icon: "settings" },
];

const PRACTICE_LABELS = {
  ca_individual: "Individual CA",
  ca_firm:       "CA Firm",
  cma:           "CMA",
  advocate:      "Tax Advocate",
  cs:            "Company Secy.",
  other:         "Tax Professional",
};

function Sidebar({ active, onNav, userProfile, onSignOut }) {
  const [showSignOut, setShowSignOut] = React.useState(false);

  const firmName   = userProfile?.firmName   || "Your Firm";
  const roleLabel  = PRACTICE_LABELS[userProfile?.practiceType] || "Tax Professional";
  const initials   = userProfile?.initials   || (firmName.slice(0,2).toUpperCase());

  return (
    <aside className="sidebar">
      <div className="brand">
        <div className="brand-mark">
          <svg viewBox="0 0 24 24" fill="none">
            <path d="M6 4c3 0 3 4 6 4s3-4 6-4v16c-3 0-3-4-6-4s-3 4-6 4V4z" fill="url(#g1)"/>
            <defs>
              <linearGradient id="g1" x1="0" y1="0" x2="24" y2="24">
                <stop offset="0" stopColor="#6C5CE7"/>
                <stop offset="1" stopColor="#C13388"/>
              </linearGradient>
            </defs>
          </svg>
        </div>
        <div className="brand-name">Pro<span className="tld">Hippo</span></div>
      </div>

      <div className="nav-section-label">Practice</div>
      <div className="nav">
        {NAV_ITEMS.map(item => (
          <div
            key={item.id}
            className={`nav-item ${active === item.id ? "active" : ""}`}
            onClick={() => onNav(item.id)}
          >
            <Icon name={item.icon} size={18} className="nav-icon"/>
            <span>{item.label}</span>
            {item.badge && <span className="nav-badge">{item.badge}</span>}
          </div>
        ))}
      </div>

      <div className="sidebar-bottom">
        <div className="nav" style={{marginBottom: 14}}>
          {NAV_BOTTOM.map(item => (
            <div
              key={item.id}
              className={`nav-item ${active === item.id ? "active" : ""}`}
              onClick={() => onNav(item.id)}
            >
              <Icon name={item.icon} size={18} className="nav-icon"/>
              <span>{item.label}</span>
            </div>
          ))}
        </div>

        {/* Sign-out popup */}
        {showSignOut && (
          <div className="signout-popup">
            <button
              className="signout-btn"
              onClick={() => { setShowSignOut(false); onSignOut && onSignOut(); }}
            >
              <Icon name="logout" size={15}/>
              Sign out
            </button>
            <button
              className="signout-cancel"
              onClick={() => setShowSignOut(false)}
            >
              Cancel
            </button>
          </div>
        )}

        <div className="firm-card" onClick={() => setShowSignOut(v => !v)}>
          <div className="firm-avatar">{initials}</div>
          <div style={{flex: 1, minWidth: 0}}>
            <div className="firm-name">{firmName}</div>
            <div className="firm-role">{roleLabel}</div>
          </div>
          <Icon name="chevron-right" size={14}/>
        </div>
      </div>
    </aside>
  );
}

window.Sidebar = Sidebar;