import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { api } from '../../utils/api'

/**
 * Fortschrittsfotos (Galerie wie Verlauf-Tab Fotos).
 */
export default function ProgressPhotosWidget({ refreshTick = 0 }) {
  const nav = useNavigate()
  const [photos, setPhotos] = useState([])
  const [big, setBig] = useState(null)

  useEffect(() => {
    api.listPhotos().then(setPhotos).catch(() => setPhotos([]))
  }, [refreshTick])

  if (!photos.length) {
    return (
      <div className="card section-gap" style={{ marginBottom: 16, textAlign: 'center', padding: 24 }}>
        <div style={{ fontSize: 13, color: 'var(--text3)', marginBottom: 12 }}>Noch keine Fotos.</div>
        <button type="button" className="btn btn-primary" onClick={() => nav('/capture')}>
          Zur Erfassung
        </button>
      </div>
    )
  }

  return (
    <div className="card section-gap" style={{ marginBottom: 16 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
        <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--text1)' }}>Fortschrittsfotos</div>
        <button
          type="button"
          className="btn btn-secondary"
          style={{ fontSize: 12, padding: '6px 12px' }}
          onClick={() => nav('/history', { state: { tab: 'photos' } })}
        >
          Verlauf →
        </button>
      </div>
      {big && (
        <div
          role="presentation"
          style={{
            position: 'fixed',
            inset: 0,
            background: 'rgba(0,0,0,0.9)',
            zIndex: 100,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
          onClick={() => setBig(null)}
        >
          <img src={api.photoUrl(big)} style={{ maxWidth: '100%', maxHeight: '100%', borderRadius: 8 }} alt="" />
        </div>
      )}
      <div className="photo-grid">
        {photos.map((p) => (
          <div key={p.id} style={{ position: 'relative' }}>
            <img
              src={api.photoUrl(p.id)}
              className="photo-thumb"
              alt=""
              onClick={() => setBig(p.id)}
            />
            <div
              style={{
                position: 'absolute',
                bottom: 4,
                left: 4,
                fontSize: 9,
                background: 'rgba(0,0,0,0.6)',
                color: 'white',
                padding: '1px 4px',
                borderRadius: 3,
              }}
            >
              {p.date?.slice(0, 10) || p.created?.slice(0, 10)}
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}
