'use client';

import type { DrawMode, PartyId } from '@/lib/types';
import { PARTIES } from '@/lib/parties';

interface DrawingToolbarProps {
  mode: DrawMode;
  setMode: (mode: DrawMode) => void;
  activeParty: PartyId;
  setActiveParty: (id: PartyId) => void;
  selectedFeatureId: string | number | null;
  onDeleteSelected: () => void;
  onClearAll: () => void;
  onResetView: () => void;
}

interface ModeOption {
  id: DrawMode;
  label: string;
  icon: string;
  hint: string;
}

const MODES: ModeOption[] = [
  {
    id: 'freehand',
    label: 'Freehand',
    icon: '✎',
    hint: 'Click to start, move the cursor to trace, click again to finish. Drag the map to pan.',
  },
  {
    id: 'polygon',
    label: 'Polygon',
    icon: '◇',
    hint: 'Click to place vertices, double-click or click the start dot to finish',
  },
  {
    id: 'select',
    label: 'Select',
    icon: '⤢',
    hint: 'Click a shape to select, drag a vertex to reshape',
  },
];

export default function DrawingToolbar({
  mode,
  setMode,
  activeParty,
  setActiveParty,
  selectedFeatureId,
  onDeleteSelected,
  onClearAll,
  onResetView,
}: DrawingToolbarProps) {
  return (
    <div className="absolute left-3 top-14 z-10 flex flex-col gap-2 rounded-lg bg-zinc-900/85 p-3 text-zinc-100 shadow-lg backdrop-blur-sm">
      {/* Mode selector */}
      <div>
        <div className="mb-1 text-[10px] font-semibold uppercase tracking-wider text-zinc-400">
          Mode
        </div>
        <div className="flex flex-col gap-1">
          {MODES.map((m) => {
            const active = mode === m.id;
            return (
              <button
                key={m.id}
                type="button"
                onClick={() => setMode(m.id)}
                title={m.hint}
                className={`flex items-center gap-2 rounded px-2 py-1.5 text-xs transition-colors ${
                  active
                    ? 'bg-zinc-100 text-zinc-900'
                    : 'bg-zinc-800/60 text-zinc-100 hover:bg-zinc-700'
                }`}
              >
                <span className="text-base leading-none">{m.icon}</span>
                <span>{m.label}</span>
              </button>
            );
          })}
        </div>
      </div>

      <div className="h-px bg-zinc-700" />

      {/* Active party */}
      <div>
        <div className="mb-1 text-[10px] font-semibold uppercase tracking-wider text-zinc-400">
          Active party
        </div>
        <div className="flex flex-col gap-1">
          {PARTIES.map((p) => {
            const active = activeParty === p.id;
            return (
              <button
                key={p.id}
                type="button"
                onClick={() => setActiveParty(p.id)}
                className={`flex items-center gap-2 rounded px-2 py-1.5 text-xs transition-colors ${
                  active
                    ? 'bg-zinc-100 text-zinc-900'
                    : 'bg-zinc-800/60 text-zinc-100 hover:bg-zinc-700'
                }`}
              >
                <span
                  className="h-3 w-3 rounded-sm border border-white/40"
                  style={{ backgroundColor: p.fillColor }}
                />
                <span>{p.name}</span>
              </button>
            );
          })}
        </div>
      </div>

      <div className="h-px bg-zinc-700" />

      {/* Actions */}
      <div className="flex flex-col gap-1">
        <button
          type="button"
          onClick={onDeleteSelected}
          disabled={selectedFeatureId === null}
          className="rounded bg-red-600/80 px-2 py-1.5 text-xs font-medium text-white transition-colors hover:bg-red-500 disabled:cursor-not-allowed disabled:bg-zinc-700 disabled:text-zinc-500"
        >
          Delete selected
        </button>
        <button
          type="button"
          onClick={onClearAll}
          className="rounded bg-zinc-800/80 px-2 py-1.5 text-xs text-zinc-100 transition-colors hover:bg-zinc-700"
        >
          Clear all
        </button>
        <button
          type="button"
          onClick={onResetView}
          className="rounded bg-zinc-800/80 px-2 py-1.5 text-xs text-zinc-100 transition-colors hover:bg-zinc-700"
        >
          Reset view
        </button>
      </div>
    </div>
  );
}