import { useState, useEffect } from "react";
import { useNavigate, useParams } from "react-router-dom";
import api from "../api/client";

const TIER_OPTIONS = ["basic", "small", "mini", "premium", "vip", "custom"];
const LOCALE_OPTIONS = ["orthodox", "catholic", "all"];
const RING_ALERT_OPTIONS = ["disabled", "single", "multi"];

const defaultAttributes = {
  hasAssistant: false,
  hasClock: false,
  hasBells: false,
  totalBells: 0,
  bellOutputs: [],
  hammerTimings: [],
  bellGuardOn: false,
  bellGuardSafetyOn: false,
  warningsOn: false,
  towerClockTime: "",
  clockSettings: {
    clockOutputs: [],
    clockTimings: [],
    ringAlertsMasterOn: false,
    ringAlerts: "disabled",
    ringIntervals: 0,
    hourAlertsBell: 0,
    halfhourAlertsBell: 0,
    quarterAlertsBell: 0,
    isDaySilenceOn: false,
    isNightSilenceOn: false,
    daySilenceFrom: "",
    daySilenceTo: "",
    nightSilenceFrom: "",
    nightSilenceTo: "",
    backlightTurnOnTime: "",
    backlightTurnOffTime: "",
    isBacklightAutomationOn: false,
    backlightOutput: 0,
  },
  deviceLocale: "all",
  networkSettings: {
    hostname: "",
    useStaticIP: false,
    ipAddress: [],
    gateway: [],
    subnet: [],
    dns1: [],
    dns2: [],
  },
  serialLogLevel: 0,
  sdLogLevel: 0,
};

const defaultSubscription = {
  subscrTier: "basic",
  subscrStart: "",
  subscrDuration: 0,
  maxUsers: 0,
  maxOutputs: 0,
};

const defaultStats = {
  totalPlaybacks: 0,
  totalHammerStrikes: 0,
  perBellStrikes: [],
  totalWarningsGiven: 0,
  warrantyActive: false,
  warrantyStart: "",
  warrantyPeriod: 0,
  maintainedOn: "",
  maintainancePeriod: 0,
};

const parseIntList = (str) => {
  if (!str.trim()) return [];
  return str
    .split(",")
    .map((s) => parseInt(s.trim(), 10))
    .filter((n) => !isNaN(n));
};

