import { useEffect, useState, useCallback } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom';
import * as api from '../api';
import type { Component, Port } from '../types';
import { COMPONENT_META, COMPONENT_TYPES } from '../types';
import MarkdownEditor from '../components/MarkdownEditor';
import AuditTrail from '../components/AuditTrail';

const STATUS_OPTIONS = ['active', 'maintenance', 'decommissioned'] as const;

export default function ComponentPage() {
  const { componentId } = useParams<{ componentId: string }>();
  const navigate = useNavigate();
  const [component, setComponent] = useState<Component | null>(null);
  const [loading, setLoading] = useState(true);
  const [editing, setEditing] = useState(false);
  const [notes, setNotes] = useState('');
  const [form, setForm] = useState<Partial<Component>>({});
  const [saving, setSaving] = useState(false);
  type PortModalState = { editPort: Port | null };
  const BLANK_PORT_FORM = { port_number: '', label: '', port_type: 'RJ45', notes: '', connected_to_port_id: '' };
  const [portModal, setPortModal] = useState<PortModalState | null>(null);
  const [portForm, setPortForm] = useState(BLANK_PORT_FORM);
  const [patchPanels, setPatchPanels] = useState<Component[]>([]);
  const [switches, setSwitches] = useState<Component[]>([]);
  const [swLink, setSwLink] = useState<{ switchId: string; portNumber: string; portId: string | null } | null>(null);
  const [portError, setPortError] = useState<string | null>(null);

  const loadComponent = useCallback(async () => {
    if (!componentId) return;
    const c = await api.getComponent(componentId);
    setComponent(c);
    setNotes(c.notes ?? '');
    setForm({
      name: c.name, type: c.type, position: c.position, height_units: c.height_units,
      manufacturer: c.manufacturer, model: c.model, serial_number: c.serial_number,
      asset_tag: c.asset_tag, ip_address: c.ip_address, mac_address: c.mac_address, status: c.status,
      port_count: c.port_count,
      sfp_count: c.sfp_count,
    });
    setLoading(false);
    if (c.type === 'switch' && c.rack?.id) {
      const all = await api.getComponents(c.rack.id);
      setPatchPanels(all.filter(comp => comp.type === 'patch_panel'));
    }
    if (c.type === 'patch_panel' && c.rack?.id) {
      const all = await api.getComponents(c.rack.id);
      setSwitches(all.filter(comp => comp.type === 'switch'));
    }
  }, [componentId]);

  useEffect(() => { loadComponent(); }, [loadComponent]);

  const saveNotes = async (val: string) => {
    if (!componentId) return;
    await api.updateComponent(componentId, { notes: val });
  };

  const saveMeta = async () => {
    if (!componentId) return;
    setSaving(true);
    try {
      await api.updateComponent(componentId, form);
      await loadComponent();
      setEditing(false);
    } finally {
      setSaving(false);
    }
  };

  const handleDelete = async () => {
    if (!componentId || !component || !confirm(`Delete component "${component.name}"?`)) return;
    await api.deleteComponent(componentId);
    navigate(component.rack ? `/racks/${component.rack.id}` : '/');
  };

  const handleDeletePort = async (portId: string) => {
    if (!componentId || !confirm('Delete this port?')) return;
    await api.deletePort(componentId, portId);
    await loadComponent();
  };

  const openPortModal = (port?: Port) => {
    setPortError(null);
    setPortModal({ editPort: port ?? null });
    setPortForm(port ? {
      port_number: String(port.port_number),
      label: port.label ?? '',
      port_type: port.port_type,
      notes: port.notes ?? '',
      connected_to_port_id: port.connected_to_port_id ?? '',
    } : BLANK_PORT_FORM);
    if (port?.linked_port?.component_type === 'switch') {
      setSwLink({ switchId: port.linked_port.component_id, portNumber: String(port.linked_port.port_number), portId: port.linked_port.id });
    } else {
      setSwLink(null);
    }
  };
  const closePortModal = () => { setPortModal(null); setSwLink(null); setPortError(null); };

  const handleSavePort = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!componentId || !portForm.port_number) return;
    setPortError(null);

    // Patch-panel only: validate no duplicate port number and capacity limit
    if (component?.type === 'patch_panel' && !portModal?.editPort) {
      const existingPorts: Port[] = component.ports ?? [];
      const portNum = Number(portForm.port_number);
      const maxPorts = component.port_count ?? Infinity;

      if (existingPorts.some(p => p.port_number === portNum)) {
        setPortError(`Port ${portNum} is already added. Each port number can only appear once.`);
        return;
      }
      if (existingPorts.length >= maxPorts) {
        setPortError(`This patch panel is full (${maxPorts} ports). Delete an existing port to add a new one.`);
        return;
      }
      if (portNum < 1 || portNum > maxPorts) {
        setPortError(`Port number must be between 1 and ${maxPorts}.`);
        return;
      }
    }

    // Resolve connected_to_port_id for patch panels via swLink
    let connectedToPortId: string | null | undefined = portForm.connected_to_port_id || null;
    if (component?.type === 'patch_panel') {
      if (swLink?.switchId && swLink?.portNumber) {
        if (swLink.portId) {
          connectedToPortId = swLink.portId;
        } else {
          // Switch port record doesn't exist yet – create it first
          const newSwPort = await api.createPort(swLink.switchId, {
            port_number: Number(swLink.portNumber),
            port_type: 'RJ45',
          });
          connectedToPortId = newSwPort.id;
        }
      } else {
        connectedToPortId = null;
      }
    }

    try {
      if (portModal?.editPort) {
        await api.updatePort(componentId, portModal.editPort.id, {
          label: portForm.label || undefined,
          port_type: portForm.port_type,
          notes: portForm.notes || undefined,
          connected_to_port_id: connectedToPortId,
        });
      } else {
        await api.createPort(componentId, {
          port_number: Number(portForm.port_number),
          label: portForm.label || undefined,
          port_type: portForm.port_type,
          notes: portForm.notes || undefined,
          connected_to_port_id: connectedToPortId ?? undefined,
        });
      }
    } catch (err: unknown) {
      setPortError(err instanceof Error ? err.message : 'Failed to save port');
      return;
    }
    setPortModal(null);
    setSwLink(null);
    setPortError(null);
    await loadComponent();
  };

  const setField = (key: keyof Component, val: unknown) =>
    setForm(f => ({ ...f, [key]: val }));

  if (loading || !component) return <div className="page-loading">Loading…</div>;

  const meta = COMPONENT_META[component.type];
  const ports: Port[] = component.ports ?? [];

  return (
    <div className="page">
      <div className="page-header">
        <div className="breadcrumb">
          <Link to="/">Dashboard</Link>
          {component.site && <><span> / </span><Link to={`/sites/${component.site.id}`}>{component.site.name}</Link></>}
          {component.room && <><span> / </span><Link to={`/rooms/${component.room.id}`}>{component.room.name}</Link></>}
          {component.rack && <><span> / </span><Link to={`/racks/${component.rack.id}`}>{component.rack.name}</Link></>}
          <span> / </span>
          <span>{component.name}</span>
        </div>
        <div className="page-actions">
          {component.rack && (
            <button className="btn-back btn-sm" onClick={() => navigate(`/racks/${component.rack!.id}`)}>← Back to Rack</button>
          )}
          <button className="btn-secondary btn-sm" onClick={() => setEditing(v => !v)}>
            {editing ? 'Cancel' : '✎ Edit'}
          </button>
          <button className="btn-danger btn-sm" onClick={handleDelete}>🗑 Delete</button>
        </div>
      </div>

      {/* Component Header */}
      <div className="component-header" style={{ borderLeft: `6px solid ${meta.color}` }}>
        <div className="component-type-badge" style={{ background: meta.bg, color: meta.color }}>
          {meta.label}
        </div>
        <h1 className="entity-title">{component.name}</h1>
        <span className={`status-badge status-${component.status}`}>{component.status}</span>
      </div>

      {/* Meta fields */}
      <section className="content-section">
        {editing ? (
          <div className="edit-meta-form">
            <div className="form-row">
              <div className="form-group form-group-lg">
                <label>Name</label>
                <input className="form-input" value={form.name ?? ''} onChange={e => setField('name', e.target.value)} />
              </div>
              <div className="form-group">
                <label>Type</label>
                <select className="form-input" value={form.type ?? 'other'} onChange={e => setField('type', e.target.value)}>
                  {COMPONENT_TYPES.map(t => <option key={t} value={t}>{COMPONENT_META[t].label}</option>)}
                </select>
              </div>
              <div className="form-group">
                <label>Status</label>
                <select className="form-input" value={form.status ?? 'active'} onChange={e => setField('status', e.target.value)}>
                  {STATUS_OPTIONS.map(s => <option key={s} value={s}>{s}</option>)}
                </select>
              </div>
            </div>
            <div className="form-row">
              <div className="form-group">
                <label>Position (U)</label>
                <input type="number" className="form-input" value={form.position ?? ''} onChange={e => setField('position', e.target.value ? Number(e.target.value) : null)} />
              </div>
              <div className="form-group">
                <label>Height (U)</label>
                <input type="number" className="form-input" value={form.height_units ?? 1} onChange={e => setField('height_units', Number(e.target.value))} />
              </div>
              {(form.type === 'switch' || form.type === 'patch_panel') && (
                <div className="form-group">
                  <label>{form.type === 'patch_panel' ? 'Available Patches' : 'Switch Ports'}</label>
                  <input
                    type="number" min={1} max={96} className="form-input"
                    value={form.port_count ?? 24}
                    onChange={e => setField('port_count', Number(e.target.value))}
                  />
                  <span className="form-hint">
                    {form.type === 'patch_panel' ? 'RJ45 jacks on front panel' : 'Ethernet port count'}
                  </span>
                </div>
              )}
              {form.type === 'switch' && (
                <div className="form-group">
                  <label>Fiber / SFP Ports</label>
                  <input
                    type="number" min={0} max={16} className="form-input"
                    value={form.sfp_count ?? 0}
                    onChange={e => setField('sfp_count', Number(e.target.value))}
                  />
                  <span className="form-hint">SFP / fiber uplink slots</span>
                </div>
              )}
            </div>
            <div className="form-row">
              <div className="form-group">
                <label>Manufacturer</label>
                <input className="form-input" value={form.manufacturer ?? ''} onChange={e => setField('manufacturer', e.target.value)} />
              </div>
              <div className="form-group">
                <label>Model</label>
                <input className="form-input" value={form.model ?? ''} onChange={e => setField('model', e.target.value)} />
              </div>
            </div>
            <div className="form-row">
              <div className="form-group">
                <label>IP Address</label>
                <input className="form-input" value={form.ip_address ?? ''} onChange={e => setField('ip_address', e.target.value)} />
              </div>
              <div className="form-group">
                <label>MAC Address</label>
                <input className="form-input" value={form.mac_address ?? ''} onChange={e => setField('mac_address', e.target.value)} />
              </div>
            </div>
            <div className="form-row">
              <div className="form-group">
                <label>Serial Number</label>
                <input className="form-input" value={form.serial_number ?? ''} onChange={e => setField('serial_number', e.target.value)} />
              </div>
              <div className="form-group">
                <label>Asset Tag</label>
                <input className="form-input" value={form.asset_tag ?? ''} onChange={e => setField('asset_tag', e.target.value)} />
              </div>
            </div>
            <div className="form-actions">
              <button className="btn-primary btn-sm" onClick={saveMeta} disabled={saving}>
                {saving ? 'Saving…' : 'Save Changes'}
              </button>
              <button className="btn-secondary btn-sm" onClick={() => setEditing(false)}>Cancel</button>
            </div>
          </div>
        ) : (
          <div className="component-meta-grid">
            <MetaField label="Type" value={meta.label} />
            <MetaField label="Status" value={component.status} />
            <MetaField label="Rack Position" value={component.position != null ? `${component.position}U` : '—'} />
            <MetaField label="Height" value={`${component.height_units}U`} />
            <MetaField label="Manufacturer" value={component.manufacturer} />
            <MetaField label="Model" value={component.model} />
            <MetaField label="IP Address" value={component.ip_address} />
            <MetaField label="MAC Address" value={component.mac_address} />
            <MetaField label="Serial Number" value={component.serial_number} />
            <MetaField label="Asset Tag" value={component.asset_tag} />
            {(component.type === 'switch' || component.type === 'patch_panel') && (
              <MetaField
                label={component.type === 'patch_panel' ? 'Available Patches' : 'Port Count'}
                value={component.port_count != null ? `${component.port_count} ports` : null}
              />
            )}
            {component.type === 'switch' && (
              <MetaField
                label="Fiber / SFP Ports"
                value={component.sfp_count != null ? `${component.sfp_count} SFP slots` : null}
              />
            )}
          </div>
        )}
      </section>

      {/* Ports */}
      <section className="content-section">
        <div className="section-header">
          <h2 className="section-title">Ports / Connections</h2>
          <button className="btn-primary btn-sm" onClick={() => openPortModal()}>
            + {component.type === 'patch_panel' ? 'Add PP Port' : 'Add SW Port'}
          </button>
        </div>

        {ports.length === 0 ? (
          <div className="empty-state-sm">No ports documented yet.</div>
        ) : (
          <div className="ports-grid">
            {ports.map(port => (
              <div key={port.id} className="port-item">
                <div className="port-number">{port.port_number}</div>
                <div className="port-info">
                  <div className="port-label">{port.label || '—'}</div>
                  {component.type !== 'patch_panel' && (
                    <div className="port-type">{port.port_type}</div>
                  )}
                  {port.notes && <div className="port-notes">{port.notes}</div>}
                  {port.linked_port && (
                    <div className="port-link-chain">
                      {component.type === 'switch'
                        ? `↔ ${port.linked_port.component_name} : P${port.linked_port.port_number}${port.linked_port.label ? ` → ${port.linked_port.label}` : ''}`
                        : `↔ ${port.linked_port.component_name} : P${port.linked_port.port_number}`
                      }
                    </div>
                  )}
                  {port.last_edited_by && (
                    <div className="port-edited-by">
                      ✎ {port.last_edited_by}
                      {port.updated_at && (
                        <> · {new Date(port.updated_at).toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}</>
                      )}
                    </div>
                  )}
                </div>
                <button className="port-edit-btn" onClick={() => openPortModal(port)} title="Edit port">✎</button>
                <button className="port-delete" onClick={() => handleDeletePort(port.id)} title="Delete port">✕</button>
              </div>
            ))}
          </div>
        )}
      </section>

      {/* Port Modal */}
      {portModal !== null && (
        <div className="modal-overlay" onClick={e => e.target === e.currentTarget && closePortModal()}>
          <div className="modal">
            <div className="modal-header">
              <span className="modal-title">
                {portModal.editPort
                  ? `Edit ${component.type === 'patch_panel' ? 'PP' : 'SW'} Port ${portModal.editPort.port_number}`
                  : `Add ${component.type === 'patch_panel' ? 'PP Port' : 'SW Port'}`}
              </span>
              {portModal.editPort?.last_edited_by && (
                <span className="modal-last-edited">
                  ✎ {portModal.editPort.last_edited_by}
                  {portModal.editPort.updated_at && (
                    <> · {new Date(portModal.editPort.updated_at).toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}</>
                  )}
                </span>
              )}
              <button className="modal-close" onClick={closePortModal}>✕</button>
            </div>
            <form onSubmit={handleSavePort} style={{ padding: '20px', display: 'flex', flexDirection: 'column', gap: '16px' }}>
              <div className="form-row">
                <div className="form-group">
                  <label>{component.type === 'patch_panel' ? 'PP Port #' : 'SW Port #'}</label>
                  <input
                    type="number" className="form-input"
                    min={1}
                    max={component.type === 'patch_panel' && component.port_count ? component.port_count : undefined}
                    value={portForm.port_number}
                    onChange={e => setPortForm(f => ({ ...f, port_number: e.target.value }))}
                    required
                    disabled={!!portModal.editPort}
                  />
                  {component.type === 'patch_panel' && component.port_count && !portModal.editPort && (
                    <span className="form-hint">Port 1–{component.port_count}</span>
                  )}
                </div>
                <div className="form-group form-group-lg">
                  <label>{component.type === 'patch_panel' ? 'End Device' : 'Label'}</label>
                  <input
                    className="form-input"
                    value={portForm.label}
                    onChange={e => setPortForm(f => ({ ...f, label: e.target.value }))}
                    placeholder={component.type === 'patch_panel' ? 'e.g. Desktop 1, Printer, IP Camera' : 'e.g. Uplink-01'}
                    autoFocus={!portModal.editPort}
                  />
                </div>
                {component.type !== 'patch_panel' && (
                  <div className="form-group">
                    <label>Type</label>
                    <select className="form-input" value={portForm.port_type}
                      onChange={e => setPortForm(f => ({ ...f, port_type: e.target.value }))}>
                      {['RJ45', 'SFP', 'SFP+', 'QSFP', 'LC', 'SC', 'Serial', 'USB', 'HDMI'].map(t =>
                        <option key={t} value={t}>{t}</option>
                      )}
                    </select>
                  </div>
                )}
                <div className="form-group">
                  <label>Notes</label>
                  <input
                    className="form-input"
                    value={portForm.notes}
                    onChange={e => setPortForm(f => ({ ...f, notes: e.target.value }))}
                    placeholder={component.type === 'patch_panel' ? 'e.g. Room A, Floor 2' : 'e.g. VLAN 10'}
                  />
                </div>
              </div>
              {component.type === 'switch' && patchPanels.length > 0 && (
                <PpLinkPicker
                  key={portModal.editPort?.id ?? 'add'}
                  patchPanels={patchPanels}
                  initialPpId={
                    portModal.editPort?.linked_port?.component_type === 'patch_panel'
                      ? portModal.editPort.linked_port.component_id
                      : undefined
                  }
                  value={portForm.connected_to_port_id}
                  onChange={id => setPortForm(f => ({ ...f, connected_to_port_id: id }))}
                />
              )}
              {component.type === 'patch_panel' && (
                <SwLinkPicker
                  key={portModal.editPort?.id ?? 'add'}
                  switches={switches}
                  initialSwitchId={swLink?.switchId}
                  initialPortNumber={swLink?.portNumber}
                  currentLinkedPortId={swLink?.portId}
                  onChange={setSwLink}
                />
              )}
              {portError && (
                <div style={{ color: '#f87171', fontSize: 13, background: '#450a0a', border: '1px solid #7f1d1d', borderRadius: 6, padding: '8px 12px' }}>
                  ⚠ {portError}
                </div>
              )}
              <div className="form-actions">
                <button type="submit" className="btn-primary btn-sm">
                  {portModal.editPort ? 'Save Changes' : (component.type === 'patch_panel' ? 'Add PP Port' : 'Add SW Port')}
                </button>
                <button type="button" className="btn-secondary btn-sm" onClick={closePortModal}>Cancel</button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Notes */}
      <section className="content-section">
        <h2 className="section-title">Documentation</h2>
        <MarkdownEditor
          value={notes}
          onChange={setNotes}
          onSave={saveNotes}
          lastEditedBy={component.notes_last_edited_by}
          lastEditedAt={component.notes_updated_at}
        />
      </section>

      <AuditTrail entityId={component.id} />
    </div>
  );
}

