import { useMemo, useState } from 'react';

import { useViewerStore } from '../../store/viewerStore';

export interface PartListPanelProps {
  className?: string;
}

export function PartListPanel({ className = '' }: PartListPanelProps) {
  const [query, setQuery] = useState('');
  const parts = useViewerStore((state) => state.parts);
  const partSettings = useViewerStore((state) => state.partSettings);
  const selectedPartId = useViewerStore((state) => state.selectedPartId);
  const selectPart = useViewerStore((state) => state.selectPart);
  const setPartVisibility = useViewerStore((state) => state.setPartVisibility);
  const setPartOpacity = useViewerStore((state) => state.setPartOpacity);
  const setAllPartsVisibility = useViewerStore((state) => state.setAllPartsVisibility);
  const resetPartSettings = useViewerStore((state) => state.resetPartSettings);

  const filteredParts = useMemo(() => {
    const normalisedQuery = query.trim().toLowerCase();

    if (!normalisedQuery) {
      return parts;
    }

    return parts.filter((part) =>
      [part.name, part.shortName, part.description, ...(part.keywords ?? [])]
        .join(' ')
        .toLowerCase()
        .includes(normalisedQuery)
    );
  }, [parts, query]);

  return (
    <aside
      className={`flex min-h-0 flex-col rounded-2xl border border-white/10 bg-[#121721]/92 shadow-xl shadow-black/20 backdrop-blur-xl ${className}`}
      aria-label="Machine component list"
    >
      <div className="border-b border-white/10 p-4">
        <div className="flex items-start justify-between gap-3">
          <div>
            <h2 className="text-sm font-semibold uppercase tracking-[0.18em] text-slate-100">
              Components
            </h2>
            <p className="mt-1 text-xs text-slate-400">
              Select, hide, or fade individual engineered parts.
            </p>
          </div>
          <span className="rounded-full border border-white/10 bg-white/5 px-2 py-1 font-mono text-[11px] text-slate-300">
            {parts.length}
          </span>
        </div>

        <label className="mt-4 block">
          <span className="sr-only">Search components</span>
          <input
            value={query}
            onChange={(event) => setQuery(event.target.value)}
            placeholder="Search parts"
            className="w-full rounded-xl border border-white/10 bg-[#0B0E14]/75 px-3 py-2 text-sm text-white outline-none transition placeholder:text-slate-600 focus:border-sky-300/70 focus:ring-2 focus:ring-sky-400/20"
          />
        </label>

        <div className="mt-3 grid grid-cols-3 gap-2">
          <button
            type="button"
            className="rounded-lg border border-white/10 bg-white/[0.04] px-2 py-1.5 text-xs text-slate-300 transition hover:border-sky-300/50 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-sky-300"
            onClick={() => setAllPartsVisibility(true)}
          >
            Show all
          </button>
          <button
            type="button"
            className="rounded-lg border border-white/10 bg-white/[0.04] px-2 py-1.5 text-xs text-slate-300 transition hover:border-amber-300/50 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-sky-300"
            onClick={() => setAllPartsVisibility(false)}
          >
            Hide all
          </button>
          <button
            type="button"
            className="rounded-lg border border-white/10 bg-white/[0.04] px-2 py-1.5 text-xs text-slate-300 transition hover:border-white/30 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-sky-300"
            onClick={resetPartSettings}
          >
            Reset
          </button>
        </div>
      </div>

      <div className="min-h-0 flex-1 overflow-y-auto p-2">
        {filteredParts.length === 0 ? (
          <div className="rounded-xl border border-dashed border-white/10 p-4 text-sm text-slate-500">
            No components match “{query}”.
          </div>
        ) : (
          <ul className="space-y-2">
            {filteredParts.map((part) => {
              const settings = partSettings[part.id] ?? { visible: true, opacity: 1 };
              const selected = selectedPartId === part.id;

              return (
                <li
                  key={part.id}
                  className={`rounded-xl border p-3 transition ${
                    selected
                      ? 'border-sky-300/60 bg-sky-400/10 shadow-[0_0_28px_rgba(76,141,255,0.12)]'
                      : 'border-white/10 bg-white/[0.025] hover:border-white/20 hover:bg-white/[0.045]'
                  }`}
                >
                  <div className="flex items-start gap-3">
                    <label className="mt-1 inline-flex cursor-pointer items-center">
                      <input
                        type="checkbox"
                        checked={settings.visible}
                        onChange={(event) => setPartVisibility(part.id, event.target.checked)}
                        className="h-4 w-4 rounded border-white/20 bg-[#0B0E14] text-sky-400 focus:ring-sky-400"
                        aria-label={`Toggle ${part.name} visibility`}
                      />
                    </label>

                    <button
                      type="button"
                      className="min-w-0 flex-1 text-left focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-300"
                      onClick={() => selectPart(part.id)}
                    >
                      <span className="block truncate text-sm font-medium text-white">
                        {part.name}
                      </span>
                      <span className="mt-1 line-clamp-2 block text-xs leading-5 text-slate-400">
                        {part.description}
                      </span>
                    </button>
                  </div>

                  <label className="mt-3 grid grid-cols-[52px_1fr_42px] items-center gap-2 text-[11px] uppercase tracking-[0.14em] text-slate-500">
                    <span>Opacity</span>
                    <input
                      type="range"
                      min={8}
                      max={100}
                      value={Math.round(settings.opacity * 100)}
                      onChange={(event) => setPartOpacity(part.id, Number(event.target.value) / 100)}
                      className="accent-sky-400"
                      aria-label={`Set ${part.name} opacity`}
                    />
                    <span className="text-right font-mono text-slate-400">
                      {Math.round(settings.opacity * 100)}%
                    </span>
                  </label>
                </li>
              );
            })}
          </ul>
        )}
      </div>
    </aside>
  );
}