openchamber/packages/ui/src/components/layout/SettingsDialog.tsx

import React from 'react';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { cn } from '@/lib/utils';
import { SIDEBAR_SECTIONS } from '@/constants/sidebar';
import type { SidebarSection } from '@/constants/sidebar';
import { RiArrowLeftSLine } from '@remixicon/react';
import { Button } from '@/components/ui/button';
import { AgentsSidebar } from '@/components/sections/agents/AgentsSidebar';
import { AgentsPage } from '@/components/sections/agents/AgentsPage';
import { CommandsSidebar } from '@/components/sections/commands/CommandsSidebar';
import { CommandsPage } from '@/components/sections/commands/CommandsPage';
import { ProvidersSidebar } from '@/components/sections/providers/ProvidersSidebar';
import { ProvidersPage } from '@/components/sections/providers/ProvidersPage';
import { GitIdentitiesSidebar } from '@/components/sections/git-identities/GitIdentitiesSidebar';
import { GitIdentitiesPage } from '@/components/sections/git-identities/GitIdentitiesPage';
import { SettingsPage } from '@/components/sections/settings/SettingsPage';
import { useDeviceInfo } from '@/lib/device';
import { ErrorBoundary } from '@/components/ui/ErrorBoundary';
import { SIDEBAR_CONTENT_WIDTH } from '@/components/layout/Sidebar';
import { MobileOverlayPanel } from '@/components/ui/MobileOverlayPanel';

interface SettingsDialogProps {
  isOpen: boolean;
  onClose: () => void;
}

const SETTINGS_SECTIONS = (() => {
  const filtered = SIDEBAR_SECTIONS.filter(section => section.id !== 'sessions');
  const settingsSection = filtered.find(s => s.id === 'settings');
  const otherSections = filtered.filter(s => s.id !== 'settings');
  return settingsSection ? [settingsSection, ...otherSections] : filtered;
})();