function MetaField({ label, value }: { label: string; value?: string | number | null }) {
  if (!value && value !== 0) return null;
  return (
    <div className="meta-field">
      <span className="meta-field-label">{label}</span>
      <span className="meta-field-value">{value}</span>
    </div>
  );
}

function PpLinkPicker({
  patchPanels,
  value,
  initialPpId,
  onChange,
}: {
  patchPanels: Component[];
  value: string;
  initialPpId?: string;
  onChange: (portId: string) => void;
}) {
  const [selectedPpId, setSelectedPpId] = useState(initialPpId ?? '');
  const [ppPorts, setPpPorts] = useState<Port[]>([]);
  const [loadingPp, setLoadingPp] = useState(false);

  useEffect(() => {
    if (!selectedPpId) { setPpPorts([]); return; }
    setLoadingPp(true);
    api.getComponent(selectedPpId).then(pp => {
      setPpPorts(pp.ports ?? []);
      setLoadingPp(false);
    });
  }, [selectedPpId]);

  const selectedPort = ppPorts.find(p => p.id === value);

  return (
    <div className="pp-link-picker">
      <span className="pp-link-label">🔗 Link to Patch Panel</span>
      <div className="pp-link-row">
        <select
          className="form-input form-input-sm"
          value={selectedPpId}
          onChange={e => { setSelectedPpId(e.target.value); onChange(''); }}
        >
          <option value="">— no patch panel —</option>
          {patchPanels.map(pp => (
            <option key={pp.id} value={pp.id}>{pp.name}</option>
          ))}
        </select>
        {selectedPpId && (
          <select
            className="form-input form-input-sm"
            value={value}
            onChange={e => onChange(e.target.value)}
            disabled={loadingPp}
          >
            <option value="">— select port —</option>
            {ppPorts.map(p => (
              <option key={p.id} value={p.id}>
                Port {p.port_number}{p.label ? ` — ${p.label}` : ''}
              </option>
            ))}
          </select>
        )}
      </div>
      {selectedPort?.label && (
        <div className="pp-link-device-hint">
          ↳ End device: <strong>{selectedPort.label}</strong>
        </div>
      )}
      {value && (
        <button
          type="button"
          className="pp-link-clear"
          onClick={() => { onChange(''); setSelectedPpId(''); }}
        >
          ✕ Clear link
        </button>
      )}
    </div>
  );
}

