/* In-app toggle row: mode (sun/moon) + view switcher (client/lawyer).
   Sits in the sidebar footer of both client & lawyer apps. */

const ModeToggle = ({ mode, onChange }) => {
  const t = THEME;
  const isDark = mode === 'dark';
  return (
    <div style={{
      display: 'flex',
      background: t.glassSubtle,
      border: `1px solid ${t.glassBorder}`,
      borderRadius: 999,
      padding: 2,
      backdropFilter: 'blur(10px)',
      WebkitBackdropFilter: 'blur(10px)',
    }}>
      <button
        onClick={() => onChange('light')}
        title="Light"
        style={{
          border: 0, background: !isDark ? t.panelSolid : 'transparent',
          borderRadius: 999, padding: '5px 8px', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: !isDark ? `0 1px 3px ${t.glassBorder}` : 'none',
          transition: 'background 0.2s',
        }}
      >
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
             stroke={!isDark ? t.palette.amber : t.textMute} strokeWidth="2"
             strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="12" r="4"/>
          <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
        </svg>
      </button>
      <button
        onClick={() => onChange('dark')}
        title="Dark"
        style={{
          border: 0, background: isDark ? t.panelSolid : 'transparent',
          borderRadius: 999, padding: '5px 8px', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: isDark ? `0 1px 3px ${t.glassBorder}` : 'none',
          transition: 'background 0.2s',
        }}
      >
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
             stroke={isDark ? t.palette.periwinkle : t.textMute} strokeWidth="2"
             strokeLinecap="round" strokeLinejoin="round">
          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
        </svg>
      </button>
    </div>
  );
};

const ViewSwitcher = ({ view, onChange }) => {
  const t = THEME;
  const opts = [
    { id: 'client', label: 'Client', icon: 'M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2', icon2: 'M12 7a4 4 0 1 0 0 8 4 4 0 0 0 0-8z' },
    { id: 'lawyer', label: 'Lawyer', icon: 'M3 22h18M6 18v-7M10 18v-7M14 18v-7M18 18v-7M4 11h16L12 3z' },
  ];
  return (
    <div style={{
      display: 'flex',
      background: t.glassSubtle,
      border: `1px solid ${t.glassBorder}`,
      borderRadius: 999,
      padding: 2,
      backdropFilter: 'blur(10px)',
      WebkitBackdropFilter: 'blur(10px)',
    }}>
      {opts.map(o => {
        const active = view === o.id;
        return (
          <button
            key={o.id}
            onClick={() => onChange(o.id)}
            style={{
              border: 0,
              background: active ? t.palette.periwinkle : 'transparent',
              color: active ? '#fff' : t.textDim,
              borderRadius: 999,
              padding: '5px 11px',
              cursor: 'pointer',
              fontSize: 11.5,
              fontWeight: 600,
              fontFamily: 'Inter, system-ui',
              letterSpacing: 0.15,
              display: 'flex',
              alignItems: 'center',
              gap: 5,
              boxShadow: active ? '0 2px 6px rgba(105,134,191,0.35)' : 'none',
              transition: 'all 0.2s',
            }}
          >
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none"
                 stroke={active ? '#fff' : t.textDim} strokeWidth="2"
                 strokeLinecap="round" strokeLinejoin="round">
              <path d={o.icon}/>
              {o.icon2 && <path d={o.icon2}/>}
            </svg>
            {o.label}
          </button>
        );
      })}
    </div>
  );
};

/* Compact combined bar for sidebar footer. Mode toggle + view switcher side by side. */
const AppToggleBar = ({ mode, onModeChange, view, onViewChange }) => (
  <div style={{
    display: 'flex',
    alignItems: 'center',
    gap: 8,
    padding: '10px 12px',
    borderTop: `1px solid ${THEME.glassBorder}`,
    justifyContent: 'space-between',
  }}>
    <ViewSwitcher view={view} onChange={onViewChange}/>
    <ModeToggle mode={mode} onChange={onModeChange}/>
  </div>
);

window.ModeToggle = ModeToggle;
window.ViewSwitcher = ViewSwitcher;
window.AppToggleBar = AppToggleBar;