import { Button } from '../ui/Button';
import { Panel } from '../ui/Panel';
import type { MachineRegistryEntry } from '../../modules/machines/schema';
import { useViewerStore } from '../../store/viewerStore';

interface ComponentSidebarProps {
  machine: MachineRegistryEntry;
}

export function ComponentSidebar({ machine }: ComponentSidebarProps) {
  const selectedPartId = useViewerStore((state) => state.selectedPartId);
  const partStates = useViewerStore((state) => state.partStates);
  const setSelectedPartId = useViewerStore((state) => state.setSelectedPartId);
  const setPartVisibility = useViewerStore((state) => state.setPartVisibility);
  const setPartOpacity = useViewerStore((state) => state.setPartOpacity);
  const resetPartStates = useViewerStore((state) => state.resetPartStates);

  return (
    <Panel className="p-4">
      <div className="flex items-start justify-between gap-3">
        <div>
          <h2 className="text-sm font-black uppercase tracking-[0.22em] text-white">Components</h2>
          <p className="mt-1 text-xs leading-5 text-muted">
            Select parts, toggle visibility, and adjust opacity.
          </p>
        </div>
        <Button
          onClick={() => resetPartStates(machine.parts.map((part) => part.id))}
          size="sm"
          variant="ghost"
        >
          Reset
        </Button>
      </div>

      <ul className="mt-4 space-y-3">
        {machine.parts.map((part) => {
          const renderState = partStates[part.id] ?? { visible: true, opacity: 1 };
          const isSelected = selectedPartId === part.id;

          return (
            <li className="rounded-2xl border border-line/60 bg-background/42 p-3" key={part.id}>
              <div className="flex items-center gap-2">
                <button
                  aria-pressed={isSelected}
                  className="min-w-0 flex-1 rounded-lg px-2 py-1 text-left text-sm font-bold text-white transition hover:bg-elevated/70 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary"
                  onClick={() => setSelectedPartId(part.id)}
                  type="button"
                >
                  <span className="block truncate">{part.name}</span>
                  <span className="mt-1 block truncate text-xs font-medium text-muted">{part.id}</span>
                </button>
                <Button
                  aria-label={`${renderState.visible ? 'Hide' : 'Show'} ${part.name}`}
                  isActive={renderState.visible}
                  onClick={() => setPartVisibility(part.id, !renderState.visible)}
                  size="sm"
                  variant="ghost"
                >
                  {renderState.visible ? 'On' : 'Off'}
                </Button>
              </div>

              <label className="mt-3 block text-xs font-semibold text-muted" htmlFor={`${part.id}-opacity`}>
                Opacity {Math.round(renderState.opacity * 100)}%
              </label>
              <input
                className="mt-2 w-full accent-primary disabled:opacity-40"
                disabled={!renderState.visible}
                id={`${part.id}-opacity`}
                max="1"
                min="0.15"
                onChange={(event) => setPartOpacity(part.id, Number(event.currentTarget.value))}
                step="0.05"
                type="range"
                value={renderState.opacity}
              />
            </li>
          );
        })}
      </ul>
    </Panel>
  );
}