/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import React, { useState } from 'react';
import { LabTemplate, Device, TopologyLink, User } from '../types';
import TopologyPanel from './TopologyPanel';
import {
  Server, Plus, Edit3, Trash, User as UserIcon, MapPin,
  Layers, ChevronRight, X, Check, Pencil, Terminal, Lock, Globe,
} from 'lucide-react';

interface LabTemplatesProps {
  labs: LabTemplate[];
  devices: Device[];
  currentUser: User;
  onAddLab: (lab: Omit<LabTemplate, 'id' | 'ownerId'>) => void;
  onUpdateLab: (lab: LabTemplate) => void;
  onDeleteLab: (id: string) => void;
  onOpenDeviceDetails: (device: Device) => void;
}

export default function LabTemplates({
  labs,
  devices,
  currentUser,
  onAddLab,
  onUpdateLab,
  onDeleteLab,
  onOpenDeviceDetails
}: LabTemplatesProps) {
  const [selectedLab, setSelectedLab] = useState<LabTemplate | null>(labs[0] || null);
  const [isEditing, setIsEditing] = useState(false);
  const [formMode, setFormMode] = useState<'add' | 'edit'>('add');

  // Topology custom links helper state
  const [tempLinks, setTempLinks] = useState<TopologyLink[]>([]);
  const [linkFrom, setLinkFrom] = useState('');
  const [linkTo, setLinkTo] = useState('');
  const [linkType, setLinkType] = useState('Trunk Uplink');
  const [editingLinkIdx, setEditingLinkIdx] = useState<number | null>(null);
  const [editingLinkLabel, setEditingLinkLabel] = useState('');

  const [formData, setFormData] = useState<{
    id?: string;
    name: string;
    description: string;
    contactPerson: string;
    location: string;
    deviceIds: string[];
    semaphoreSetupTemplateId: string;
    semaphoreTeardownTemplateId: string;
    scope: 'global' | 'personal';
  }>({
    name: '',
    description: '',
    contactPerson: '',
    location: '',
    deviceIds: [],
    semaphoreSetupTemplateId: '',
    semaphoreTeardownTemplateId: '',
    scope: 'global',
  });

  // Calculate filtered devices associated with selected lab
  const labDevices = selectedLab 
    ? devices.filter(d => selectedLab.deviceIds.includes(d.id))
    : [];

  const handleOpenAdd = () => {
    setFormMode('add');
    setTempLinks([]);
    setFormData({
      name: '',
      description: '',
      contactPerson: '',
      location: '',
      deviceIds: [],
      semaphoreSetupTemplateId: '',
      semaphoreTeardownTemplateId: '',
      scope: 'global',
    });
    setIsEditing(true);
  };

  const handleOpenEdit = (lab: LabTemplate) => {
    setFormMode('edit');
    setTempLinks([...lab.topology]);
    setFormData({
      id: lab.id,
      name: lab.name,
      description: lab.description,
      contactPerson: lab.contactPerson,
      location: lab.location,
      deviceIds: [...lab.deviceIds],
      semaphoreSetupTemplateId: lab.semaphoreSetupTemplateId || '',
      semaphoreTeardownTemplateId: lab.semaphoreTeardownTemplateId || '',
      scope: lab.scope ?? 'global',
    });
    setIsEditing(true);
  };

  // Toggle device association in form
  const handleToggleDevice = (devId: string) => {
    const isChosen = formData.deviceIds.includes(devId);
    let newDevices = [];
    if (isChosen) {
      newDevices = formData.deviceIds.filter(id => id !== devId);
      // Clean up invalid topology links referencing deleted devices
      setTempLinks(tempLinks.filter(l => l.fromDevice !== devId && l.toDevice !== devId));
    } else {
      newDevices = [...formData.deviceIds, devId];
    }
    setFormData({ ...formData, deviceIds: newDevices });
  };

  // Add path link to list
  const handleAddLink = () => {
    if (!linkFrom || !linkTo || linkFrom === linkTo) return;
    setTempLinks([...tempLinks, { fromDevice: linkFrom, toDevice: linkTo, type: linkType }]);
    setLinkFrom('');
    setLinkTo('');
  };

  const handleRemoveLink = (idx: number) => {
    setTempLinks(tempLinks.filter((_, i) => i !== idx));
  };

  const handleSave = (e: React.FormEvent) => {
    e.preventDefault();
    if (!formData.name.trim() || formData.deviceIds.length === 0) {
      alert('Please provide a descriptive template name and associate at least one hardware device node.');
      return;
    }

    const savedLabData = {
      name: formData.name,
      description: formData.description,
      contactPerson: formData.contactPerson,
      location: formData.location,
      deviceIds: formData.deviceIds,
      topology: tempLinks,
      semaphoreSetupTemplateId: formData.semaphoreSetupTemplateId,
      semaphoreTeardownTemplateId: formData.semaphoreTeardownTemplateId,
      scope: formData.scope,
    };

    if (formMode === 'add') {
      onAddLab(savedLabData);
    } else if (formMode === 'edit' && formData.id) {
      const existing = labs.find(l => l.id === formData.id);
      onUpdateLab({
        ...savedLabData,
        id: formData.id,
        ownerId: existing?.ownerId ?? '',
      });
    }

    setIsEditing(false);
  };

  const isAdmin = currentUser.role?.toLowerCase() === 'admin';
  const canEdit = (lab: LabTemplate) => isAdmin || lab.ownerId === currentUser.id || lab.ownerId === '';

  const myPersonalLabs = labs.filter(l => l.scope === 'personal' && l.ownerId === currentUser.id);
  const globalLabs     = labs.filter(l => l.scope === 'global');
  const othersPersonal = isAdmin ? labs.filter(l => l.scope === 'personal' && l.ownerId !== currentUser.id) : [];

  const renderLabCard = (lab: LabTemplate) => {
    const isSelected = selectedLab?.id === lab.id;
    const editable = canEdit(lab);
    return (
      <div
        key={lab.id}
        onClick={() => setSelectedLab(lab)}
        className={`p-4 rounded-xl border transition-all cursor-pointer relative ${
          isSelected
            ? 'bg-slate-900 border-emerald-500'
            : 'bg-slate-900/40 border-slate-800 hover:border-slate-700 hover:bg-slate-900/60'
        }`}
      >
        <div className="flex justify-between items-start">
          <h3 className="font-bold text-sm text-white">{lab.name}</h3>
          <div className="flex gap-1.5" onClick={e => e.stopPropagation()}>
            {editable && (
              <>
                <button
                  onClick={() => handleOpenEdit(lab)}
                  className="text-slate-400 hover:text-indigo-400 p-0.5"
                  title="Edit template configuration"
                >
                  <Edit3 className="w-3.5 h-3.5" />
                </button>
                <button
                  onClick={() => {
                    if (confirm(`Are you sure you want to delete lab template "${lab.name}"? Active/completed scheduling logs are retained in the system.`)) {
                      onDeleteLab(lab.id);
                    }
                  }}
                  className="text-slate-400 hover:text-rose-400 p-0.5"
                  title="Delete template"
                >
                  <Trash className="w-3.5 h-3.5" />
                </button>
              </>
            )}
          </div>
        </div>

        <p className="text-xs text-slate-400 mt-1 line-clamp-2 leading-relaxed">
          {lab.description}
        </p>

        <div className="mt-3 pt-3 border-t border-slate-800/80 grid grid-cols-2 gap-1 text-[10px] text-slate-350">
          <div className="flex items-center gap-1">
            <UserIcon className="w-3.5 h-3.5 text-slate-500 shrink-0" />
            <span className="truncate">{lab.contactPerson}</span>
          </div>
          <div className="flex items-center gap-1">
            <MapPin className="w-3.5 h-3.5 text-slate-500 shrink-0" />
            <span className="truncate">{lab.location}</span>
          </div>
        </div>

        <div className="mt-2.5 flex items-center justify-between">
          <div className="flex items-center gap-1.5">
            <span className="text-[10px] font-mono text-emerald-400 bg-emerald-950/50 px-2 py-0.5 rounded border border-emerald-900/50">
              {lab.deviceIds.length} connected devices
            </span>
            {lab.scope === 'personal' ? (
              <span className="text-[10px] font-mono text-indigo-400 bg-indigo-950/50 px-2 py-0.5 rounded border border-indigo-900/50 flex items-center gap-1">
                <Lock className="w-2.5 h-2.5" /> Personal
              </span>
            ) : (
              <span className="text-[10px] font-mono text-slate-400 bg-slate-950/50 px-2 py-0.5 rounded border border-slate-800/50 flex items-center gap-1">
                <Globe className="w-2.5 h-2.5" /> Global
              </span>
            )}
          </div>
          <ChevronRight className={`w-4 h-4 text-slate-500 transition-transform ${isSelected ? 'translate-x-1 text-emerald-400' : ''}`} />
        </div>
      </div>
    );
  };

  return (
    <div className="grid grid-cols-1 lg:grid-cols-12 gap-6" id="lab-templates-container">

      {/* LEFT COLUMN: Lab List */}
      <div className="lg:col-span-4 bg-[#1E293B] border border-slate-800 rounded-xl p-5 flex flex-col h-full font-sans" id="labs-list-section">
        <div className="flex justify-between items-center mb-4">
          <div>
            <h2 className="text-base font-bold text-white flex items-center gap-2">
              <Layers className="w-5 h-5 text-emerald-400" />
              Topology
            </h2>
            <p className="text-xs text-slate-400">Predefined architectural scenarios & wiring profiles.</p>
          </div>
          <button
            onClick={handleOpenAdd}
            className="p-1.5 bg-emerald-600 hover:bg-emerald-500 text-slate-950 font-bold rounded-lg text-xs flex items-center gap-1.5 transition-colors"
            title="Create new lab template"
          >
            <Plus className="w-4 h-4 text-slate-950" />
            New
          </button>
        </div>

        {/* Labs templates list — sectioned */}
        <div className="space-y-3 flex-1 overflow-y-auto max-h-[550px] pr-1">
          {myPersonalLabs.length > 0 && (
            <>
              <p className="text-[10px] font-mono uppercase tracking-widest text-indigo-400 px-1">My Topologies</p>
              {myPersonalLabs.map(renderLabCard)}
            </>
          )}
          {globalLabs.length > 0 && (
            <>
              <p className="text-[10px] font-mono uppercase tracking-widest text-slate-500 px-1 mt-2">Global Topologies</p>
              {globalLabs.map(renderLabCard)}
            </>
          )}
          {othersPersonal.length > 0 && (
            <>
              <p className="text-[10px] font-mono uppercase tracking-widest text-slate-500 px-1 mt-2">Others' Personal</p>
              {othersPersonal.map(renderLabCard)}
            </>
          )}
          {labs.length === 0 && (
            <p className="text-xs text-slate-500 text-center py-8">No topology templates yet.</p>
          )}
        </div>
      </div>

      {/* RIGHT COLUMN: Active Lab Details, Devices details, and TOPOLOGY MAP */}
      <div className="lg:col-span-8 space-y-6" id="labs-view-section">
        {selectedLab ? (
          <>
            {/* Template Card Meta */}
            <div className="bg-[#1E293B] border border-slate-800 rounded-xl p-5 shadow-sm font-sans">
              <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2 mb-4">
                <div>
                  <span className="text-[9px] font-mono uppercase tracking-widest text-slate-400 bg-slate-900 border border-slate-800 px-2.5 py-0.5 rounded">
                    TEMPLATE ID: {selectedLab.id.toUpperCase()}
                  </span>
                  <h3 className="text-lg font-bold text-white mt-1.5">{selectedLab.name}</h3>
                </div>
                <div className="flex items-center gap-2.5">
                  <div className="bg-slate-900 p-2 rounded-lg border border-slate-805 text-[10px] flex items-center gap-1">
                    <UserIcon className="w-3.5 h-3.5 text-slate-400" />
                    <div>
                      <p className="text-slate-400 leading-none">Primary Contact</p>
                      <p className="text-white font-semibold mt-0.5">{selectedLab.contactPerson}</p>
                    </div>
                  </div>
                  <div className="bg-slate-900 p-2 rounded-lg border border-slate-805 text-[10px] flex items-center gap-1">
                    <MapPin className="w-3.5 h-3.5 text-slate-400" />
                    <div>
                      <p className="text-slate-400 leading-none">Testing Location</p>
                      <p className="text-white font-semibold mt-0.5">{selectedLab.location}</p>
                    </div>
                  </div>
                </div>
              </div>

              <p className="text-xs text-slate-300 leading-relaxed bg-slate-900/30 p-3 rounded-lg border border-slate-800">
                {selectedLab.description}
              </p>
            </div>

            {/* Interactive Visual Topology */}
            <TopologyPanel 
              devices={labDevices}
              links={selectedLab.topology}
              onSelectDevice={onOpenDeviceDetails}
            />

            {/* Sub-Devices components list */}
            <div className="bg-[#1E293B] border border-slate-800 rounded-xl p-5 shadow-sm font-sans">
              <h4 className="text-xs font-bold text-slate-300 uppercase tracking-widest font-mono mb-3">Associated Physical Hardware Map</h4>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                {labDevices.map((device) => (
                  <div 
                    key={device.id}
                    onClick={() => onOpenDeviceDetails(device)}
                    className="p-3 bg-slate-900/40 border border-slate-800 hover:border-slate-700 hover:bg-slate-900 transition-colors rounded-lg cursor-pointer flex justify-between items-center"
                  >
                    <div className="flex items-center gap-2.5 font-sans">
                      <div className={`p-1.5 rounded text-indigo-400 bg-indigo-950/30 border border-indigo-900/50`}>
                        <Server className="w-4 h-4" />
                      </div>
                      <div>
                        <p className="text-xs font-mono font-bold text-white leading-none">{device.hostname}</p>
                        <p className="text-[9px] font-mono text-emerald-400 mt-1">{device.ip}</p>
                      </div>
                    </div>
                    
                    <div className="flex items-center gap-2 font-mono">
                      <span className={`w-2 h-2 rounded-full ${device.status === 'online' ? 'bg-emerald-500' : 'bg-rose-500'}`} />
                      <span className="text-[10px] text-slate-400 capitalize">{device.status}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </>
        ) : (
          <div className="bg-slate-900 border border-slate-800 rounded-xl p-16 text-center text-slate-500 text-xs font-sans">
            Select a lab scenario template from the left directory column to inspect active port topology connections.
          </div>
        )}
      </div>

      {/* FORM MODAL: Create or Edit Lab Template */}
      {isEditing && (
        <div className="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">
          <div className="bg-[#1E293B] border border-slate-700 w-full max-w-2xl rounded-xl shadow-2xl overflow-hidden animate-in fade-in zoom-in-95 duration-150">
            
            <div className="bg-slate-900 px-5 py-4 border-b border-slate-700 flex items-center justify-between font-sans overflow-x-auto">
              <h3 className="text-sm font-bold text-white flex items-center gap-2">
                <Layers className="w-5 h-5 text-emerald-400" />
                {formMode === 'add' ? 'Design New Lab Template' : 'Modify Lab Template Configuration'}
              </h3>
              <button
                onClick={() => setIsEditing(false)}
                className="text-slate-400 hover:text-white"
              >
                <X className="w-4 h-4" />
              </button>
            </div>

            <form onSubmit={handleSave} className="p-5 space-y-4 font-sans text-xs max-h-[85vh] overflow-y-auto">
              {/* Name & Location */}
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-slate-300 font-semibold mb-1">Topology Name</label>
                  <input
                    type="text"
                    required
                    value={formData.name}
                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                    className="w-full bg-slate-950 text-slate-100 border border-slate-800 rounded p-2 focus:outline-none focus:border-emerald-500"
                  />
                </div>
                <div>
                  <label className="block text-slate-300 font-semibold mb-1">Physical Location</label>
                  <input
                    type="text"
                    required
                    value={formData.location}
                    onChange={(e) => setFormData({ ...formData, location: e.target.value })}
                    className="w-full bg-slate-950 text-slate-100 border border-slate-800 rounded p-2 focus:outline-none focus:border-emerald-500"
                  />
                </div>
              </div>

              {/* Description & Contact person */}
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-slate-300 font-semibold mb-1">Caretaker / Owner</label>
                  <input
                    type="text"
                    required
                    value={formData.contactPerson}
                    onChange={(e) => setFormData({ ...formData, contactPerson: e.target.value })}
                    className="w-full bg-slate-950 text-slate-100 border border-slate-800 rounded p-2 focus:outline-none focus:border-emerald-500"
                  />
                </div>
                <div>
                  <label className="block text-slate-300 font-semibold mb-1">Description</label>
                  <input
                    type="text"
                    required
                    value={formData.description}
                    onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                    className="w-full bg-slate-950 text-slate-100 border border-slate-800 rounded p-2 focus:outline-none focus:border-emerald-500"
                  />
                </div>
              </div>

              {/* Scope toggle */}
              <div className="border-t border-slate-800 pt-3">
                <label className="block text-slate-300 font-semibold mb-1.5">Visibility</label>
                <div className="grid grid-cols-2 gap-1.5">
                  <button
                    type="button"
                    onClick={() => setFormData({ ...formData, scope: 'global' })}
                    className={`py-2 rounded-lg text-xs font-semibold border transition-all flex items-center justify-center gap-1.5 ${
                      formData.scope === 'global'
                        ? 'bg-slate-800 border-slate-500 text-slate-200'
                        : 'bg-slate-950 border-slate-800 text-slate-400 hover:text-white'
                    }`}
                  >
                    <Globe className="w-3.5 h-3.5" /> Global — visible to all
                  </button>
                  <button
                    type="button"
                    onClick={() => setFormData({ ...formData, scope: 'personal' })}
                    className={`py-2 rounded-lg text-xs font-semibold border transition-all flex items-center justify-center gap-1.5 ${
                      formData.scope === 'personal'
                        ? 'bg-indigo-900/30 border-indigo-500 text-indigo-300'
                        : 'bg-slate-950 border-slate-800 text-slate-400 hover:text-white'
                    }`}
                  >
                    <Lock className="w-3.5 h-3.5" /> Personal — only you
                  </button>
                </div>
              </div>

              {/* Hardware checklist */}
              <div className="border-t border-slate-800 pt-3">
                <label className="block text-slate-300 font-bold mb-1.5">1. Assign Dedicated Hardware Nodes</label>
                <p className="text-[10px] text-slate-400 mb-2">Select the devices from the active hardware inventory associated with this testing group.</p>
                <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 bg-slate-950/60 p-3 rounded-lg border border-slate-855">
                  {devices.map((dev) => {
                    const isChecked = formData.deviceIds.includes(dev.id);
                    return (
                      <button
                        type="button"
                        key={dev.id}
                        onClick={() => handleToggleDevice(dev.id)}
                        className={`p-2 rounded text-left border flex items-center justify-between transition-colors ${
                          isChecked 
                            ? 'bg-emerald-900/20 border-emerald-500 text-slate-100' 
                            : 'bg-slate-900 border-slate-800 hover:border-slate-700 text-slate-300'
                        }`}
                      >
                        <div className="truncate pr-1">
                          <p className="font-bold text-[10px] font-mono leading-none">{dev.hostname}</p>
                          <p className="text-[9px] font-mono text-slate-400 mt-1">{dev.ip}</p>
                        </div>
                        {isChecked && <Check className="w-3.5 h-3.5 text-emerald-400 shrink-0" />}
                      </button>
                    );
                  })}
                </div>
              </div>

              {/* Physical/Logical topology builder link creator */}
              <div className="border-t border-slate-800 pt-3">
                <label className="block text-slate-300 font-bold mb-1.5">2. Define Ports & Link Connections</label>
                <p className="text-[10px] text-slate-400 mb-2">Model logical and physical patch cabling among the selected devices (e.g. Trunk aggregation profiles, LACP uplinks).</p>
                
                {/* Connection Inputs */}
                <div className="grid grid-cols-1 sm:grid-cols-4 gap-2.5 p-2 bg-slate-1000 border border-slate-800 rounded-lg items-end mb-3">
                  <div>
                    <label className="block text-[10px] text-slate-400 mb-1">Source Node</label>
                    <select
                      value={linkFrom}
                      onChange={(e) => setLinkFrom(e.target.value)}
                      className="w-full bg-slate-950 text-slate-250 border border-slate-805 rounded p-1 font-mono text-[11px]"
                    >
                      <option value="">-- Choose --</option>
                      {formData.deviceIds.map((id) => {
                        const d = devices.find(x => x.id === id);
                        return d ? <option key={id} value={id}>{d.hostname}</option> : null;
                      })}
                    </select>
                  </div>
                  <div>
                    <label className="block text-[10px] text-slate-400 mb-1">Target Node</label>
                    <select
                      value={linkTo}
                      onChange={(e) => setLinkTo(e.target.value)}
                      className="w-full bg-slate-950 text-slate-250 border border-slate-805 rounded p-1 font-mono text-[11px]"
                    >
                      <option value="">-- Choose --</option>
                      {formData.deviceIds.map((id) => {
                        const d = devices.find(x => x.id === id);
                        return d ? <option key={id} value={id}>{d.hostname}</option> : null;
                      })}
                    </select>
                  </div>
                  <div>
                    <label className="block text-[10px] text-slate-400 mb-1">Link Identifier Description (Label)</label>
                    <input
                      type="text"
                      className="w-full bg-slate-950 text-slate-250 border border-slate-805 p-1 rounded font-mono text-[11px]"
                      value={linkType}
                      onChange={(e) => setLinkType(e.target.value)}
                    />
                  </div>
                  <button
                    id="add-link-btn"
                    type="button"
                    onClick={handleAddLink}
                    className="w-full py-1.5 bg-indigo-600 hover:bg-indigo-500 rounded text-xs font-bold text-white transition-colors"
                  >
                    Add Link
                  </button>
                </div>

                {/* Listing added links list */}
                {tempLinks.length > 0 ? (
                  <div className="space-y-1 max-h-[140px] overflow-y-auto pr-1">
                    {tempLinks.map((link, idx) => {
                      const fromDev = devices.find(d => d.id === link.fromDevice)?.hostname || link.fromDevice;
                      const toDev = devices.find(d => d.id === link.toDevice)?.hostname || link.toDevice;
                      const isEditingThis = editingLinkIdx === idx;
                      return (
                        <div key={idx} className="flex items-center gap-2 bg-slate-950 px-3 py-1.5 rounded border border-slate-855 font-mono text-[10px] hover:border-slate-700">
                          <span className="text-slate-300 shrink-0"><strong>{fromDev}</strong> ────</span>
                          {isEditingThis ? (
                            <input
                              autoFocus
                              value={editingLinkLabel}
                              onChange={(e) => setEditingLinkLabel(e.target.value)}
                              onBlur={() => {
                                if (editingLinkLabel.trim()) {
                                  setTempLinks(tempLinks.map((l, i) => i === idx ? { ...l, type: editingLinkLabel.trim() } : l));
                                }
                                setEditingLinkIdx(null);
                              }}
                              onKeyDown={(e) => {
                                if (e.key === 'Enter') {
                                  if (editingLinkLabel.trim()) {
                                    setTempLinks(tempLinks.map((l, i) => i === idx ? { ...l, type: editingLinkLabel.trim() } : l));
                                  }
                                  setEditingLinkIdx(null);
                                }
                                if (e.key === 'Escape') setEditingLinkIdx(null);
                              }}
                              className="flex-1 min-w-0 bg-slate-800 text-slate-100 border border-indigo-500 rounded px-1.5 py-0.5 focus:outline-none"
                            />
                          ) : (
                            <span className="flex-1 min-w-0 text-indigo-300 truncate">{link.type}</span>
                          )}
                          <span className="text-slate-300 shrink-0">──── <strong>{toDev}</strong></span>
                          <div className="flex gap-1.5 shrink-0 ml-auto font-sans">
                            <button
                              type="button"
                              onClick={() => { setEditingLinkIdx(idx); setEditingLinkLabel(link.type); }}
                              className="text-slate-400 hover:text-indigo-400 transition-colors"
                              title="Edit label"
                            >
                              <Pencil className="w-3 h-3" />
                            </button>
                            <button
                              type="button"
                              onClick={() => handleRemoveLink(idx)}
                              className="text-rose-500 hover:text-rose-400 font-bold"
                            >
                              <X className="w-3 h-3" />
                            </button>
                          </div>
                        </div>
                      );
                    })}
                  </div>
                ) : (
                  <p className="text-[10px] text-slate-500 italic">No interface connections formulated yet.</p>
                )}
              </div>

              {/* Ansible Semaphore Automation */}
              <div className="border-t border-slate-800 pt-3">
                <label className="block text-slate-300 font-bold mb-1.5 flex items-center gap-1.5">
                  <Terminal className="w-3.5 h-3.5 text-orange-400" />
                  3. Ansible Automation (optional)
                </label>
                <p className="text-[10px] text-slate-400 mb-2">Semaphore task template IDs to trigger at booking start and end. Leave empty to skip automation for this lab.</p>
                <div className="grid grid-cols-2 gap-3">
                  <div>
                    <label className="block text-[10px] text-slate-400 mb-1">Setup Template ID</label>
                    <input
                      type="text"
                      inputMode="numeric"
                      value={formData.semaphoreSetupTemplateId}
                      onChange={(e) => setFormData({ ...formData, semaphoreSetupTemplateId: e.target.value })}
                      className="w-full bg-slate-950 text-slate-100 border border-slate-800 rounded p-2 font-mono text-xs focus:outline-none focus:border-orange-500/60"
                    />
                  </div>
                  <div>
                    <label className="block text-[10px] text-slate-400 mb-1">Teardown Template ID</label>
                    <input
                      type="text"
                      inputMode="numeric"
                      value={formData.semaphoreTeardownTemplateId}
                      onChange={(e) => setFormData({ ...formData, semaphoreTeardownTemplateId: e.target.value })}
                      className="w-full bg-slate-950 text-slate-100 border border-slate-800 rounded p-2 font-mono text-xs focus:outline-none focus:border-orange-500/60"
                    />
                  </div>
                </div>
              </div>

              {/* Form submit handlers */}
              <div className="pt-3 border-t border-slate-800 flex justify-end gap-2.5">
                <button
                  type="button"
                  onClick={() => setIsEditing(false)}
                  className="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded font-semibold text-xs animate-none"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  className="px-4 py-2 bg-emerald-600 hover:bg-emerald-500 text-slate-950 font-bold rounded text-xs animate-none"
                >
                  Save
                </button>
              </div>

            </form>
          </div>
        </div>
      )}

    </div>
  );
}