import React from 'react'
import { Check, MapPin } from 'lucide-react'
import type { CollectionPlace, CollectionStatus } from '@trek/shared'
import type { TranslationFn } from '../../types'
import PlaceAvatar from '../shared/PlaceAvatar'
import StatusBadge from './StatusBadge'

interface CollectionListProps {
  places: CollectionPlace[]
  selectedPlaceId: number | null
  selectMode: boolean
  selectedIds: number[]
  onOpenPlace: (id: number) => void
  onStatusChange: (placeId: number, status: CollectionStatus) => void
  onToggleSelect: (id: number) => void
  t: TranslationFn
}

/**
 * List view — one glass row per saved place with a photo avatar, name +
 * category/address, and a one-tap status cycle on the badge. Click the row to
 * open the place (or toggle it in select mode).
 */
export default function CollectionList({
  places, selectedPlaceId, selectMode, selectedIds, onOpenPlace, onStatusChange, onToggleSelect, t,
}: CollectionListProps): React.ReactElement {
  return (
    <div className="col-listview">
      {places.map(place => {
        const selected = selectedIds.includes(place.id)
        const active = selectedPlaceId === place.id
        return (
          <div
            key={place.id}
            role="button"
            tabIndex={0}
            onClick={() => (selectMode ? onToggleSelect(place.id) : onOpenPlace(place.id))}
            onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (selectMode) onToggleSelect(place.id); else onOpenPlace(place.id) } }}
            className={`col-lrow${active || selected ? ' sel' : ''}`}
          >
            {selectMode ? (
              <span className={`col-lcheck${selected ? ' on' : ''}`}>{selected && <Check size={14} strokeWidth={3} />}</span>
            ) : (
              <PlaceAvatar place={place} size={40} category={place.category ? { color: place.category.color ?? undefined, icon: place.category.icon ?? undefined } : null} />
            )}
            <div className="li">
              <div className="t">{place.name}</div>
              {(place.category?.name || place.address) && (
                <div className="s">
                  {!place.category?.name && <MapPin size={11} />}
                  <span>{place.category?.name || place.address}</span>
                </div>
              )}
            </div>
            <StatusBadge status={place.status} onChange={selectMode ? undefined : next => onStatusChange(place.id, next)} t={t} />
          </div>
        )
      })}
    </div>
  )
}