import { AnimatePresence, motion } from 'framer-motion';

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

export function DetailDrawer() {
  const selectedPart = useViewerStore(selectSelectedPart);
  const partSettings = useViewerStore((state) =>
    selectedPart ? state.partSettings[selectedPart.id] : undefined
  );
  const clearSelection = useViewerStore((state) => state.clearSelection);
  const setPartVisibility = useViewerStore((state) => state.setPartVisibility);
  const setPartOpacity = useViewerStore((state) => state.setPartOpacity);

  return (
    <AnimatePresence>
      {selectedPart ? (
        <motion.aside
          key={selectedPart.id}
          initial={{ opacity: 0, x: 28 }}
          animate={{ opacity: 1, x: 0 }}
          exit={{ opacity: 0, x: 28 }}
          transition={{ duration: 0.22, ease: 'easeOut' }}
          className="absolute bottom-4 right-4 top-24 z-30 flex w-[min(390px,calc(100%-2rem))] flex-col overflow-hidden rounded-2xl border border-white/10 bg-[#121721]/94 shadow-2xl shadow-black/35 backdrop-blur-xl"
          role="dialog"
          aria-modal="false"
          aria-labelledby="selected-part-title"
        >
          <div className="border-b border-white/10 p-5">
            <div className="flex items-start justify-between gap-4">
              <div>
                <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-300">
                  Selected component
                </p>
                <h2 id="selected-part-title" className="mt-2 text-xl font-semibold text-white">
                  {selectedPart.name}
                </h2>
                {selectedPart.material ? (
                  <p className="mt-1 text-sm text-slate-400">{selectedPart.material}</p>
                ) : null}
              </div>

              <button
                type="button"
                className="rounded-lg border border-white/10 bg-white/[0.04] px-2.5 py-1.5 text-sm text-slate-300 transition hover:border-white/25 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-sky-300"
                onClick={clearSelection}
                aria-label="Close component details"
              >
                ×
              </button>
            </div>
          </div>

          <div className="min-h-0 flex-1 overflow-y-auto p-5">
            <p className="text-sm leading-6 text-slate-300">{selectedPart.description}</p>

            <div className="mt-5 rounded-2xl border border-white/10 bg-[#0B0E14]/46 p-4">
              <h3 className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-300">
                Component controls
              </h3>
              <div className="mt-3 space-y-3">
                <label className="flex items-center justify-between gap-3 text-sm text-slate-300">
                  <span>Visible</span>
                  <input
                    type="checkbox"
                    checked={partSettings?.visible ?? true}
                    onChange={(event) => setPartVisibility(selectedPart.id, event.target.checked)}
                    className="h-4 w-4 rounded border-white/20 bg-[#0B0E14] text-sky-400 focus:ring-sky-400"
                  />
                </label>

                <label className="grid grid-cols-[64px_1fr_42px] items-center gap-2 text-sm text-slate-300">
                  <span>Opacity</span>
                  <input
                    type="range"
                    min={8}
                    max={100}
                    value={Math.round((partSettings?.opacity ?? 1) * 100)}
                    onChange={(event) => setPartOpacity(selectedPart.id, Number(event.target.value) / 100)}
                    className="accent-sky-400"
                  />
                  <span className="text-right font-mono text-xs text-slate-400">
                    {Math.round((partSettings?.opacity ?? 1) * 100)}%
                  </span>
                </label>
              </div>
            </div>

            {selectedPart.specs ? (
              <div className="mt-5">
                <h3 className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-300">
                  Engineering specs
                </h3>
                <dl className="mt-3 divide-y divide-white/10 overflow-hidden rounded-2xl border border-white/10">
                  {Object.entries(selectedPart.specs).map(([label, value]) => (
                    <div
                      key={label}
                      className="grid grid-cols-[44%_1fr] gap-3 bg-[#0B0E14]/34 px-3 py-2.5 text-sm"
                    >
                      <dt className="text-slate-500">{label}</dt>
                      <dd className="font-medium text-slate-200">{String(value)}</dd>
                    </div>
                  ))}
                </dl>
              </div>
            ) : null}

            {selectedPart.engineeringFacts && selectedPart.engineeringFacts.length > 0 ? (
              <div className="mt-5">
                <h3 className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-300">
                  Facts
                </h3>
                <div className="mt-3 space-y-3">
                  {selectedPart.engineeringFacts.map((fact) => (
                    <div
                      key={`${fact.label}-${fact.value}`}
                      className="rounded-2xl border border-white/10 bg-[#0B0E14]/34 p-3"
                    >
                      <div className="flex items-baseline justify-between gap-3">
                        <span className="text-xs uppercase tracking-[0.16em] text-slate-500">
                          {fact.label}
                        </span>
                        <span className="font-mono text-sm text-amber-200">{fact.value}</span>
                      </div>
                      {fact.detail ? (
                        <p className="mt-2 text-xs leading-5 text-slate-400">{fact.detail}</p>
                      ) : null}
                    </div>
                  ))}
                </div>
              </div>
            ) : null}
          </div>
        </motion.aside>
      ) : null}
    </AnimatePresence>
  );
}