import { useUIStore } from '@/stores/uiStore';
import { useSettingsStore } from '@/stores/settingsStore';
import { LightsWidget } from '@/components/lights';
import { LocksWidget } from '@/components/locks';
import { ThermostatWidget } from '@/components/climate';
import { AlarmoPanel } from '@/components/alarm';

export function ControlsOverlay() {
  const closeControlsOverlay = useUIStore((s) => s.closeControlsOverlay);
  const config = useSettingsStore((s) => s.config);

  return (
    <div className="overlay-full">
      <header className="h-16 bg-dark-secondary border-b border-dark-border flex items-center justify-between px-5 shrink-0">
        <h2 className="text-2xl font-bold text-ink">Controls</h2>
        <button
          onClick={closeControlsOverlay}
          className="btn btn-sm"
          aria-label="Close controls"
        >
          <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
          </svg>
          Close
        </button>
      </header>

      <div className="flex-1 overflow-auto p-5">
        <div className="grid grid-cols-2 gap-4">
          {config.alarm && <AlarmoPanel />}
          {config.thermostats.map((thermostat) => (
            <ThermostatWidget key={thermostat.entityId} config={thermostat} />
          ))}
          {config.lights.length > 0 && <LightsWidget />}
          {config.locks.length > 0 && <LocksWidget />}
        </div>
      </div>
    </div>
  );
}