import Link from 'next/link'
import { ChevronRight, MapPin } from 'lucide-react'
import type { MapChainStep } from '@/lib/maps'

export function MapChain({
  chain,
  currentLocationName,
  currentLocationId,
  otherMaps = [],
}: {
  chain: MapChainStep[]
  currentLocationName: string
  currentLocationId: string
  otherMaps?: { id: string; name: string }[]
}) {
  if (chain.length === 0 && otherMaps.length === 0) return null
  return (
    <div className="mb-3 -mx-2 px-2 overflow-x-auto">
      <div className="flex items-center gap-1 w-max">
        {chain.map((step, i) => (
          <div key={step.map.id} className="flex items-center gap-1">
            <Link
              href={`/locations/maps/${step.map.id}?focus=${currentLocationId}`}
              className="block group"
              title={`${step.map.name} (pin: ${step.pin.locationName})`}
            >
              <div
                className="relative rounded-lg border bg-muted overflow-hidden shrink-0 hover:ring-2 hover:ring-primary"
                style={{
                  width: 96,
                  aspectRatio: `${step.map.width} / ${step.map.height}`,
                }}
              >
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src={`/api/uploads/${step.map.imagePath}`}
                  alt={step.map.name}
                  className="absolute inset-0 w-full h-full object-cover"
                  draggable={false}
                />
                <div
                  style={{ left: `${step.pin.x * 100}%`, top: `${step.pin.y * 100}%` }}
                  className="absolute -translate-x-1/2 -translate-y-full"
                >
                  <MapPin className="size-5 fill-primary text-primary-foreground drop-shadow" />
                </div>
              </div>
              <div className="text-[10px] text-muted-foreground mt-1 max-w-[96px] truncate">
                {step.map.name}
              </div>
            </Link>
            {i < chain.length - 1 && (
              <ChevronRight className="size-4 text-muted-foreground shrink-0" />
            )}
          </div>
        ))}
        {chain.length > 0 && (
          <ChevronRight className="size-4 text-muted-foreground shrink-0" />
        )}
        <div className="flex flex-col items-center justify-center px-2 min-h-[96px] shrink-0">
          <div className="text-sm font-medium">{currentLocationName}</div>
          <div className="text-[10px] text-muted-foreground">you are here</div>
          {otherMaps.length > 0 && (
            <div className="text-[10px] text-muted-foreground/70 mt-1 max-w-[200px] text-center">
              also on{' '}
              {otherMaps.map((m, i) => (
                <span key={m.id}>
                  <Link
                    href={`/locations/maps/${m.id}?focus=${currentLocationId}`}
                    className="underline hover:text-foreground"
                  >
                    {m.name}
                  </Link>
                  {i < otherMaps.length - 1 && ', '}
                </span>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  )
}