function SwLinkPicker({
  switches,
  initialSwitchId,
  initialPortNumber,
  currentLinkedPortId,
  onChange,
}: {
  switches: Component[];
  initialSwitchId?: string;
  initialPortNumber?: string;
  currentLinkedPortId?: string | null;
  onChange: (link: { switchId: string; portNumber: string; portId: string | null } | null) => void;
}) {
  const [selectedSwitchId, setSelectedSwitchId] = useState(initialSwitchId ?? '');
  const [switchData, setSwitchData] = useState<Component | null>(null);
  const [loadingSwitch, setLoadingSwitch] = useState(false);
  const [selectedPortNumber, setSelectedPortNumber] = useState(initialPortNumber ?? '');

  useEffect(() => {
    if (!selectedSwitchId) { setSwitchData(null); return; }
    setLoadingSwitch(true);
    api.getComponent(selectedSwitchId).then(sw => {
      setSwitchData(sw);
      setLoadingSwitch(false);
    });
  }, [selectedSwitchId]);

  const portCount = switchData?.port_count ?? 24;

  const handleSwitchChange = (swId: string) => {
    setSelectedSwitchId(swId);
    setSelectedPortNumber('');
    onChange(null);
  };

  const handlePortChange = (portNumberStr: string) => {
    setSelectedPortNumber(portNumberStr);
    if (!portNumberStr || !selectedSwitchId) { onChange(null); return; }
    const existingPort = (switchData?.ports ?? []).find(p => p.port_number === Number(portNumberStr));
    onChange({ switchId: selectedSwitchId, portNumber: portNumberStr, portId: existingPort?.id ?? null });
  };

  return (
    <div className="pp-link-picker">
      <span className="pp-link-label">🔗 Link to Switch Port <span style={{ color: 'var(--text3)', fontWeight: 400 }}>(optional)</span></span>
      <div className="pp-link-row">
        <select
          className="form-input form-input-sm"
          value={selectedSwitchId}
          onChange={e => handleSwitchChange(e.target.value)}
        >
          <option value="">— no switch —</option>
          {switches.map(sw => (
            <option key={sw.id} value={sw.id}>{sw.name}</option>
          ))}
        </select>
        {selectedSwitchId && !loadingSwitch && switchData && (
          <select
            className="form-input form-input-sm"
            value={selectedPortNumber}
            onChange={e => handlePortChange(e.target.value)}
          >
            <option value="">— select port —</option>
            {Array.from({ length: portCount }, (_, i) => i + 1).map(n => {
              const existingPort = (switchData.ports ?? []).find(p => p.port_number === n);
              const isOccupied = existingPort?.connected_to_port_id && existingPort.id !== currentLinkedPortId;
              return (
                <option key={n} value={String(n)} disabled={!!isOccupied}>
                  Port {n}{existingPort?.label ? ` — ${existingPort.label}` : ''}{isOccupied ? ' (in use)' : ''}
                </option>
              );
            })}
          </select>
        )}
        {loadingSwitch && <span style={{ color: 'var(--text3)', fontSize: 12 }}>Loading…</span>}
        {switches.length === 0 && (
          <span style={{ color: 'var(--text3)', fontSize: 12 }}>No switches in this rack</span>
        )}
      </div>
      {selectedSwitchId && selectedPortNumber && (
        <button
          type="button"
          className="pp-link-clear"
          onClick={() => { setSelectedSwitchId(''); setSelectedPortNumber(''); onChange(null); }}
        >
          ✕ Clear link
        </button>
      )}
    </div>
  );
}