import { useState } from 'react';
import type { GridMap } from '../types';
import './MapList.css';

interface Props {
  maps: GridMap[];
  selectedMapId: string | null;
  onSelect: (id: string) => void;
  onCreate: (name: string) => void;
  onDelete: (id: string) => void;
}

export default function MapList({ maps, selectedMapId, onSelect, onCreate, onDelete }: Props) {
  const [newName, setNewName] = useState('');

  function handleCreate(e: React.FormEvent) {
    e.preventDefault();
    const name = newName.trim();
    if (!name) return;
    onCreate(name);
    setNewName('');
  }

  function handleDeleteClick(e: React.MouseEvent, id: string) {
    e.stopPropagation();
    if (confirm('Delete this map? This cannot be undone.')) {
      onDelete(id);
    }
  }

  return (
    <aside className="map-list">
      <div className="map-list-header">
        <h2>Maps</h2>
      </div>

      <form className="map-create-form" onSubmit={handleCreate}>
        <input
          type="text"
          placeholder="New map name…"
          value={newName}
          onChange={e => setNewName(e.target.value)}
        />
        <button type="submit" disabled={!newName.trim()}>+</button>
      </form>

      <ul className="map-entries">
        {maps.length === 0 && (
          <li className="map-empty">No maps yet</li>
        )}
        {maps.map(map => (
          <li
            key={map.id}
            className={`map-entry ${map.id === selectedMapId ? 'selected' : ''}`}
            onClick={() => onSelect(map.id)}
          >
            <span className="map-name">{map.name}</span>
            <button
              className="map-delete"
              onClick={e => handleDeleteClick(e, map.id)}
              title="Delete map"
            >
              Delete️
            </button>
          </li>
        ))}
      </ul>
    </aside>
  );
}