av-planner/src/components/inspector/ConnectionInspector.tsx

import { useMemo, useState } from 'react'
import { allCableTypes, cableTypesForConnection, getPortType } from '../../domain/diagram'
import { useCatalogStore } from '../../state/catalogStore'
import { useDiagramStore } from '../../state/diagramStore'
import { useCanEdit } from '../../hooks/useCanEdit'

export default function ConnectionInspector({ connectionId }: { connectionId: string }) {
  const diagram = useDiagramStore((s) => s.diagram)
  const catalog = useCatalogStore((s) => s.catalog)
  const canEdit = useCanEdit()
  const updateConnection = useDiagramStore((s) => s.updateConnection)
  const removeConnection = useDiagramStore((s) => s.removeConnection)
  const startBundle = useDiagramStore((s) => s.startBundle)
  const addConnectionToBundle = useDiagramStore((s) => s.addConnectionToBundle)
  const removeConnectionFromBundle = useDiagramStore((s) => s.removeConnectionFromBundle)
  const updateBundle = useDiagramStore((s) => s.updateBundle)
  const selectConnection = useDiagramStore((s) => s.selectConnection)
  const [startingBundle, setStartingBundle] = useState(false)
  const [newBundleName, setNewBundleName] = useState('')
  const [newBundleCableTypeId, setNewBundleCableTypeId] = useState('')

  const connection = diagram.connections.find((c) => c.id === connectionId)
  const sourceDevice = diagram.devices.find((d) => d.id === connection?.sourceDeviceId)
  const targetDevice = diagram.devices.find((d) => d.id === connection?.targetDeviceId)
  const sourcePort = sourceDevice?.ports.find((p) => p.id === connection?.sourcePortId)
  const targetPort = targetDevice?.ports.find((p) => p.id === connection?.targetPortId)

  const availableCableTypes = useMemo(() => {
    if (!sourcePort || !targetPort) return []
    const sourcePortType = getPortType(catalog, sourcePort.portTypeId)
    const targetPortType = getPortType(catalog, targetPort.portTypeId)
    return sourcePortType && targetPortType ? cableTypesForConnection(catalog, sourcePortType, targetPortType) : []
  }, [catalog, sourcePort, targetPort])

  const cableCostPerUnit = availableCableTypes.find((ct) => ct.id === connection?.cableTypeId)?.costPerUnit

  // Every cable type, unfiltered by port compatibility — a bundle's own
  // cable type is a separate, BOM-only choice from any member's individually
  // validated cableTypeId (see CableBundle's own doc comment), so it isn't
  // constrained to what fits this specific port pair.
  const allBundleCableTypes = useMemo(
    () => [...allCableTypes(catalog)].sort((a, b) => a.name.localeCompare(b.name)),
    [catalog],
  )

  const bundle = diagram.bundles.find((b) => b.id === connection?.bundleId)
  const otherBundles = diagram.bundles.filter((b) => b.id !== connection?.bundleId)
  const otherMembers = diagram.connections.filter((c) => c.bundleId === bundle?.id && c.id !== connectionId)

  const describeConnectionEnd = (deviceId: string, portId: string) => {
    const device = diagram.devices.find((d) => d.id === deviceId)
    const port = device?.ports.find((p) => p.id === portId)
    return device && port ? `${device.name} · ${port.name}` : 'Unknown'
  }

  if (!connection || !sourceDevice || !targetDevice || !sourcePort || !targetPort) return null

  return (
    <fieldset disabled={!canEdit} className="m-0 space-y-3 border-0 p-3">
      <div className="rounded border border-slate-200 bg-slate-50 p-2 text-xs">
        <div className="flex items-center justify-between py-0.5">
          <span className="text-slate-500">From</span>
          <span className="font-medium text-slate-700">
            {sourceDevice.name} · {sourcePort.name}
          </span>
        </div>
        <div className="flex items-center justify-between py-0.5">
          <span className="text-slate-500">To</span>
          <span className="font-medium text-slate-700">
            {targetDevice.name} · {targetPort.name}
          </span>
        </div>
      </div>

      <label className="block text-xs font-medium text-slate-600">
        Cable type
        <select
          value={connection.cableTypeId}
          onChange={(e) => updateConnection(connection.id, { cableTypeId: e.target.value })}
          className="mt-1 w-full rounded border border-slate-300 px-2 py-1 text-sm"
        >
          {availableCableTypes.map((ct) => (
            <option key={ct.id} value={ct.id}>
              {ct.name}
            </option>
          ))}
        </select>
      </label>

      <label className="block text-xs font-medium text-slate-600">
        Distance (manual estimate)
        <div className="mt-1 flex items-center gap-2">
          <input
            type="number"
            min={0}
            step={0.5}
            value={connection.distance ?? ''}
            onChange={(e) =>
              updateConnection(connection.id, {
                distance: e.target.value === '' ? undefined : Number(e.target.value),
              })
            }
            className="w-full rounded border border-slate-300 px-2 py-1 text-sm"
            placeholder="e.g. 12"
          />
          <span className="text-xs text-slate-500">
            {availableCableTypes.find((ct) => ct.id === connection.cableTypeId)?.unit ?? 'ft'}
          </span>
        </div>
      </label>

      <label className="block text-xs font-medium text-slate-600">
        Cost
        <div className="mt-1 flex items-center gap-2">
          <span className="text-xs text-slate-500">$</span>
          <input
            type="number"
            min={0}
            step={0.01}
            value={connection.cost ?? ''}
            onChange={(e) =>
              updateConnection(connection.id, {
                cost: e.target.value === '' ? undefined : Number(e.target.value),
              })
            }
            className="w-full rounded border border-slate-300 px-2 py-1 text-sm"
            placeholder={
              cableCostPerUnit !== undefined && connection.distance
                ? `e.g. ${(cableCostPerUnit * connection.distance).toFixed(2)}`
                : 'e.g. 24.99'
            }
          />
        </div>
      </label>

      <label className="block text-xs font-medium text-slate-600">
        Label
        <input
          value={connection.label ?? ''}
          onChange={(e) => updateConnection(connection.id, { label: e.target.value })}
          className="mt-1 w-full rounded border border-slate-300 px-2 py-1 text-sm"
          placeholder="e.g. Runs through wall conduit"
        />
      </label>

      <label className="block text-xs font-medium text-slate-600">
        Notes
        <textarea
          value={connection.notes ?? ''}
          onChange={(e) => updateConnection(connection.id, { notes: e.target.value })}
          rows={2}
          className="mt-1 w-full rounded border border-slate-300 px-2 py-1 text-sm"
        />
      </label>

      <div className="border-t border-slate-100 pt-3">
        <h4 className="mb-1.5 text-xs font-semibold uppercase tracking-wide text-slate-500">Bundle</h4>
        {bundle ? (
          <div className="space-y-2 rounded border border-indigo-200 bg-indigo-50/40 p-2 text-xs">
            <p className="text-slate-500">
              Part of a bundle with {otherMembers.length} other cable{otherMembers.length === 1 ? '' : 's'} — counted
              as one item on the BOM, using this bundle's own cable type/length/cost below rather than each leg's.
            </p>
            <label className="block font-medium text-slate-600">
              Name
              <input
                value={bundle.name}
                onChange={(e) => updateBundle(bundle.id, { name: e.target.value })}
                className="mt-1 w-full rounded border border-slate-300 px-2 py-1 text-sm"
              />
            </label>
            <label className="block font-medium text-slate-600">
              Cable type
              <select
                value={bundle.cableTypeId}
                onChange={(e) => updateBundle(bundle.id, { cableTypeId: e.target.value })}
                className="mt-1 w-full rounded border border-slate-300 px-2 py-1 text-sm"
              >
                {allBundleCableTypes.map((ct) => (
                  <option key={ct.id} value={ct.id}>
                    {ct.name}
                  </option>
                ))}
              </select>
            </label>
            <div className="flex gap-2">
              <label className="block flex-1 font-medium text-slate-600">
                Distance
                <input
                  type="number"
                  min={0}
                  step={0.5}
                  value={bundle.distance ?? ''}
                  onChange={(e) =>
                    updateBundle(bundle.id, { distance: e.target.value === '' ? undefined : Number(e.target.value) })
                  }
                  className="mt-1 w-full rounded border border-slate-300 px-2 py-1 text-sm"
                />
              </label>
              <label className="block flex-1 font-medium text-slate-600">
                Cost
                <input
                  type="number"
                  min={0}
                  step={0.01}
                  value={bundle.cost ?? ''}
                  onChange={(e) =>
                    updateBundle(bundle.id, { cost: e.target.value === '' ? undefined : Number(e.target.value) })
                  }
                  className="mt-1 w-full rounded border border-slate-300 px-2 py-1 text-sm"
                />
              </label>
            </div>
            <div>
              <p className="font-medium text-slate-600">Other cables in this bundle:</p>
              <ul className="mt-1 space-y-0.5">
                {otherMembers.map((m) => (
                  <li key={m.id}>
                    <button
                      onClick={() => selectConnection(m.id)}
                      className="text-left text-indigo-600 hover:underline"
                    >
                      {describeConnectionEnd(m.sourceDeviceId, m.sourcePortId)} ↔{' '}
                      {describeConnectionEnd(m.targetDeviceId, m.targetPortId)}
                    </button>
                  </li>
                ))}
              </ul>
            </div>
            <button
              onClick={() => removeConnectionFromBundle(connection.id)}
              className="w-full rounded border border-slate-300 py-1 text-[11px] font-medium text-slate-600 hover:bg-slate-100"
            >
              Remove this cable from the bundle
            </button>
          </div>
        ) : (
          <div className="space-y-2 text-xs">
            <p className="text-slate-500">
              Group this with other cables that are physically one item — a stereo pair, a snake — so the BOM counts
              them as a single purchase instead of one per leg.
            </p>
            {otherBundles.length > 0 && (
              <label className="block font-medium text-slate-600">
                Add to an existing bundle
                <select
                  value=""
                  onChange={(e) => {
                    if (e.target.value) addConnectionToBundle(connection.id, e.target.value)
                  }}
                  className="mt-1 w-full rounded border border-slate-300 px-2 py-1 text-sm"
                >
                  <option value="">Choose a bundle…</option>
                  {otherBundles.map((b) => (
                    <option key={b.id} value={b.id}>
                      {b.name}
                    </option>
                  ))}
                </select>
              </label>
            )}
            {!startingBundle ? (
              <button
                onClick={() => {
                  setNewBundleName('')
                  setNewBundleCableTypeId(connection.cableTypeId)
                  setStartingBundle(true)
                }}
                className="text-[11px] font-medium text-indigo-600 hover:underline"
              >
                + Start a new bundle
              </button>
            ) : (
              <div className="space-y-1.5 rounded border border-slate-200 bg-white p-2">
                <input
                  autoFocus
                  value={newBundleName}
                  onChange={(e) => setNewBundleName(e.target.value)}
                  placeholder="e.g. Stereo Pair"
                  className="w-full rounded border border-slate-300 px-1.5 py-1 text-xs"
                />
                <select
                  value={newBundleCableTypeId}
                  onChange={(e) => setNewBundleCableTypeId(e.target.value)}
                  className="w-full rounded border border-slate-300 px-1.5 py-1 text-xs"
                >
                  {allBundleCableTypes.map((ct) => (
                    <option key={ct.id} value={ct.id}>
                      {ct.name}
                    </option>
                  ))}
                </select>
                <div className="flex justify-end gap-2">
                  <button onClick={() => setStartingBundle(false)} className="text-[11px] text-slate-500">
                    Cancel
                  </button>
                  <button
                    onClick={() => {
                      if (!newBundleName.trim() || !newBundleCableTypeId) return
                      startBundle(connection.id, { name: newBundleName.trim(), cableTypeId: newBundleCableTypeId })
                      setStartingBundle(false)
                    }}
                    disabled={!newBundleName.trim() || !newBundleCableTypeId}
                    className="rounded bg-indigo-600 px-2 py-1 text-[11px] font-medium text-white hover:bg-indigo-500 disabled:cursor-not-allowed disabled:opacity-40"
                  >
                    Create
                  </button>
                </div>
              </div>
            )}
          </div>
        )}
      </div>

      <div className="border-t border-slate-100 pt-3">
        <button
          onClick={() => removeConnection(connection.id)}
          className="w-full rounded border border-red-200 py-1.5 text-xs font-medium text-red-600 hover:bg-red-50"
        >
          Remove cable
        </button>
      </div>
    </fieldset>
  )
}