import { gameRuntime } from '../state/runtime';
import { useGameStore } from '../state/store';
import { ActionColumn } from './ActionColumn';
import { EventLog } from './EventLog';
import { ResourceBar } from './ResourceBar';

export function PlayPanel() {
  const showEventLog = useGameStore((s) => s.prefs.showEventLog);
  const columns = useGameStore((s) => s.actionColumns).filter(
    (col) => col.groups.length > 0 && col.groups.some((g) => g.actions.length > 0),
  );
  const queuedActionIds = useGameStore((s) => s.queuedActionIds);
  const queuedActionNames = useGameStore((s) => s.queuedActionNames);

  return (
    <div className="space-y-6">
      <div className="block md:hidden">
        <ResourceBar />
      </div>

      <section aria-label="Actions" className="flex gap-4 overflow-x-auto pb-4">
        {columns.map((col) => (
          <ActionColumn
            key={col.kind}
            label={col.label}
            groups={col.groups}
            actionKind={col.kind}
          />
        ))}
      </section>

      {queuedActionNames.length > 0 ? (
        <div className="border border-slate-800 bg-slate-900/30 rounded-xl p-4">
          <h3 className="font-semibold text-slate-400 text-xs uppercase tracking-wider mb-2">
            Action Queue
          </h3>
          <ol aria-label="Action queue" className="flex flex-col gap-1.5">
            {queuedActionNames.map((name, index) => (
              <li
                // biome-ignore lint/suspicious/noArrayIndexKey: indices are stable and identify individual queue items
                key={`${queuedActionIds[index]}-${index}`}
                className="flex items-center justify-between rounded-lg border border-slate-700 bg-slate-900/60 px-3 py-2 text-sm"
              >
                <span className="text-slate-300">{name}</span>
                <button
                  type="button"
                  aria-label={`Cancel ${name}`}
                  onClick={() => gameRuntime.cancelQueuedAction(index)}
                  className="rounded px-2 py-0.5 text-slate-400 transition-colors hover:bg-slate-800 hover:text-amber-400"
                >
                  ✕
                </button>
              </li>
            ))}
          </ol>
        </div>
      ) : null}

      {showEventLog && (
        <div className="block md:hidden">
          <EventLog />
        </div>
      )}
    </div>
  );
}