import { Link } from 'react-router';
import { useClient } from 'hooks/useClient';
import { PERSON_PARAM, QUERY_PARAM, personThumbUrl, photosSectionPath, thumbUrl } from './shared';
import { useExplore, usePeople } from './usePhotosData';

// Explore: the faces row, then whatever Immich has clustered the library by — places and things.
//
// Immich's own explore tiles link to a structured search (`{"city":"Lisbon"}`). This proxy exposes smart and
// metadata search only, so a tile links to a smart search for its label instead. Close in spirit, and honest
// about it: a city tile finds photos that LOOK like that city rather than ones tagged with it.

const SECTION_TITLES: Record<string, string> = {
  'exifInfo.city': 'Places',
  'exifInfo.country': 'Countries',
  'smartInfo.objects': 'Things',
  'exifInfo.state': 'Regions',
};

export const ExploreSection = () => {
  const { token } = useClient();
  const { data: explore, isLoading } = useExplore();
  const { data: people } = usePeople();

  const faces = (people?.people ?? []).filter((person) => person.name).slice(0, 12);

  return (
    <div className="flex h-full flex-col">
      <header className="flex items-center gap-2 border-b px-3 py-2">
        <h1 className="text-sm font-semibold">Explore</h1>
      </header>

      <div className="min-h-0 flex-1 space-y-6 overflow-y-auto p-3">
        {faces.length > 0 && (
          <section>
            <div className="mb-2 flex items-baseline gap-2">
              <h2 className="text-sm font-semibold">People</h2>
              <Link to={photosSectionPath('people')} className="text-xs text-muted-foreground hover:underline">
                View all
              </Link>
            </div>
            <div className="flex flex-wrap gap-4">
              {faces.map((person) => (
                <Link
                  key={person.id}
                  to={`${photosSectionPath('people')}?${PERSON_PARAM}=${person.id}`}
                  className="w-20 text-center"
                >
                  <img
                    src={personThumbUrl(person.id, token)}
                    alt=""
                    loading="lazy"
                    className="h-20 w-20 rounded-full object-cover ring-1 ring-white/10"
                  />
                  <span className="mt-1 block truncate text-xs">{person.name}</span>
                </Link>
              ))}
            </div>
          </section>
        )}

        {isLoading && <p className="text-sm text-muted-foreground">Loading…</p>}

        {(explore ?? []).map((section) => (
          <section key={section.fieldName}>
            <h2 className="mb-2 text-sm font-semibold">{SECTION_TITLES[section.fieldName] ?? section.fieldName}</h2>
            <div className="grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))] gap-3">
              {section.items.map((item) => (
                <Link
                  key={`${section.fieldName}:${item.value}`}
                  to={`${photosSectionPath('search')}?${QUERY_PARAM}=${encodeURIComponent(item.value)}`}
                  className="group relative aspect-square overflow-hidden rounded-lg bg-white/5"
                >
                  <img
                    src={thumbUrl(item.data.id, token)}
                    alt=""
                    loading="lazy"
                    className="h-full w-full object-cover transition group-hover:scale-105"
                  />
                  <span className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/80 to-transparent p-2 text-sm font-medium text-white">
                    {item.value}
                  </span>
                </Link>
              ))}
            </div>
          </section>
        ))}

        {!isLoading && (explore ?? []).length === 0 && faces.length === 0 && (
          <p className="text-sm text-muted-foreground">Nothing to explore yet.</p>
        )}
      </div>
    </div>
  );
};