import { type ReactElement } from 'react';
import styled from '@lilith/ui-styled-components';
import { ArrowLeft, Image } from 'lucide-react';

import { EmptyState } from '@/components/EmptyState';
import { PageError } from '@/components/PageError';
import { useAlbumPhotos } from '@/hooks/usePhotos';
import type { Album } from '@/types';

import { PhotoGrid } from './PhotoGrid';

const Header = styled.div`
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid #2a2a38;
  background: #0a0a0f;
`;

const BackButton = styled.button`
  background: transparent;
  color: #c4c4d4;
  border: 1px solid #2a2a38;
  border-radius: 4px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 12px;

  &:hover {
    border-color: rgba(201,168,76,0.4);
  }
`;

const Title = styled.div`
  font-size: 14px;
  color: #e0e0f0;
  font-weight: 600;
`;

const Subtitle = styled.div`
  font-size: 11px;
  color: #8a8a9a;
`;

const SpinnerWrap = styled.div`
  padding: 20px;
  font-size: 12px;
  color: #8a8a9a;
  text-align: center;
`;

export interface AlbumDetailProps {
  album: Album;
  onBack: () => void;
}

export function AlbumDetail({ album, onBack }: AlbumDetailProps): ReactElement {
  const { data, isLoading, error } = useAlbumPhotos(album.id);

  return (
    <>
      <Header>
        <BackButton onClick={onBack}>
          <ArrowLeft size={14} /> Back
        </BackButton>
        <div>
          <Title>{album.name}</Title>
          <Subtitle>
            {album.photoCount} photo{album.photoCount === 1 ? '' : 's'} · {album.albumType}
          </Subtitle>
        </div>
      </Header>
      {isLoading && <SpinnerWrap aria-live="polite">Loading…</SpinnerWrap>}
      {error && <PageError message="Failed to load album photos" />}
      {!isLoading && !error && data && data.length === 0 && (
        <EmptyState icon={<Image size={36} />} heading="No photos in this album" />
      )}
      {!isLoading && !error && data && data.length > 0 && (
        <PhotoGrid photos={data} ariaLabel={`Photos in ${album.name}`} />
      )}
    </>
  );
}
