photos/web/AssetInfoPanel.tsx

import type { Asset } from './shared';
import { Link } from 'react-router';
import { Camera, Image as ImageIcon, MapPin } from 'lucide-react';
import { PERSON_PARAM, formatBytes, formatLongDate, formatTime, personThumbUrl, photosSectionPath } from './shared';

// The lightbox's info drawer, in the order Immich's own panel uses: description, date, file, camera, location,
// people. Sections with nothing in them are omitted rather than shown empty — a library full of screenshots
// has no camera data and shouldn't render a row of dashes for every one.

type AssetInfoPanelProps = { asset: Asset | undefined; token: string | null };

export const AssetInfoPanel = ({ asset, token }: AssetInfoPanelProps) => {
  if (!asset) return <div className="p-4 text-sm text-muted-foreground">Loading…</div>;

  const exif = asset.exifInfo;
  const megapixels = asset.width && asset.height ? (asset.width * asset.height) / 1_000_000 : 0;
  const place = [exif?.city, exif?.state, exif?.country].filter(Boolean).join(', ');
  const aperture = exif?.fNumber ? `ƒ/${exif.fNumber}` : null;
  const shot = [
    aperture,
    exif?.exposureTime ? `${exif.exposureTime}s` : null,
    exif?.focalLength ? `${Math.round(exif.focalLength)}mm` : null,
    exif?.iso ? `ISO ${exif.iso}` : null,
  ].filter(Boolean);

  return (
    <div className="space-y-5 p-4 text-sm">
      {exif?.description && <p className="text-muted-foreground">{exif.description}</p>}

      <section>
        <p className="font-medium">{formatLongDate(asset.localDateTime)}</p>
        <p className="text-xs text-muted-foreground">{formatTime(asset.localDateTime)}</p>
      </section>

      <Section icon={<ImageIcon className="h-4 w-4" />} title={asset.originalFileName}>
        <Row
          label={`${asset.width} × ${asset.height}`}
          value={megapixels >= 0.1 ? `${megapixels.toFixed(1)} MP` : null}
        />
        <Row label="Size" value={formatBytes(exif?.fileSizeInByte)} />
        <Row label="Type" value={asset.originalMimeType ?? asset.type} />
        <p className="break-all pt-1 text-xs text-muted-foreground">{asset.originalPath}</p>
      </Section>

      {(exif?.make || exif?.model || shot.length > 0) && (
        <Section icon={<Camera className="h-4 w-4" />} title={[exif?.make, exif?.model].filter(Boolean).join(' ')}>
          {exif?.lensModel && <p className="text-xs text-muted-foreground">{exif.lensModel}</p>}
          {shot.length > 0 && <p className="text-xs text-muted-foreground">{shot.join(' · ')}</p>}
        </Section>
      )}

      {(place || (exif?.latitude != null && exif?.longitude != null)) && (
        <Section icon={<MapPin className="h-4 w-4" />} title={place || 'Location'}>
          {exif?.latitude != null && exif?.longitude != null && (
            <p className="text-xs text-muted-foreground">
              {exif.latitude.toFixed(5)}, {exif.longitude.toFixed(5)}
            </p>
          )}
        </Section>
      )}

      {asset.people && asset.people.length > 0 && (
        <section>
          <h3 className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">People</h3>
          <div className="flex flex-wrap gap-3">
            {asset.people.map((person) => (
              <Link
                key={person.id}
                to={`${photosSectionPath('people')}?${PERSON_PARAM}=${person.id}`}
                className="w-16 text-center"
              >
                <img
                  src={personThumbUrl(person.id, token)}
                  alt=""
                  className="h-16 w-16 rounded-full object-cover ring-1 ring-white/10"
                />
                <span className="mt-1 block truncate text-xs">{person.name || 'Unnamed'}</span>
              </Link>
            ))}
          </div>
        </section>
      )}
    </div>
  );
};

type SectionProps = { icon: React.ReactNode; title: string; children?: React.ReactNode };

const Section = ({ icon, title, children }: SectionProps) => (
  <section className="flex gap-3">
    <span className="mt-0.5 shrink-0 text-muted-foreground">{icon}</span>
    <div className="min-w-0 flex-1">
      <p className="truncate font-medium">{title}</p>
      {children}
    </div>
  </section>
);

const Row = ({ label, value }: { label: string; value: string | null }) => (
  <p className="text-xs text-muted-foreground">{value ? `${label} · ${value}` : label}</p>
);