/* v2 Sidebar. 4-role aware. Client, Reviewing Attorney, Operating Attorney, Partner Firm. */

const ROLE_NAV = {
  client: {
    user: { name: 'Marcus Chen', plan: 'Pro · 2 active matters', initials: 'MC' },
    items: [
      { id: 'dashboard', label: 'My matter', icon: Icons.dashboard },
      { id: 'theory', label: 'Legal theory', icon: Icons.scale },
      { id: 'evidence', label: 'Evidence', icon: Icons.paperclip },
      { id: 'timeline', label: 'Timeline', icon: Icons.clock },
      { id: 'documents', label: 'Documents', icon: Icons.doc },
      { id: 'readiness', label: 'Readiness check', icon: Icons.check },
      { id: 'prep', label: 'Court prep', icon: Icons.book },
      { id: 'handoff', label: 'Get attorney help', icon: Icons.shield, badge: '7' },
    ],
  },
  reviewing: {
    user: { name: 'Sara Lin, Esq.', plan: 'Reviewing · 12 reviews this wk', initials: 'SL' },
    items: [
      { id: 'inbox', label: 'Review inbox', icon: Icons.bell, badge: 4 },
      { id: 'queue', label: 'In progress', icon: Icons.clock, badge: 2 },
      { id: 'completed', label: 'Completed', icon: Icons.check },
      { id: 'consults', label: 'Consults', icon: Icons.user },
      { id: 'earnings', label: 'Earnings', icon: Icons.dashboard },
      { id: 'verification', label: 'Verification', icon: Icons.shield },
    ],
  },
  operating: {
    user: { name: 'Daniel Reyes, Esq.', plan: 'Operating · 18 active matters', initials: 'DR' },
    items: [
      { id: 'caseload', label: 'My caseload', icon: Icons.folder, badge: 18 },
      { id: 'theory', label: 'Case theory', icon: Icons.scale },
      { id: 'strength', label: 'Strength & outcomes', icon: Icons.sparkle },
      { id: 'pleadings', label: 'Pleadings & briefs', icon: Icons.doc },
      { id: 'discovery', label: 'Discovery', icon: Icons.paperclip },
      { id: 'calendar', label: 'Calendar & deadlines', icon: Icons.calendar, badge: 3 },
      { id: 'iolta', label: 'Billing & IOLTA', icon: Icons.dashboard },
      { id: 'clients', label: 'Client portal', icon: Icons.user },
    ],
  },
  partner: {
    user: { name: 'Bay Legal Aid', plan: 'Partner Firm · 14 attorneys', initials: 'BL' },
    items: [
      { id: 'overview', label: 'Firm overview', icon: Icons.dashboard },
      { id: 'attorneys', label: 'Attorneys (14)', icon: Icons.user },
      { id: 'matters', label: 'All matters', icon: Icons.folder, badge: 92 },
      { id: 'intake', label: 'Intake flows', icon: Icons.flag },
      { id: 'analytics', label: 'Firm analytics', icon: Icons.book },
      { id: 'branding', label: 'Branding', icon: Icons.edit },
      { id: 'grants', label: 'Grant reporting', icon: Icons.shield },
    ],
  },
};

const ROLE_LABELS = {
  client: 'Pro Se Client',
  reviewing: 'Reviewing Attorney',
  operating: 'Operating Attorney',
  partner: 'Partner Firm',
};

