import { useEffect, useState } from 'react';
import { dimensionService } from '@/services/dimensionService';
import { Image as ImageIcon } from 'lucide-react';
import { Image } from '@/components/ui/image';
export default function PhotosScansTab({ component }) {
  const [photos, setPhotos] = useState([]);
  useEffect(() => {
    Promise.all([dimensionService.dimensions(component.uuid), dimensionService.stations(component.uuid), dimensionService.accessPoints(component.uuid), dimensionService.movementPositions(component.uuid)]).then(([dims, stations, access, moves]) => {
      const list = [
        ...dims.filter(d => d.photo_url).map(d => ({ url: d.photo_url, label: d.dimension_name, source: 'Dimension' })),
        ...stations.filter(s => s.photograph_url).map(s => ({ url: s.photograph_url, label: s.station_name, source: 'Station' })),
        ...access.filter(a => a.photograph_url).map(a => ({ url: a.photograph_url, label: a.name, source: 'Access point' })),
        ...moves.filter(m => (m.photograph_url || m.scan_url)).map(m => ({ url: m.photograph_url || m.scan_url, label: m.position_name, source: m.scan_url ? 'Scan' : 'Movement' })),
      ];
      setPhotos(list);
    });
  }, [component.uuid]);
  if (photos.length === 0) return <div className="rounded-xl border border-dashed border-white/10 p-8 text-center text-slate-500"><ImageIcon className="mx-auto mb-2 h-8 w-8" /><p className="text-sm">No photographs or scans uploaded yet.</p></div>;
  return (
    <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
      {photos.map((p, i) => (
        <div key={i} className="panel p-3">
          <div className="aspect-video overflow-hidden rounded-lg bg-black/30"><Image src={p.url} alt={p.label} fittingType="fit" className="h-full w-full" /></div>
          <p className="mt-2 text-sm text-slate-300">{p.label}</p>
          <p className="text-xs text-slate-500">{p.source}</p>
        </div>
      ))}
    </div>
  );
}