import { Link } from 'react-router';
import { AlbumsSection } from './AlbumsSection';
import { ConnectionSection } from './ConnectionSection';
import { ExploreSection } from './ExploreSection';
import { MapSection } from './MapSection';
import { PeopleSection } from './PeopleSection';
import { SearchSection } from './SearchSection';
import { SharingSection } from './SharingSection';
import { TimelineSection } from './TimelineSection';
import { photosSectionPath } from './shared';
import { usePhotosHealth } from './usePhotosData';
import { usePhotosSection } from './usePhotosSection';

// Right panel of the /photos workspace — renders the section named by the URL.
//
// Timeline, favorites, archive and trash are one component with a filter; the rest are their own.
//
// Health gates all of them, and its two failure modes are answered differently: nothing configured yet is
// the setup form, whatever section was asked for, because there is nothing else useful to show; a stored
// instance that is failing keeps its own message and a way back to the connection screen, since replacing a
// working key by accident is worse than a wall of text.

export const PhotosView = () => {
  const section = usePhotosSection();
  const { data: health, isLoading } = usePhotosHealth();

  if (section === 'settings') return <ConnectionSection />;

  if (!isLoading && health && !health.ok) {
    if (health.configured === false) return <ConnectionSection />;

    return (
      <div className="flex h-full flex-col items-center justify-center gap-1 p-6 text-center">
        <p className="text-sm font-medium">Photos is not answering</p>
        <p className="max-w-sm text-xs text-muted-foreground">
          {health.error ?? 'The photos sidecar could not reach the configured Immich instance.'}
        </p>
        <Link to={photosSectionPath('settings')} className="mt-2 text-xs font-medium text-primary hover:underline">
          Check the connection
        </Link>
      </div>
    );
  }

  switch (section) {
    case 'explore':
      return <ExploreSection />;
    case 'map':
      return <MapSection />;
    case 'search':
      return <SearchSection />;
    case 'albums':
      return <AlbumsSection />;
    case 'people':
      return <PeopleSection />;
    case 'sharing':
      return <SharingSection />;
    case 'favorites':
    case 'archive':
    case 'trash':
    case 'timeline':
    default:
      return <TimelineSection section={section} />;
  }
};