const SidebarV2 = ({ role, activeScreen, onNav, mode, onModeChange, view, onViewChange, jx, onJxChange }) => {
  const cfg = ROLE_NAV[role];
  const items = cfg.items;
  const j = JURISDICTIONS[jx];
  const isClient = role === 'client';

  return (
    <div style={{
      width: 264, height: '100%',
      background: THEME.glass,
      WebkitBackdropFilter: 'blur(28px) saturate(140%)',
      backdropFilter: 'blur(28px) saturate(140%)',
      borderRight: `1px solid ${THEME.glassBorder}`,
      display: 'flex', flexDirection: 'column',
    }}>
      {/* brand + role badge */}
      <div style={{ padding: '42px 18px 14px' }}>
        <AllLawLockup scale={1}/>
        <div style={{
          marginTop: 14, padding: '6px 10px', borderRadius: 8,
          background: THEME.mode === 'dark' ? 'rgba(255,255,255,0.03)' : 'rgba(255,255,255,0.5)',
          border: `1px solid ${THEME.line}`,
          display: 'flex', alignItems: 'center', gap: 8,
        }}>
          <div style={{ width: 6, height: 6, borderRadius: 3, background: isClient ? THEME.blue : THEME.success }}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 10.5, color: THEME.textMute, letterSpacing: 0.8, textTransform: 'uppercase', fontWeight: 600 }}>Workspace</div>
            <div style={{ fontSize: 12.5, color: THEME.text, fontWeight: 600 }}>{ROLE_LABELS[role]}</div>
          </div>
        </div>
      </div>

      {/* Jurisdiction selector. Only client side */}
      {isClient && (
        <div style={{ padding: '0 14px 12px' }}>
          <div style={{ fontSize: 10, color: THEME.textMute, letterSpacing: 1.1, textTransform: 'uppercase', fontWeight: 600, marginBottom: 6, paddingLeft: 4 }}>Jurisdiction</div>
          <div style={{ display: 'flex', gap: 4, padding: 3, background: THEME.mode === 'dark' ? 'rgba(255,255,255,0.04)' : 'rgba(255,255,255,0.55)', borderRadius: 9, border: `1px solid ${THEME.line}` }}>
            {Object.values(JURISDICTIONS).map(jj => (
              <div key={jj.id} onClick={() => onJxChange(jj.id)} style={{
                flex: 1, padding: '6px 8px', borderRadius: 6, cursor: 'pointer',
                background: jj.id === jx ? THEME.blue : 'transparent',
                color: jj.id === jx ? '#fff' : THEME.textDim,
                fontSize: 11.5, fontWeight: 600, textAlign: 'center',
              }}>{jj.name}</div>
            ))}
          </div>
          {jx === 'utah' && (
            <div style={{
              marginTop: 8, padding: '7px 10px', borderRadius: 7,
              background: 'rgba(91,167,115,0.12)', border: `1px solid rgba(91,167,115,0.25)`,
              fontSize: 10.5, color: THEME.success, lineHeight: 1.4, fontWeight: 500,
            }}>
              ✓ Sandbox-authorized · expanded features available
            </div>
          )}
        </div>
      )}

      {/* New matter / new review CTA */}
      {isClient && (
        <div style={{ padding: '0 14px 12px' }}>
          <div onClick={() => onNav('triage')} style={{
            display: 'flex', alignItems: 'center', gap: 10,
            padding: '10px 12px', borderRadius: 10, cursor: 'pointer',
            background: `linear-gradient(135deg, ${THEME.blue}, ${THEME.accent})`,
            color: '#fff', fontSize: 13, fontWeight: 600,
            boxShadow: `0 6px 16px ${THEME.blueSoft}`,
          }}>
            <Icon d={Icons.plus} size={16} stroke="#fff" sw={2.2}/>
            <span style={{ flex: 1 }}>Start a new matter</span>
            <Icon d={Icons.sparkle} size={14} stroke="#fff" fill="#fff"/>
          </div>
        </div>
      )}

      {/* search */}
      <div style={{ padding: '0 14px 14px' }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8,
          background: THEME.mode === 'dark' ? 'rgba(255,255,255,0.04)' : 'rgba(255,255,255,0.55)',
          border: `1px solid ${THEME.lineSoft}`,
          borderRadius: 10, padding: '8px 10px',
          fontSize: 13, color: THEME.textDim,
        }}>
          <Icon d={Icons.search} size={15} stroke={THEME.textDim}/>
          <span style={{ flex: 1 }}>{isClient ? 'Search my matter…' : 'Search matters, clients…'}</span>
          <span style={{ fontSize: 11, padding: '1px 5px', borderRadius: 4, background: THEME.mode === 'dark' ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.05)' }}>⌘K</span>
        </div>
      </div>

      {/* nav */}
      <div style={{ padding: '0 10px', flex: 1, overflowY: 'auto', minHeight: 0 }}>
        {items.map(item => {
          const active = activeScreen === item.id;
          return (
            <div key={item.id} onClick={() => onNav(item.id)} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '9px 12px', borderRadius: 8, cursor: 'pointer',
              background: active ? THEME.blueSoft : 'transparent',
              color: active ? THEME.text : THEME.textDim,
              fontSize: 13, fontWeight: active ? 600 : 450, fontFamily: 'Inter',
              marginBottom: 2,
              borderLeft: active ? `2px solid ${THEME.blue}` : '2px solid transparent',
              paddingLeft: 10,
            }}>
              <Icon d={item.icon} size={16} stroke={active ? THEME.blue : THEME.textDim}/>
              <span style={{ flex: 1 }}>{item.label}</span>
              {item.badge && (
                <span style={{
                  fontSize: 10.5, fontWeight: 600, padding: '1px 6px', borderRadius: 8,
                  background: active ? THEME.blue : THEME.mode === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)',
                  color: active ? '#fff' : THEME.textDim,
                }}>{item.badge}</span>
              )}
            </div>
          );
        })}
      </div>

      {/* user */}
      <div style={{ padding: 14, borderTop: `1px solid ${THEME.line}`, display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{
          width: 32, height: 32, borderRadius: 16,
          background: `linear-gradient(135deg, ${THEME.blue}, ${THEME.accent})`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: '#fff', fontWeight: 600, fontSize: 12, fontFamily: 'Inter',
        }}>{cfg.user.initials}</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 12.5, color: THEME.text, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{cfg.user.name}</div>
          <div style={{ fontSize: 10.5, color: THEME.textMute }}>{cfg.user.plan}</div>
        </div>
        <Icon d={Icons.settings} size={15} stroke={THEME.textMute}/>
      </div>

      {/* Role + theme toggles */}
      <div style={{
        padding: '10px 12px', borderTop: `1px solid ${THEME.glassBorder}`,
        display: 'flex', flexDirection: 'column', gap: 8,
      }}>
        <div style={{
          display: 'flex', gap: 3, padding: 3,
          background: THEME.glassSubtle, border: `1px solid ${THEME.glassBorder}`,
          borderRadius: 999, justifyContent: 'space-between',
        }}>
          {[
            { id: 'client', label: 'Client' },
            { id: 'reviewing', label: 'Review' },
            { id: 'operating', label: 'Operate' },
            { id: 'partner', label: 'Firm' },
          ].map(r => {
            const a = view === r.id;
            return (
              <div key={r.id} onClick={() => onViewChange(r.id)} style={{
                flex: 1, textAlign: 'center', padding: '4px 0', borderRadius: 999, cursor: 'pointer',
                background: a ? THEME.blue : 'transparent',
                color: a ? '#fff' : THEME.textDim,
                fontSize: 10.5, fontWeight: 600,
                boxShadow: a ? '0 2px 6px rgba(105,134,191,0.35)' : 'none',
              }}>{r.label}</div>
            );
          })}
        </div>
        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
          <ModeToggle mode={mode} onChange={onModeChange}/>
        </div>
      </div>
    </div>
  );
};

window.SidebarV2 = SidebarV2;
window.ROLE_LABELS = ROLE_LABELS;
window.ROLE_NAV = ROLE_NAV;