import { useState, useEffect } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { MapContainer, TileLayer, Marker } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import L from "leaflet";
import api from "../api/client";
import { useAuth } from "../auth/AuthContext";
import ConfirmDialog from "../components/ConfirmDialog";
import NotesPanel from "../equipment/NotesPanel";

// Fix default Leaflet marker icon
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
  iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
  iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
  shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
});

// --- Helper components ---

function Field({ label, children }) {
  return (
    <div>
      <dt className="text-xs font-medium uppercase tracking-wide" style={{ color: "var(--text-muted)" }}>
        {label}
      </dt>
      <dd className="mt-1 text-sm" style={{ color: "var(--text-primary)" }}>
        {children || "-"}
      </dd>
    </div>
  );
}

function BoolBadge({ value, yesLabel = "Yes", noLabel = "No" }) {
  return (
    <span
      className="px-2 py-0.5 text-xs rounded-full"
      style={
        value
          ? { backgroundColor: "var(--success-bg)", color: "var(--success-text)" }
          : { backgroundColor: "var(--bg-card-hover)", color: "var(--text-muted)" }
      }
    >
      {value ? yesLabel : noLabel}
    </span>
  );
}

function SectionCard({ title, children }) {
  return (
    <section className="rounded-lg border p-6" style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}>
      <h2 className="text-lg font-semibold mb-4" style={{ color: "var(--text-heading)" }}>{title}</h2>
      {children}
    </section>
  );
}

function Subsection({ title, children, isFirst = false }) {
  return (
    <div className={isFirst ? "" : "mt-4 pt-4 border-t"} style={isFirst ? {} : { borderColor: "var(--border-secondary)" }}>
      <h3 className="text-sm font-semibold mb-3" style={{ color: "var(--text-primary)" }}>{title}</h3>
      <dl className="grid gap-4" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))" }}>{children}</dl>
    </div>
  );
}

// --- Date / time helpers ---

function parseFirestoreDate(str) {
  if (!str) return null;
  const cleaned = str.replace(" at ", " ").replace("UTC+0000", "UTC").replace(/UTC\+(\d{4})/, "UTC");
  const d = new Date(cleaned);
  return isNaN(d.getTime()) ? null : d;
}

function formatDate(str) {
  const d = parseFirestoreDate(str);
  if (!d) return str || "-";
  const day = d.getUTCDate().toString().padStart(2, "0");
  const month = (d.getUTCMonth() + 1).toString().padStart(2, "0");
  const year = d.getUTCFullYear();
  return `${day}-${month}-${year}`;
}

function addDays(date, days) {
  return new Date(date.getTime() + days * 86400000);
}

function formatDateNice(d) {
  if (!d) return "-";
  const months = ["January","February","March","April","May","June","July","August","September","October","November","December"];
  return `${d.getUTCDate()} ${months[d.getUTCMonth()]} ${d.getUTCFullYear()}`;
}

function daysUntil(targetDate) {
  const now = new Date();
  const diff = targetDate.getTime() - now.getTime();
  return Math.ceil(diff / 86400000);
}

function formatRelativeTime(days) {
  if (days < 0) return null;
  if (days === 0) return "today";
  if (days === 1) return "in 1 day";
  if (days < 30) return `in ${days} days`;
  const months = Math.floor(days / 30);
  const remainDays = days % 30;
  if (remainDays === 0) return `in ${months} month${months > 1 ? "s" : ""}`;
  return `in ${months} month${months > 1 ? "s" : ""} and ${remainDays} day${remainDays > 1 ? "s" : ""}`;
}

function daysToDisplay(days) {
  if (days >= 365 && days % 365 === 0) return `${days / 365} year${days / 365 > 1 ? "s" : ""} (${days} days)`;
  if (days >= 30) {
    const months = Math.floor(days / 30);
    const rem = days % 30;
    if (rem === 0) return `${months} month${months > 1 ? "s" : ""} (${days} days)`;
    return `${days} days (~${months} month${months > 1 ? "s" : ""})`;
  }
  return `${days} days`;
}

function formatTimestamp(str) {
  // Try to parse as a Firestore timestamp and return HH:MM
  if (!str) return "-";
  const d = parseFirestoreDate(str);
  if (d) {
    return `${d.getUTCHours().toString().padStart(2, "0")}:${d.getUTCMinutes().toString().padStart(2, "0")}`;
  }
  // Maybe it's already a time string like "14:00"
  if (/^\d{1,2}:\d{2}/.test(str)) return str;
  // Try to extract time from the string
  const match = str.match(/(\d{1,2}):(\d{2})/);
  if (match) return `${match[1].padStart(2, "0")}:${match[2]}`;
  return str;
}

