import { Construction } from 'lucide-react';
import { SOULSEEK_SECTIONS, useSoulseekSection, type SoulseekSectionId } from './shared';
import { SearchView } from './SearchView';
import { SoulseekTransfers } from './SoulseekTransfers';
import { SoulseekUploads } from './SoulseekUploads';
import { SoulseekRooms } from './SoulseekRooms';
import { SoulseekDashboard } from './SoulseekDashboard';
import { SoulseekChat } from './SoulseekChat';
import { SoulseekUsers } from './SoulseekUsers';
import { SoulseekSystem } from './SoulseekSystem';
import { SoulseekConnection } from './SoulseekConnection';
import { useServiceConnection } from 'officerdev';

// Right panel of the /soulseek workspace — renders the UI for the section the URL names. Content
// zoom used to live here; it is now a framework-level per-panel control in PanelSlot.

const Placeholder = ({ id }: { id: SoulseekSectionId }) => {
  const label = SOULSEEK_SECTIONS.find((s) => s.id === id)?.label ?? id;
  return (
    <div className="flex h-full flex-col items-center justify-center gap-3 text-center">
      <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-muted text-muted-foreground">
        <Construction className="h-6 w-6" />
      </div>
      <div>
        <div className="text-base font-semibold">{label}</div>
        <div className="text-sm text-muted-foreground">Coming soon</div>
      </div>
    </div>
  );
};

const sectionView = (section: SoulseekSectionId) => {
  switch (section) {
    case 'dashboard':
      return <SoulseekDashboard />;
    case 'search':
      return <SearchView />;
    case 'downloads':
      return <SoulseekTransfers />;
    case 'uploads':
      return <SoulseekUploads />;
    case 'rooms':
      return <SoulseekRooms />;
    case 'chat':
      return <SoulseekChat />;
    case 'users':
      return <SoulseekUsers />;
    case 'system':
      return <SoulseekSystem />;
    case 'connection':
      return <SoulseekConnection />;
    default:
      return <Placeholder id={section} />;
  }
};

export const SoulseekView = () => {
  const section = useSoulseekSection();
  const { data: connection, isLoading } = useServiceConnection('soulseek');

  // Nothing connected yet: the setup form takes over every section, because none of them can do anything
  // without a daemon.
  if (!isLoading && !connection?.configured) return <SoulseekConnection />;

  return <div className="h-full w-full">{sectionView(section)}</div>;
};