export default function DeviceForm() {
  const { id } = useParams();
  const isEdit = Boolean(id);
  const navigate = useNavigate();

  const [deviceName, setDeviceName] = useState("");
  const [devicePhoto, setDevicePhoto] = useState("");
  const [deviceLocation, setDeviceLocation] = useState("");
  const [isOnline, setIsOnline] = useState(false);
  const [eventsOn, setEventsOn] = useState(false);
  const [locationCoordinates, setLocationCoordinates] = useState("");
  const [websocketUrl, setWebsocketUrl] = useState("");
  const [churchAssistantURL, setChurchAssistantURL] = useState("");

  const [attributes, setAttributes] = useState({ ...defaultAttributes, clockSettings: { ...defaultAttributes.clockSettings }, networkSettings: { ...defaultAttributes.networkSettings } });
  const [subscription, setSubscription] = useState({ ...defaultSubscription });
  const [stats, setStats] = useState({ ...defaultStats });

  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState("");

  useEffect(() => {
    if (isEdit) loadDevice();
  }, [id]);

  const loadDevice = async () => {
    setLoading(true);
    try {
      const device = await api.get(`/devices/${id}`);
      setDeviceName(device.device_name || "");
      setDevicePhoto(device.device_photo || "");
      setDeviceLocation(device.device_location || "");
      setIsOnline(device.is_Online || false);
      setEventsOn(device.events_on || false);
      setLocationCoordinates(device.device_location_coordinates || "");
      setWebsocketUrl(device.websocket_url || "");
      setChurchAssistantURL(device.churchAssistantURL || "");

      setAttributes({
        ...defaultAttributes,
        ...device.device_attributes,
        clockSettings: {
          ...defaultAttributes.clockSettings,
          ...(device.device_attributes?.clockSettings || {}),
        },
        networkSettings: {
          ...defaultAttributes.networkSettings,
          ...(device.device_attributes?.networkSettings || {}),
        },
      });
      setSubscription({ ...defaultSubscription, ...(device.device_subscription || {}) });
      setStats({ ...defaultStats, ...(device.device_stats || {}) });
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  const updateAttr = (field, value) =>
    setAttributes((prev) => ({ ...prev, [field]: value }));

  const updateClock = (field, value) =>
    setAttributes((prev) => ({
      ...prev,
      clockSettings: { ...prev.clockSettings, [field]: value },
    }));

  const updateNetwork = (field, value) =>
    setAttributes((prev) => ({
      ...prev,
      networkSettings: { ...prev.networkSettings, [field]: value },
    }));

  const updateSub = (field, value) =>
    setSubscription((prev) => ({ ...prev, [field]: value }));

  const updateStats = (field, value) =>
    setStats((prev) => ({ ...prev, [field]: value }));

  const handleSubmit = async (e) => {
    e.preventDefault();
    setSaving(true);
    setError("");

    try {
      const body = {
        device_name: deviceName,
        device_photo: devicePhoto,
        device_location: deviceLocation,
        is_Online: isOnline,
        device_attributes: attributes,
        device_subscription: subscription,
        device_stats: stats,
        events_on: eventsOn,
        device_location_coordinates: locationCoordinates,
        device_melodies_all: [],
        device_melodies_favorites: [],
        user_list: [],
        websocket_url: websocketUrl,
        churchAssistantURL,
      };

      let deviceId = id;
      if (isEdit) {
        await api.put(`/devices/${id}`, body);
      } else {
        const created = await api.post("/devices", body);
        deviceId = created.id;
      }

      navigate(`/devices/${deviceId}`);
    } catch (err) {
      setError(err.message);
    } finally {
      setSaving(false);
    }
  };

  if (loading) {
    return <div className="text-center py-8" style={{ color: "var(--text-muted)" }}>Loading...</div>;
  }

  const inputClass = "w-full px-3 py-2 rounded-md text-sm border";

  return (
    <div>
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-2xl font-bold" style={{ color: "var(--text-heading)" }}>
          {isEdit ? "Edit Device" : "Add Device"}
        </h1>
        <div className="flex gap-3">
          <button
            type="button"
            onClick={() => navigate(isEdit ? `/devices/${id}` : "/devices")}
            className="px-4 py-2 text-sm rounded-md hover:opacity-80 transition-colors"
            style={{ backgroundColor: "var(--bg-card-hover)", color: "var(--text-primary)" }}
          >
            Cancel
          </button>
          <button
            type="submit"
            form="device-form"
            disabled={saving}
            className="px-4 py-2 text-sm rounded-md hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
            style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
          >
            {saving ? "Saving..." : isEdit ? "Update Device" : "Create Device"}
          </button>
        </div>
      </div>

      {error && (
        <div
          className="text-sm rounded-md p-3 mb-4 border"
          style={{ backgroundColor: "var(--danger-bg)", borderColor: "var(--danger)", color: "var(--danger-text)" }}
        >
          {error}
        </div>
      )}

      <form id="device-form" onSubmit={handleSubmit}>
        <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
          {/* ===== Left Column ===== */}
          <div className="space-y-6">
            {/* --- Basic Info --- */}
            <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)" }}>
                Basic Information
              </h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="md:col-span-2">
                  <label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
                    Device Name *
                  </label>
                  <input
                    type="text"
                    required
                    value={deviceName}
                    onChange={(e) => setDeviceName(e.target.value)}
                    className={inputClass}
                  />
                </div>
                <div className="md:col-span-2">
                  <label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
                    Location
                  </label>
                  <input
                    type="text"
                    value={deviceLocation}
                    onChange={(e) => setDeviceLocation(e.target.value)}
                    placeholder="e.g. St. Mary's Church, Vienna"
                    className={inputClass}
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
                    Location Coordinates
                  </label>
                  <input
                    type="text"
                    value={locationCoordinates}
                    onChange={(e) => setLocationCoordinates(e.target.value)}
                    placeholder="e.g. 48.2082,16.3738"
                    className={inputClass}
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
                    Device Photo URL
                  </label>
                  <input
                    type="text"
                    value={devicePhoto}
                    onChange={(e) => setDevicePhoto(e.target.value)}
                    className={inputClass}
                  />
                </div>
                <div className="flex items-center gap-4 pt-2">
                  <label className="flex items-center gap-2">
                    <input
                      type="checkbox"
                      checked={eventsOn}
                      onChange={(e) => setEventsOn(e.target.checked)}
                      className="h-4 w-4 text-blue-600 rounded border-gray-300"
                    />
                    <span className="text-sm font-medium" style={{ color: "var(--text-primary)" }}>Events On</span>
                  </label>
                </div>
              </div>
            </section>

            {/* --- Device Attributes --- */}
            <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)" }}>
                Device Attributes
              </h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="flex flex-wrap gap-4 md:col-span-2">
                  <label className="flex items-center gap-2">
                    <input
                      type="checkbox"
                      checked={attributes.hasAssistant}
                      onChange={(e) => updateAttr("hasAssistant", e.target.checked)}
                      className="h-4 w-4 text-blue-600 rounded border-gray-300"
                    />
                    <span className="text-sm" style={{ color: "var(--text-primary)" }}>Has Assistant</span>
                  </label>
                  <label className="flex items-center gap-2">
                    <input
                      type="checkbox"
                      checked={attributes.hasClock}
                      onChange={(e) => updateAttr("hasClock", e.target.checked)}
                      className="h-4 w-4 text-blue-600 rounded border-gray-300"
                    />
                    <span className="text-sm" style={{ color: "var(--text-primary)" }}>Has Clock</span>
                  </label>
                  <label className="flex items-center gap-2">
                    <input
                      type="checkbox"
                      checked={attributes.hasBells}
                      onChange={(e) => updateAttr("hasBells", e.target.checked)}
                      className="h-4 w-4 text-blue-600 rounded border-gray-300"
                    />
                    <span className="text-sm" style={{ color: "var(--text-primary)" }}>Has Bells</span>
                  </label>
                  <label className="flex items-center gap-2">
                    <input
                      type="checkbox"
                      checked={attributes.bellGuardOn}
                      onChange={(e) => updateAttr("bellGuardOn", e.target.checked)}
                      className="h-4 w-4 text-blue-600 rounded border-gray-300"
                    />
                    <span className="text-sm" style={{ color: "var(--text-primary)" }}>Bell Guard</span>
                  </label>
                  <label className="flex items-center gap-2">
                    <input
                      type="checkbox"
                      checked={attributes.bellGuardSafetyOn}
                      onChange={(e) => updateAttr("bellGuardSafetyOn", e.target.checked)}
                      className="h-4 w-4 text-blue-600 rounded border-gray-300"
                    />
                    <span className="text-sm" style={{ color: "var(--text-primary)" }}>Bell Guard Safety</span>
                  </label>
                  <label className="flex items-center gap-2">
                    <input
                      type="checkbox"
                      checked={attributes.warningsOn}
                      onChange={(e) => updateAttr("warningsOn", e.target.checked)}
                      className="h-4 w-4 text-blue-600 rounded border-gray-300"
                    />
                    <span className="text-sm" style={{ color: "var(--text-primary)" }}>Warnings On</span>
                  </label>
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
                    Total Bells
                  </label>
                  <input
                    type="number"
                    min="0"
                    value={attributes.totalBells}
                    onChange={(e) => updateAttr("totalBells", parseInt(e.target.value, 10) || 0)}
                    className={inputClass}
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
                    Device Locale
                  </label>
                  <select
                    value={attributes.deviceLocale}
                    onChange={(e) => updateAttr("deviceLocale", e.target.value)}
                    className={inputClass}
                  >
                    {LOCALE_OPTIONS.map((o) => (
                      <option key={o} value={o}>
                        {o.charAt(0).toUpperCase() + o.slice(1)}
                      </option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
                    Bell Outputs (comma-separated)
                  </label>
                  <input
                    type="text"
                    value={attributes.bellOutputs.join(", ")}
                    onChange={(e) => updateAttr("bellOutputs", parseIntList(e.target.value))}
                    placeholder="e.g. 1, 2, 3"
                    className={inputClass}
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
                    Hammer Timings (comma-separated)
                  </label>
                  <input
                    type="text"
                    value={attributes.hammerTimings.join(", ")}
                    onChange={(e) => updateAttr("hammerTimings", parseIntList(e.target.value))}
                    placeholder="e.g. 100, 150, 200"
                    className={inputClass}
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
                    Serial Log Level
                  </label>
                  <input
                    type="number"
                    min="0"
                    value={attributes.serialLogLevel}
                    onChange={(e) => updateAttr("serialLogLevel", parseInt(e.target.value, 10) || 0)}
                    className={inputClass}
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
                    SD Log Level
                  </label>
                  <input
                    type="number"
                    min="0"
                    value={attributes.sdLogLevel}
                    onChange={(e) => updateAttr("sdLogLevel", parseInt(e.target.value, 10) || 0)}
                    className={inputClass}
                  />
                </div>
              </div>
            </section>

            {/* --- Network Settings --- */}
            <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)" }}>
                Network Settings
              </h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
                    Hostname
                  </label>
                  <input
                    type="text"
                    value={attributes.networkSettings.hostname}
                    onChange={(e) => updateNetwork("hostname", e.target.value)}
                    className={inputClass}
                  />
                </div>
                <div className="flex items-center gap-2 pt-6">
                  <input
                    type="checkbox"
                    id="useStaticIP"
                    checked={attributes.networkSettings.useStaticIP}
                    onChange={(e) => updateNetwork("useStaticIP", e.target.checked)}
                    className="h-4 w-4 text-blue-600 rounded border-gray-300"
                  />
                  <label htmlFor="useStaticIP" className="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
                    Use Static IP
                  </label>
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
                    WebSocket URL
                  </label>
                  <input
                    type="text"
                    value={websocketUrl}
                    onChange={(e) => setWebsocketUrl(e.target.value)}
                    className={inputClass}
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
                    Church Assistant URL
                  </label>
                  <input
                    type="text"
                    value={churchAssistantURL}
                    onChange={(e) => setChurchAssistantURL(e.target.value)}
                    className={inputClass}
                  />
                </div>
              </div>
            </section>
          </div>

          {/* ===== Right Column ===== */}
          <div className="space-y-6">
            {/* --- Subscription --- */}
            <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)" }}>
                Subscription
              </h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
                    Tier
                  </label>
                  <select
                    value={subscription.subscrTier}
                    onChange={(e) => updateSub("subscrTier", e.target.value)}
                    className={inputClass}
                  >
                    {TIER_OPTIONS.map((t) => (
                      <option key={t} value={t}>
                        {t.charAt(0).toUpperCase() + t.slice(1)}
                      </option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
                    Start Date
                  </label>
                  <input
                    type="date"
                    value={subscription.subscrStart}
                    onChange={(e) => updateSub("subscrStart", e.target.value)}
                    className={inputClass}
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
                    Duration (months)
                  </label>
                  <input
                    type="number"
                    min="0"
                    value={subscription.subscrDuration}
                    onChange={(e) => updateSub("subscrDuration", parseInt(e.target.value, 10) || 0)}
                    className={inputClass}
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
                    Max Users
                  </label>
                  <input
                    type="number"
                    min="0"
                    value={subscription.maxUsers}
                    onChange={(e) => updateSub("maxUsers", parseInt(e.target.value, 10) || 0)}
                    className={inputClass}
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
                    Max Outputs
                  </label>
                  <input
                    type="number"
                    min="0"
                    value={subscription.maxOutputs}
                    onChange={(e) => updateSub("maxOutputs", parseInt(e.target.value, 10) || 0)}
                    className={inputClass}
                  />
                </div>
              </div>
            </section>

            {/* --- Clock Settings --- */}
            <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)" }}>
                Clock Settings
              </h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
                    Ring Alerts
                  </label>
                  <select
                    value={attributes.clockSettings.ringAlerts}
                    onChange={(e) => updateClock("ringAlerts", e.target.value)}
                    className={inputClass}
                  >
                    {RING_ALERT_OPTIONS.map((o) => (
                      <option key={o} value={o}>
                        {o.charAt(0).toUpperCase() + o.slice(1)}
                      </option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
                    Ring Intervals
                  </label>
                  <input
                    type="number"
                    min="0"
                    value={attributes.clockSettings.ringIntervals}
                    onChange={(e) => updateClock("ringIntervals", parseInt(e.target.value, 10) || 0)}
                    className={inputClass}
                  />
                </div>
                <div className="flex items-center gap-2 pt-2">
                  <input
                    type="checkbox"
                    checked={attributes.clockSettings.ringAlertsMasterOn}
                    onChange={(e) => updateClock("ringAlertsMasterOn", e.target.checked)}
                    className="h-4 w-4 text-blue-600 rounded border-gray-300"
                  />
                  <span className="text-sm" style={{ color: "var(--text-primary)" }}>Ring Alerts Master On</span>
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
                    Clock Outputs (comma-separated)
                  </label>
                  <input
                    type="text"
                    value={attributes.clockSettings.clockOutputs.join(", ")}
                    onChange={(e) => updateClock("clockOutputs", parseIntList(e.target.value))}
                    className={inputClass}
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
                    Clock Timings (comma-separated)
                  </label>
                  <input
                    type="text"
                    value={attributes.clockSettings.clockTimings.join(", ")}
                    onChange={(e) => updateClock("clockTimings", parseIntList(e.target.value))}
                    className={inputClass}
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
                    Hour Alerts Bell
                  </label>
                  <input
                    type="number"
                    min="0"
                    value={attributes.clockSettings.hourAlertsBell}
                    onChange={(e) => updateClock("hourAlertsBell", parseInt(e.target.value, 10) || 0)}
                    className={inputClass}
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
                    Half-hour Alerts Bell
                  </label>
                  <input
                    type="number"
                    min="0"
                    value={attributes.clockSettings.halfhourAlertsBell}
                    onChange={(e) => updateClock("halfhourAlertsBell", parseInt(e.target.value, 10) || 0)}
                    className={inputClass}
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
                    Quarter Alerts Bell
                  </label>
                  <input
                    type="number"
                    min="0"
                    value={attributes.clockSettings.quarterAlertsBell}
                    onChange={(e) => updateClock("quarterAlertsBell", parseInt(e.target.value, 10) || 0)}
                    className={inputClass}
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
                    Backlight Output
                  </label>
                  <input
                    type="number"
                    min="0"
                    value={attributes.clockSettings.backlightOutput}
                    onChange={(e) => updateClock("backlightOutput", parseInt(e.target.value, 10) || 0)}
                    className={inputClass}
                  />
                </div>
                <div className="flex items-center gap-2 pt-2">
                  <input
                    type="checkbox"
                    checked={attributes.clockSettings.isBacklightAutomationOn}
                    onChange={(e) => updateClock("isBacklightAutomationOn", e.target.checked)}
                    className="h-4 w-4 text-blue-600 rounded border-gray-300"
                  />
                  <span className="text-sm" style={{ color: "var(--text-primary)" }}>Backlight Automation</span>
                </div>

                {/* Silence settings */}
                <div className="md:col-span-2 border-t pt-4 mt-2" style={{ borderColor: "var(--border-secondary)" }}>
                  <h3 className="text-sm font-semibold mb-3" style={{ color: "var(--text-secondary)" }}>Silence Periods</h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="flex items-center gap-2">
                      <input
                        type="checkbox"
                        checked={attributes.clockSettings.isDaySilenceOn}
                        onChange={(e) => updateClock("isDaySilenceOn", e.target.checked)}
                        className="h-4 w-4 text-blue-600 rounded border-gray-300"
                      />
                      <span className="text-sm" style={{ color: "var(--text-primary)" }}>Day Silence</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <input
                        type="checkbox"
                        checked={attributes.clockSettings.isNightSilenceOn}
                        onChange={(e) => updateClock("isNightSilenceOn", e.target.checked)}
                        className="h-4 w-4 text-blue-600 rounded border-gray-300"
                      />
                      <span className="text-sm" style={{ color: "var(--text-primary)" }}>Night Silence</span>
                    </div>
                    <div>
                      <label className="block text-xs mb-1" style={{ color: "var(--text-muted)" }}>Day Silence From</label>
                      <input
                        type="time"
                        value={attributes.clockSettings.daySilenceFrom}
                        onChange={(e) => updateClock("daySilenceFrom", e.target.value)}
                        className={inputClass}
                      />
                    </div>
                    <div>
                      <label className="block text-xs mb-1" style={{ color: "var(--text-muted)" }}>Day Silence To</label>
                      <input
                        type="time"
                        value={attributes.clockSettings.daySilenceTo}
                        onChange={(e) => updateClock("daySilenceTo", e.target.value)}
                        className={inputClass}
                      />
                    </div>
                    <div>
                      <label className="block text-xs mb-1" style={{ color: "var(--text-muted)" }}>Night Silence From</label>
                      <input
                        type="time"
                        value={attributes.clockSettings.nightSilenceFrom}
                        onChange={(e) => updateClock("nightSilenceFrom", e.target.value)}
                        className={inputClass}
                      />
                    </div>
                    <div>
                      <label className="block text-xs mb-1" style={{ color: "var(--text-muted)" }}>Night Silence To</label>
                      <input
                        type="time"
                        value={attributes.clockSettings.nightSilenceTo}
                        onChange={(e) => updateClock("nightSilenceTo", e.target.value)}
                        className={inputClass}
                      />
                    </div>
                  </div>
                </div>
              </div>
            </section>

            {/* --- Statistics --- */}
            <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)" }}>
                Statistics & Warranty
              </h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
                    Total Playbacks
                  </label>
                  <input
                    type="number"
                    min="0"
                    value={stats.totalPlaybacks}
                    onChange={(e) => updateStats("totalPlaybacks", parseInt(e.target.value, 10) || 0)}
                    className={inputClass}
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
                    Total Hammer Strikes
                  </label>
                  <input
                    type="number"
                    min="0"
                    value={stats.totalHammerStrikes}
                    onChange={(e) => updateStats("totalHammerStrikes", parseInt(e.target.value, 10) || 0)}
                    className={inputClass}
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
                    Total Warnings Given
                  </label>
                  <input
                    type="number"
                    min="0"
                    value={stats.totalWarningsGiven}
                    onChange={(e) => updateStats("totalWarningsGiven", parseInt(e.target.value, 10) || 0)}
                    className={inputClass}
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
                    Per-Bell Strikes (comma-separated)
                  </label>
                  <input
                    type="text"
                    value={stats.perBellStrikes.join(", ")}
                    onChange={(e) => updateStats("perBellStrikes", parseIntList(e.target.value))}
                    className={inputClass}
                  />
                </div>
                <div className="flex items-center gap-2 pt-2">
                  <input
                    type="checkbox"
                    checked={stats.warrantyActive}
                    onChange={(e) => updateStats("warrantyActive", e.target.checked)}
                    className="h-4 w-4 text-blue-600 rounded border-gray-300"
                  />
                  <span className="text-sm font-medium" style={{ color: "var(--text-primary)" }}>Warranty Active</span>
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
                    Warranty Start
                  </label>
                  <input
                    type="date"
                    value={stats.warrantyStart}
                    onChange={(e) => updateStats("warrantyStart", e.target.value)}
                    className={inputClass}
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
                    Warranty Period (months)
                  </label>
                  <input
                    type="number"
                    min="0"
                    value={stats.warrantyPeriod}
                    onChange={(e) => updateStats("warrantyPeriod", parseInt(e.target.value, 10) || 0)}
                    className={inputClass}
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
                    Last Maintained On
                  </label>
                  <input
                    type="date"
                    value={stats.maintainedOn}
                    onChange={(e) => updateStats("maintainedOn", e.target.value)}
                    className={inputClass}
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
                    Maintenance Period (months)
                  </label>
                  <input
                    type="number"
                    min="0"
                    value={stats.maintainancePeriod}
                    onChange={(e) => updateStats("maintainancePeriod", parseInt(e.target.value, 10) || 0)}
                    className={inputClass}
                  />
                </div>
              </div>
            </section>
          </div>
        </div>

      </form>
    </div>
  );
}