export const SettingsDialog: React.FC<SettingsDialogProps> = ({ isOpen, onClose }) => {
  const [activeTab, setActiveTab] = React.useState<SidebarSection>('settings');
  const [showPageContent, setShowPageContent] = React.useState(false);
  const { isMobile } = useDeviceInfo();

  React.useEffect(() => {
    if (isOpen) {
      setActiveTab('settings');
      setShowPageContent(false);
    }
  }, [isOpen]);

  const handleTabChange = React.useCallback((tab: SidebarSection) => {
    setActiveTab(tab);
    if (isMobile) {
      setShowPageContent(false);
    }
  }, [isMobile]);

  const handleItemSelect = React.useCallback(() => {
    if (isMobile) {
      setShowPageContent(true);
    }
  }, [isMobile]);

  const renderSidebarContent = () => {

    if (activeTab === 'settings') {
      return null;
    }

    const content = (() => {
      switch (activeTab) {
        case 'agents':
          return <AgentsSidebar />;
        case 'commands':
      return <CommandsSidebar />;
    case 'providers':
      return <ProvidersSidebar />;
    case 'git-identities':
      return <GitIdentitiesSidebar />;
    default:
      return null;
  }
    })();

    if (isMobile) {
      return <div onClick={handleItemSelect}>{content}</div>;
    }

    return content;
  };

  const renderPageContent = () => {
    switch (activeTab) {
      case 'agents':
        return <AgentsPage />;
      case 'commands':
        return <CommandsPage />;
      case 'providers':
      return <ProvidersPage />;
    case 'git-identities':
      return <GitIdentitiesPage />;
    case 'settings':
      return <SettingsPage />;
      default:
        return null;
    }
  };

  const activeSection = SETTINGS_SECTIONS.find(s => s.id === activeTab);
  const useMobileOverlay = isMobile;

  const headerContent = (
    <DialogHeader
      className="border-b border-border/40 px-6 pb-4 pt-[calc(var(--oc-safe-area-top,0px)+0.5rem)]"
    >
      <div className="relative flex items-center justify-center">
        {isMobile && showPageContent && (
          <Button
            variant="ghost"
            size="icon"
            onClick={() => setShowPageContent(false)}
            className="absolute left-0 h-6 w-6 flex-shrink-0"
          >
            <RiArrowLeftSLine className="h-5 w-5" />
            <span className="sr-only">Back to sidebar</span>
          </Button>
        )}
        <DialogTitle className="typography-ui-header">Settings</DialogTitle>
      </div>
      {activeSection && (
        <DialogDescription className="typography-meta text-muted-foreground hidden sm:block">
          {activeSection.description}
        </DialogDescription>
      )}
    </DialogHeader>
  );

  const mainContent = (
    <div className={cn(
      'flex flex-col min-h-0',
      isMobile ? 'h-full overflow-hidden' : 'flex-1 overflow-hidden'
    )}>
      <div className="flex flex-wrap items-center gap-1 border-b border-border/40 bg-background/95 px-3 py-1.5">
        {SETTINGS_SECTIONS.map(({ id, label, icon: Icon }) => {
          const isActive = activeTab === id;
          const PhosphorIcon = Icon as React.ComponentType<{ className?: string; weight?: string }>;
          return (
            <button
              key={id}
              onClick={() => handleTabChange(id)}
              className={cn(
                'flex items-center gap-1 rounded-md px-2.5 py-1.5 text-xs font-medium whitespace-nowrap',
                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
                isActive ? 'text-primary' : 'text-muted-foreground hover:text-foreground'
              )}
              aria-pressed={isActive}
              aria-label={label}
            >
              <PhosphorIcon className={cn('h-5 w-5 sm:h-4 sm:w-4')} weight="regular" />
              <span className="hidden sm:inline">{label}</span>
            </button>
          );
        })}
      </div>

      <div className="flex flex-1 overflow-hidden">
        {activeTab !== 'settings' && (!isMobile || !showPageContent) && (
          <div
            className={cn(
              'overflow-hidden border-r bg-sidebar',
              isMobile && 'w-full border-r-0'
            )}
            style={
              !isMobile
                ? {
                    width: `${SIDEBAR_CONTENT_WIDTH}px`,
                    minWidth: `${SIDEBAR_CONTENT_WIDTH}px`,
                  }
                : undefined
            }
          >
            <ErrorBoundary>{renderSidebarContent()}</ErrorBoundary>
          </div>
        )}

        {(activeTab === 'settings' || !isMobile || showPageContent) && (
          <div className={cn('flex-1 overflow-hidden bg-background', isMobile && 'w-full')}>
            <ErrorBoundary>{renderPageContent()}</ErrorBoundary>
          </div>
        )}
      </div>
    </div>
  );

  const panelContent = (
    <div className="flex h-full flex-col overflow-hidden">
      {!useMobileOverlay && headerContent}
      {mainContent}
    </div>
  );

  if (useMobileOverlay) {
    return (
      <MobileOverlayPanel
        open={isOpen}
        onClose={onClose}
        title="Settings"
        className="max-w-full"
        contentMaxHeightClassName="h-[min(80dvh,720px)]"
        renderHeader={(closeButton) => (
          <div className="flex items-center justify-between px-3 py-2 border-b border-border/40">
            <div className="relative flex flex-1 items-center justify-center">
              {showPageContent && (
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={() => setShowPageContent(false)}
                  className="absolute left-0 h-6 w-6 flex-shrink-0"
                >
                  <RiArrowLeftSLine className="h-5 w-5" />
                  <span className="sr-only">Back to sidebar</span>
                </Button>
              )}
              <span className="typography-ui-header">Settings</span>
            </div>
            {closeButton}
          </div>
        )}
      >
        {mainContent}
      </MobileOverlayPanel>
    );
  }

  return (
    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
      <DialogContent
        className={cn(
          'flex flex-col gap-0 p-0',
          'h-[88vh] w-[65vw] max-w-[900px]'
        )}
      >
        {panelContent}
      </DialogContent>
    </Dialog>
  );
};