function msToSeconds(ms) {
  if (ms == null) return "-";
  return `${(ms / 1000).toFixed(1)}s`;
}

// --- Coordinates helpers ---

function parseCoordinates(coordStr) {
  if (!coordStr) return null;
  // Handle "lat,lng" or "lat° N, lng° E" or similar
  const cleaned = coordStr.replace(/°\s*[NSEW]/gi, "").trim();
  const parts = cleaned.split(",").map((s) => parseFloat(s.trim()));
  if (parts.length === 2 && !isNaN(parts[0]) && !isNaN(parts[1])) {
    return { lat: parts[0], lng: parts[1] };
  }
  return null;
}

function formatCoordinates(coords) {
  if (!coords) return "-";
  const latDir = coords.lat >= 0 ? "N" : "S";
  const lngDir = coords.lng >= 0 ? "E" : "W";
  return `${Math.abs(coords.lat).toFixed(7)}° ${latDir}, ${Math.abs(coords.lng).toFixed(7)}° ${lngDir}`;
}

// --- Main component ---

export default function DeviceDetail() {
  const { id } = useParams();
  const navigate = useNavigate();
  const { hasPermission } = useAuth();
  const canEdit = hasPermission("devices", "edit");

  const [device, setDevice] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [showDelete, setShowDelete] = useState(false);
  const [mqttStatus, setMqttStatus] = useState(null);
  const [locationName, setLocationName] = useState(null);
  const [deviceUsers, setDeviceUsers] = useState([]);
  const [usersLoading, setUsersLoading] = useState(false);

  useEffect(() => {
    loadData();
  }, [id]);

  const loadData = async () => {
    setLoading(true);
    try {
      const [d, mqttData] = await Promise.all([
        api.get(`/devices/${id}`),
        api.get("/mqtt/status").catch(() => null),
      ]);
      setDevice(d);

      // Match MQTT status by serial number
      if (mqttData?.devices && d.device_id) {
        const match = mqttData.devices.find((s) => s.device_serial === d.device_id);
        setMqttStatus(match || null);
      }

      // Load device users
      setUsersLoading(true);
      api.get(`/devices/${id}/users`).then((data) => {
        setDeviceUsers(data.users || []);
      }).catch(() => {
        setDeviceUsers([]);
      }).finally(() => setUsersLoading(false));

      // Reverse geocode
      const coords = parseCoordinates(d.device_location_coordinates);
      if (coords) {
        fetch(`https://nominatim.openstreetmap.org/reverse?lat=${coords.lat}&lon=${coords.lng}&format=json&zoom=10`)
          .then((r) => r.json())
          .then((data) => {
            const addr = data.address || {};
            const name = addr.city || addr.town || addr.village || addr.hamlet || addr.municipality || data.display_name?.split(",")[0] || "";
            const region = addr.state || addr.county || "";
            const country = addr.country || "";
            const parts = [name, region, country].filter(Boolean);
            setLocationName(parts.join(", "));
          })
          .catch(() => setLocationName(null));
      }
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  const handleDelete = async () => {
    try {
      await api.delete(`/devices/${id}`);
      navigate("/devices");
    } catch (err) {
      setError(err.message);
      setShowDelete(false);
    }
  };

  if (loading) return <div className="text-center py-8" style={{ color: "var(--text-muted)" }}>Loading...</div>;
  if (error) return (
    <div className="text-sm rounded-md p-3 border" style={{ backgroundColor: "var(--danger-bg)", borderColor: "var(--danger)", color: "var(--danger-text)" }}>
      {error}
    </div>
  );
  if (!device) return null;

  const attr = device.device_attributes || {};
  const clock = attr.clockSettings || {};
  const net = attr.networkSettings || {};
  const sub = device.device_subscription || {};
  const stats = device.device_stats || {};
  const coords = parseCoordinates(device.device_location_coordinates);
  const isOnline = mqttStatus ? mqttStatus.online : device.is_Online;

  // Subscription computed fields
  const subscrStart = parseFirestoreDate(sub.subscrStart);
  const subscrEnd = subscrStart && sub.subscrDuration ? addDays(subscrStart, sub.subscrDuration) : null;
  const subscrDaysLeft = subscrEnd ? daysUntil(subscrEnd) : null;

  // Warranty computed fields
  const warrantyStart = parseFirestoreDate(stats.warrantyStart);
  const warrantyEnd = warrantyStart && stats.warrantyPeriod ? addDays(warrantyStart, stats.warrantyPeriod) : null;
  const warrantyDaysLeft = warrantyEnd ? daysUntil(warrantyEnd) : null;

  // Maintenance computed fields
  const maintainedOn = parseFirestoreDate(stats.maintainedOn);
  const nextMaintenance = maintainedOn && stats.maintainancePeriod ? addDays(maintainedOn, stats.maintainancePeriod) : null;
  const maintenanceDaysLeft = nextMaintenance ? daysUntil(nextMaintenance) : null;

  return (
    <div>
      {/* Header */}
      <div className="flex items-center justify-between mb-6">
        <div>
          <button onClick={() => navigate("/devices")} className="text-sm hover:underline mb-2 inline-block" style={{ color: "var(--accent)" }}>
            &larr; Back to Devices
          </button>
          <div className="flex items-center gap-3">
            <h1 className="text-2xl font-bold" style={{ color: "var(--text-heading)" }}>
              {device.device_name || "Unnamed Device"}
            </h1>
            <span
              className={`inline-block w-3 h-3 rounded-full ${isOnline ? "bg-green-500" : ""}`}
              style={!isOnline ? { backgroundColor: "var(--border-primary)" } : undefined}
              title={isOnline ? "Online" : "Offline"}
            />
          </div>
        </div>
        {canEdit && (
          <div className="flex gap-2">
            <button onClick={() => navigate(`/devices/${id}/edit`)} className="px-4 py-2 text-sm rounded-md transition-colors" style={{ backgroundColor: "var(--text-link)", color: "var(--text-white)" }}>
              Edit
            </button>
            <button onClick={() => setShowDelete(true)} className="px-4 py-2 text-sm rounded-md transition-colors" style={{ backgroundColor: "var(--danger)", color: "var(--text-white)" }}>
              Delete
            </button>
          </div>
        )}
      </div>

      {/* Masonry layout for single-width sections */}
      <div className="device-sections">
        {/* Basic Information */}
        <SectionCard title="Basic Information">
          <div className="space-y-4">
            <dl>
              <Field label="Status">
                <BoolBadge value={isOnline} yesLabel="Online" noLabel="Offline" />
                {mqttStatus && (
                  <span className="ml-2 text-xs" style={{ color: "var(--text-muted)" }}>
                    (MQTT {mqttStatus.seconds_since_heartbeat}s ago)
                  </span>
                )}
              </Field>
            </dl>
            <dl className="grid gap-4" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))" }}>
              <Field label="Serial Number">
                <span className="font-mono">{device.device_id}</span>
              </Field>
              <Field label="Document ID">
                <span className="font-mono text-xs" style={{ color: "var(--text-muted)" }}>{device.id}</span>
              </Field>
            </dl>
          </div>
        </SectionCard>

        {/* Misc */}
        <SectionCard title="Misc">
          <dl className="grid gap-4" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))" }}>
            <Field label="Automated Events"><BoolBadge value={device.events_on} yesLabel="ON" noLabel="OFF" /></Field>
            <Field label="Device Locale"><span className="capitalize">{attr.deviceLocale || "-"}</span></Field>
            <Field label="WebSocket URL">{device.websocket_url}</Field>
            <Field label="Has Assistant"><BoolBadge value={attr.hasAssistant} /></Field>
            <div style={{ gridColumn: "1 / -1" }}>
              <Field label="Church Assistant URL">{device.churchAssistantURL}</Field>
            </div>
          </dl>
        </SectionCard>

        {/* Subscription */}
        <SectionCard title="Subscription">
          <dl className="grid gap-4" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))" }}>
            <Field label="Tier">
              <span className="px-2 py-0.5 text-xs rounded-full capitalize" style={{ backgroundColor: "var(--badge-blue-bg)", color: "var(--badge-blue-text)" }}>
                {sub.subscrTier}
              </span>
            </Field>
            <Field label="Start Date">{formatDate(sub.subscrStart)}</Field>
            <Field label="Duration">{sub.subscrDuration ? daysToDisplay(sub.subscrDuration) : "-"}</Field>
            <Field label="Expiration Date">{subscrEnd ? formatDateNice(subscrEnd) : "-"}</Field>
            <Field label="Time Left">
              {subscrDaysLeft === null ? "-" : subscrDaysLeft <= 0 ? (
                <span className="px-2 py-0.5 text-xs rounded-full" style={{ backgroundColor: "var(--danger-bg)", color: "var(--danger-text)" }}>
                  Subscription Expired
                </span>
              ) : (
                <span className="px-2 py-0.5 text-xs rounded-full" style={{ backgroundColor: "var(--success-bg)", color: "var(--success-text)" }}>
                  {subscrDaysLeft} days left
                </span>
              )}
            </Field>
            <Field label="Max Users">{sub.maxUsers}</Field>
            <Field label="Max Outputs">{sub.maxOutputs}</Field>
          </dl>
        </SectionCard>

        {/* Location */}
        <SectionCard title="Location">
          <div className={coords ? "grid grid-cols-1 md:grid-cols-2 gap-4" : ""}>
            <dl className="space-y-4">
              <Field label="Location">{device.device_location}</Field>
              <Field label="Coordinates">
                <div>
                  {coords ? formatCoordinates(coords) : device.device_location_coordinates || "-"}
                  {coords && (
                    <a
                      href={`https://www.google.com/maps?q=${coords.lat},${coords.lng}`}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="ml-2 px-2 py-0.5 text-xs rounded-md inline-block"
                      style={{ backgroundColor: "var(--badge-blue-bg)", color: "var(--badge-blue-text)" }}
                      onClick={(e) => e.stopPropagation()}
                    >
                      Open in Maps
                    </a>
                  )}
                </div>
              </Field>
              {locationName && (
                <Field label="Nearest Place">{locationName}</Field>
              )}
            </dl>
            {coords && (
              <div className="rounded-md overflow-hidden border" style={{ borderColor: "var(--border-primary)", minHeight: 300 }}>
                <MapContainer center={[coords.lat, coords.lng]} zoom={13} style={{ height: "100%", width: "100%", minHeight: 300 }} scrollWheelZoom={false}>
                  <TileLayer
                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                  />
                  <Marker position={[coords.lat, coords.lng]} />
                </MapContainer>
              </div>
            )}
          </div>
        </SectionCard>

        {/* Warranty, Maintenance & Statistics */}
        <SectionCard title="Warranty, Maintenance & Statistics">
          {/* Subsection 1: Warranty */}
          <Subsection title="Warranty Information" isFirst>
            <Field label="Warranty Status">
              {warrantyDaysLeft !== null ? (
                warrantyDaysLeft > 0 ? (
                  <span className="px-2 py-0.5 text-xs rounded-full" style={{ backgroundColor: "var(--success-bg)", color: "var(--success-text)" }}>Active</span>
                ) : (
                  <span className="px-2 py-0.5 text-xs rounded-full" style={{ backgroundColor: "var(--danger-bg)", color: "var(--danger-text)" }}>Expired</span>
                )
              ) : (
                <BoolBadge value={stats.warrantyActive} yesLabel="Active" noLabel="Expired" />
              )}
            </Field>
            <Field label="Start Date">{formatDate(stats.warrantyStart)}</Field>
            <Field label="Warranty Period">{stats.warrantyPeriod ? daysToDisplay(stats.warrantyPeriod) : "-"}</Field>
            <Field label="Expiration Date">{warrantyEnd ? formatDateNice(warrantyEnd) : "-"}</Field>
            <Field label="Remaining">
              {warrantyDaysLeft === null ? "-" : warrantyDaysLeft <= 0 ? (
                <span style={{ color: "var(--danger-text)" }}>Expired</span>
              ) : (
                `${warrantyDaysLeft} days`
              )}
            </Field>
          </Subsection>

          {/* Subsection 2: Maintenance */}
          <Subsection title="Maintenance">
            <Field label="Last Maintained On">{formatDate(stats.maintainedOn)}</Field>
            <Field label="Maintenance Period">{stats.maintainancePeriod ? daysToDisplay(stats.maintainancePeriod) : "-"}</Field>
            <Field label="Next Scheduled">
              {nextMaintenance ? (
                <span>
                  {formatDateNice(nextMaintenance)}
                  {maintenanceDaysLeft !== null && (
                    <span className="ml-1 text-xs" style={{ color: maintenanceDaysLeft <= 0 ? "var(--danger-text)" : "var(--text-muted)" }}>
                      ({maintenanceDaysLeft <= 0 ? "overdue" : formatRelativeTime(maintenanceDaysLeft)})
                    </span>
                  )}
                </span>
              ) : "-"}
            </Field>
          </Subsection>

          {/* Subsection 3: Statistics */}
          <Subsection title="Statistics">
            <Field label="Total Playbacks">{stats.totalPlaybacks}</Field>
            <Field label="Total Hammer Strikes">{stats.totalHammerStrikes}</Field>
            <Field label="Total Warnings Given">{stats.totalWarningsGiven}</Field>
            <Field label="Total Melodies">{device.device_melodies_all?.length ?? 0}</Field>
            <Field label="Favorite Melodies">{device.device_melodies_favorites?.length ?? 0}</Field>
            {stats.perBellStrikes?.length > 0 && (
              <div style={{ gridColumn: "1 / -1" }}>
                <Field label="Per Bell Strikes">
                  <div className="flex flex-wrap gap-2 mt-1">
                    {stats.perBellStrikes.slice(0, attr.totalBells || stats.perBellStrikes.length).map((count, i) => (
                      <span key={i} className="px-2 py-1 text-xs rounded-md border" style={{ borderColor: "var(--border-primary)", color: "var(--text-primary)" }}>
                        Bell {i + 1}: {count}
                      </span>
                    ))}
                  </div>
                </Field>
              </div>
            )}
          </Subsection>
        </SectionCard>

        {/* Users */}
        <SectionCard title={`App Users (${deviceUsers.length})`}>
          {usersLoading ? (
            <p className="text-sm" style={{ color: "var(--text-muted)" }}>Loading users...</p>
          ) : deviceUsers.length === 0 ? (
            <p className="text-sm" style={{ color: "var(--text-muted)" }}>No users assigned to this device.</p>
          ) : (
            <div className="space-y-2">
              {deviceUsers.map((user, i) => (
                <div
                  key={user.user_id || i}
                  className="p-3 rounded-md border cursor-pointer hover:opacity-90 transition-colors"
                  style={{ backgroundColor: "var(--bg-primary)", borderColor: "var(--border-primary)" }}
                  onClick={() => user.user_id && navigate(`/users/${user.user_id}`)}
                >
                  <div className="flex items-center justify-between">
                    <div className="min-w-0">
                      <p className="text-sm font-medium truncate" style={{ color: "var(--text-heading)" }}>
                        {user.display_name || user.email || "Unknown User"}
                      </p>
                      {user.email && user.display_name && (
                        <p className="text-xs truncate" style={{ color: "var(--text-muted)" }}>{user.email}</p>
                      )}
                      {user.user_id && (
                        <p className="text-xs font-mono" style={{ color: "var(--text-muted)" }}>{user.user_id}</p>
                      )}
                    </div>
                    {user.role && (
                      <span className="px-2 py-0.5 text-xs rounded-full capitalize shrink-0 ml-2" style={{ backgroundColor: "var(--badge-blue-bg)", color: "var(--badge-blue-text)" }}>
                        {user.role}
                      </span>
                    )}
                  </div>
                </div>
              ))}
            </div>
          )}
        </SectionCard>

        {/* Equipment Notes */}
        <NotesPanel deviceId={id} />
      </div>

      {/* Device Settings — full width, outside masonry flow */}
      <div className="mt-6">
        <SectionCard title="Device Settings">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {/* Left Column */}
            <div>
              {/* Basic Attributes */}
              <Subsection title="Basic Attributes" isFirst>
                <Field label="Bell Guard"><BoolBadge value={attr.bellGuardOn} /></Field>
                <Field label="Warnings On"><BoolBadge value={attr.warningsOn} /></Field>
                <Field label="Bell Guard Safety"><BoolBadge value={attr.bellGuardSafetyOn} /></Field>
              </Subsection>

              {/* Alert Settings */}
              <Subsection title="Alert Settings">
                <Field label="Alerts Status"><BoolBadge value={clock.ringAlertsMasterOn} yesLabel="ON" noLabel="OFF" /></Field>
                <Field label="Alerts Type"><span className="capitalize">{clock.ringAlerts || "-"}</span></Field>
                <Field label="Ring Intervals">{clock.ringIntervals}</Field>
                <Field label="Hour Bell">{clock.hourAlertsBell}</Field>
                <Field label="Half-Hour Bell">{clock.halfhourAlertsBell}</Field>
                <Field label="Quarter Bell">{clock.quarterAlertsBell}</Field>
                <Field label="Daytime Silence"><BoolBadge value={clock.isDaySilenceOn} yesLabel="ON" noLabel="OFF" /></Field>
                <Field label="Day-Time Period">
                  {formatTimestamp(clock.daySilenceFrom)} - {formatTimestamp(clock.daySilenceTo)}
                </Field>
                <Field label="Nighttime Silence"><BoolBadge value={clock.isNightSilenceOn} yesLabel="ON" noLabel="OFF" /></Field>
                <Field label="Nighttime Period">
                  {formatTimestamp(clock.nightSilenceFrom)} - {formatTimestamp(clock.nightSilenceTo)}
                </Field>
              </Subsection>

              {/* Backlight Settings */}
              <Subsection title="Backlight Settings">
                <Field label="Auto Backlight"><BoolBadge value={clock.isBacklightAutomationOn} yesLabel="ON" noLabel="OFF" /></Field>
                <Field label="Backlight Output">{clock.backlightOutput}</Field>
                <Field label="Period">
                  {formatTimestamp(clock.backlightTurnOnTime)} - {formatTimestamp(clock.backlightTurnOffTime)}
                </Field>
              </Subsection>

              {/* Logging */}
              <Subsection title="Logging">
                <Field label="Serial Log Level">{attr.serialLogLevel}</Field>
                <Field label="SD Log Level">{attr.sdLogLevel}</Field>
                <Field label="MQTT Log Level">{attr.mqttLogLevel ?? 0}</Field>
              </Subsection>
            </div>

            {/* Right Column */}
            <div>
              {/* Network */}
              <Subsection title="Network" isFirst>
                <Field label="Hostname">{net.hostname}</Field>
                <Field label="Has Static IP"><BoolBadge value={net.useStaticIP} /></Field>
              </Subsection>

              {/* Clock Settings */}
              <Subsection title="Clock Settings">
                <Field label="Has Clock"><BoolBadge value={attr.hasClock} /></Field>
                <Field label="Ring Intervals">{clock.ringIntervals}</Field>
                <Field label="Odd Output">{clock.clockOutputs?.[0] ?? "-"}</Field>
                <Field label="Even Output">{clock.clockOutputs?.[1] ?? "-"}</Field>
                <Field label="Run Pulse">{clock.clockTimings?.[0] != null ? msToSeconds(clock.clockTimings[0]) : "-"}</Field>
                <Field label="Pause Pulse">{clock.clockTimings?.[1] != null ? msToSeconds(clock.clockTimings[1]) : "-"}</Field>
              </Subsection>

              {/* Bell Settings */}
              <Subsection title="Bell Settings">
                <Field label="Bells Active"><BoolBadge value={attr.hasBells} /></Field>
                <Field label="Total">{attr.totalBells ?? "-"}</Field>
                {/* Bell Output-to-Timing mapping */}
                {attr.bellOutputs?.length > 0 && (
                  <div style={{ gridColumn: "1 / -1" }}>
                    <dt className="text-xs font-medium uppercase tracking-wide mb-2" style={{ color: "var(--text-muted)" }}>
                      Output &amp; Timing Map
                    </dt>
                    <div className="flex flex-wrap gap-2">
                      {attr.bellOutputs.map((output, i) => (
                        <div
                          key={i}
                          className="rounded-md border px-3 py-2 text-center"
                          style={{ borderColor: "var(--border-primary)", backgroundColor: "var(--bg-primary)", minWidth: 80 }}
                        >
                          <div className="text-xs font-medium mb-1" style={{ color: "var(--text-heading)" }}>
                            Bell {i + 1}
                          </div>
                          <div className="text-xs" style={{ color: "var(--text-muted)" }}>
                            Output <span style={{ color: "var(--text-primary)" }}>{output}</span>
                          </div>
                          <div className="text-xs" style={{ color: "var(--text-muted)" }}>
                            {attr.hammerTimings?.[i] != null ? (
                              <><span style={{ color: "var(--text-primary)" }}>{attr.hammerTimings[i]}</span> ms</>
                            ) : "-"}
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </Subsection>
            </div>
          </div>
        </SectionCard>
      </div>

      <ConfirmDialog
        open={showDelete}
        title="Delete Device"
        message={`Are you sure you want to delete "${device.device_name || "this device"}" (${device.device_id})? This action cannot be undone.`}
        onConfirm={handleDelete}
        onCancel={() => setShowDelete(false)}
      />
    </div>
  );
}