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

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

export default function ConnectionInspector({ connectionId }: { connectionId: string }) {
  const diagram = useDiagramStore((s) => s.diagram)
  const catalog = useCatalogStore((s) => s.catalog)
  const access = useDiagramStore((s) => s.access)
  const canEdit = access?.myPermission !== 'view'
  const updateConnection = useDiagramStore((s) => s.updateConnection)
  const removeConnection = useDiagramStore((s) => s.removeConnection)

  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

  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">
        <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>
  )
}