import React from 'react'
import { Link } from 'react-router-dom'
import PageShell from '../components/Layout/PageShell'
import { PageSpinner } from '../components/shared/Spinner'
import PhotoGallery from '../components/Photos/PhotoGallery'
import { ArrowLeft } from 'lucide-react'
import { useTranslation } from '../i18n'
import { usePhotos } from './photos/usePhotos'

export default function PhotosPage(): React.ReactElement {
  const { t } = useTranslation()
  // Page = wiring container: trip/days/places load, photo sync + handlers live in the hook.
  const { tripId, navigate, trip, days, places, photos, isLoading, handleUpload, handleDelete, handleUpdate } = usePhotos()

  if (isLoading) {
    return (
      <PageSpinner
        wrapperClassName="min-h-screen flex items-center justify-center bg-slate-50"
        className="w-10 h-10 border-4 border-slate-200 border-t-slate-700"
      />
    )
  }

  return (
    <PageShell className="bg-slate-50" navbar={{ tripTitle: trip?.name, tripId, showBack: true, onBack: () => navigate(`/trips/${tripId}`) }}>
        <div className="max-w-7xl mx-auto px-4 py-6">
          {/* Header */}
          <div className="flex items-center gap-3 mb-6">
            <Link
              to={`/trips/${tripId}`}
              className="flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700"
            >
              <ArrowLeft className="w-4 h-4" />
              {t('common.backToPlanning')}
            </Link>
          </div>

          <div className="flex items-center justify-between mb-6">
            <div>
              <h1 className="text-2xl font-bold text-gray-900">{t('photos.title')}</h1>
              <p className="text-gray-500 text-sm">{t('photos.subtitle', { count: photos.length, trip: trip?.name })}</p>
            </div>
          </div>

          <PhotoGallery
            photos={photos}
            onUpload={handleUpload}
            onDelete={handleDelete}
            onUpdate={handleUpdate}
            places={places}
            days={days}
            tripId={tripId}
          />
        </div>
    </PageShell>
  )
}