import { useState, useEffect, useRef } from "react";
import { useNavigate } from "react-router-dom";
import api from "../api/client";
import { useAuth } from "../auth/AuthContext";
import SearchBar from "../components/SearchBar";
import ConfirmDialog from "../components/ConfirmDialog";

const TIER_OPTIONS = ["", "basic", "small", "mini", "premium", "vip", "custom"];

// All available columns with their defaults
const ALL_COLUMNS = [
  { key: "status", label: "Status", defaultOn: true },
  { key: "name", label: "Name", defaultOn: true, alwaysOn: true },
  { key: "serialNumber", label: "Serial Number", defaultOn: true },
  { key: "location", label: "Location", defaultOn: true },
  { key: "subscrTier", label: "Subscr Tier", defaultOn: true },
  { key: "maxOutputs", label: "Max Outputs", defaultOn: false },
  { key: "hasClock", label: "Has Clock", defaultOn: false },
  { key: "hasBells", label: "Has Bells", defaultOn: false },
  { key: "totalBells", label: "Total Bells", defaultOn: true },
  { key: "bellGuard", label: "Bell Guard", defaultOn: false },
  { key: "warningsOn", label: "Warnings On", defaultOn: false },
  { key: "serialLogLevel", label: "Serial Log Level", defaultOn: false },
  { key: "sdLogLevel", label: "SD Log Level", defaultOn: false },
  { key: "bellOutputs", label: "Bell Outputs", defaultOn: false },
  { key: "hammerTimings", label: "Hammer Timings", defaultOn: false },
  { key: "ringAlertsMaster", label: "Ring Alerts Master", defaultOn: false },
  { key: "totalPlaybacks", label: "Total Playbacks", defaultOn: false },
  { key: "totalHammerStrikes", label: "Total Hammer Strikes", defaultOn: false },
  { key: "totalWarnings", label: "Total Warnings", defaultOn: false },
  { key: "warrantyActive", label: "Warranty Active", defaultOn: false },
  { key: "totalMelodies", label: "Total Melodies", defaultOn: false },
  { key: "assignedUsers", label: "Assigned Users", defaultOn: true },
];

function getDefaultVisibleColumns() {
  const saved = localStorage.getItem("deviceListColumns");
  if (saved) {
    try {
      return JSON.parse(saved);
    } catch {
      // ignore
    }
  }
  return ALL_COLUMNS.filter((c) => c.defaultOn).map((c) => c.key);
}

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 isSubscriptionActive(device) {
  const sub = device.device_subscription;
  if (!sub?.subscrStart || !sub?.subscrDuration) return false;
  try {
    const start = parseFirestoreDate(sub.subscrStart);
    if (!start) return false;
    const end = new Date(start.getTime() + sub.subscrDuration * 86400000);
    return end > new Date();
  } catch {
    return false;
  }
}

function isWarrantyActive(device) {
  const stats = device.device_stats;
  if (!stats?.warrantyStart || !stats?.warrantyPeriod) return !!stats?.warrantyActive;
  try {
    const start = parseFirestoreDate(stats.warrantyStart);
    if (!start) return !!stats?.warrantyActive;
    const end = new Date(start.getTime() + stats.warrantyPeriod * 86400000);
    return end > new Date();
  } catch {
    return !!stats?.warrantyActive;
  }
}

function parseFirestoreDate(str) {
  if (!str) return null;
  // Handle format like "22 December 2025 at 16:35:56 UTC+0000"
  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;
}

export default function DeviceList() {
  const [devices, setDevices] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [search, setSearch] = useState("");
  const [onlineFilter, setOnlineFilter] = useState("");
  const [tierFilter, setTierFilter] = useState("");
  const [subscrStatusFilter, setSubscrStatusFilter] = useState("");
  const [warrantyStatusFilter, setWarrantyStatusFilter] = useState("");
  const [hasClockFilter, setHasClockFilter] = useState("");
  const [hasBellsFilter, setHasBellsFilter] = useState("");
  const [deleteTarget, setDeleteTarget] = useState(null);
  const [visibleColumns, setVisibleColumns] = useState(getDefaultVisibleColumns);
  const [showColumnPicker, setShowColumnPicker] = useState(false);
  const [mqttStatusMap, setMqttStatusMap] = useState({});
  const columnPickerRef = useRef(null);
  const navigate = useNavigate();
  const { hasPermission } = useAuth();
  const canEdit = hasPermission("devices", "edit");

  // Close column picker on outside click
  useEffect(() => {
    const handleClick = (e) => {
      if (columnPickerRef.current && !columnPickerRef.current.contains(e.target)) {
        setShowColumnPicker(false);
      }
    };
    if (showColumnPicker) {
      document.addEventListener("mousedown", handleClick);
      return () => document.removeEventListener("mousedown", handleClick);
    }
  }, [showColumnPicker]);

  const fetchDevices = async () => {
    setLoading(true);
    setError("");
    try {
      const params = new URLSearchParams();
      if (search) params.set("search", search);
      if (onlineFilter === "true") params.set("online", "true");
      if (onlineFilter === "false") params.set("online", "false");
      if (tierFilter) params.set("tier", tierFilter);
      const qs = params.toString();
      // Phase 1: load devices from DB immediately
      const data = await api.get(`/devices${qs ? `?${qs}` : ""}`);
      setDevices(data.devices);
      setLoading(false);

      // Phase 2: fetch MQTT status in background and update online indicators
      api.get("/mqtt/status").then((mqttData) => {
        if (mqttData?.devices) {
          const map = {};
          for (const s of mqttData.devices) {
            map[s.device_serial] = s;
          }
          setMqttStatusMap(map);
        }
      }).catch(() => {});
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchDevices();
  }, [search, onlineFilter, tierFilter]);

  const handleDelete = async () => {
    if (!deleteTarget) return;
    try {
      await api.delete(`/devices/${deleteTarget.id}`);
      setDeleteTarget(null);
      fetchDevices();
    } catch (err) {
      setError(err.message);
      setDeleteTarget(null);
    }
  };

  const toggleColumn = (key) => {
    const col = ALL_COLUMNS.find((c) => c.key === key);
    if (col?.alwaysOn) return;
    setVisibleColumns((prev) => {
      const next = prev.includes(key)
        ? prev.filter((k) => k !== key)
        : [...prev, key];
      localStorage.setItem("deviceListColumns", JSON.stringify(next));
      return next;
    });
  };

  const isVisible = (key) => visibleColumns.includes(key);

  const renderCellValue = (key, device) => {
    const attr = device.device_attributes || {};
    const clock = attr.clockSettings || {};
    const sub = device.device_subscription || {};
    const stats = device.device_stats || {};

    switch (key) {
      case "status": {
        const mqtt = mqttStatusMap[device.device_id];
        const isOnline = mqtt ? mqtt.online : device.is_Online;
        return (
          <span
            className={`inline-block w-2.5 h-2.5 rounded-full ${isOnline ? "bg-green-500" : ""}`}
            style={!isOnline ? { backgroundColor: "var(--border-primary)" } : undefined}
            title={isOnline ? "Online" : "Offline"}
          />
        );
      }
      case "name":
        return (
          <span className="font-medium" style={{ color: "var(--text-heading)" }}>
            {device.device_name || "Unnamed Device"}
          </span>
        );
      case "serialNumber":
        return <span className="font-mono text-xs" style={{ color: "var(--text-muted)" }}>{device.device_id || "-"}</span>;
      case "location":
        return device.device_location || "-";
      case "subscrTier":
        return (
          <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 || "basic"}
          </span>
        );
      case "maxOutputs":
        return sub.maxOutputs ?? "-";
      case "hasClock":
        return <BoolBadge value={attr.hasClock} />;
      case "hasBells":
        return <BoolBadge value={attr.hasBells} />;
      case "totalBells":
        return attr.totalBells ?? 0;
      case "bellGuard":
        return <BoolBadge value={attr.bellGuardOn} />;
      case "warningsOn":
        return <BoolBadge value={attr.warningsOn} />;
      case "serialLogLevel":
        return attr.serialLogLevel ?? 0;
      case "sdLogLevel":
        return attr.sdLogLevel ?? 0;
      case "bellOutputs":
        return attr.bellOutputs?.length > 0 ? attr.bellOutputs.join(", ") : "-";
      case "hammerTimings":
        return attr.hammerTimings?.length > 0 ? attr.hammerTimings.join(", ") : "-";
      case "ringAlertsMaster":
        return <BoolBadge value={clock.ringAlertsMasterOn} yesLabel="ON" noLabel="OFF" />;
      case "totalPlaybacks":
        return stats.totalPlaybacks ?? 0;
      case "totalHammerStrikes":
        return stats.totalHammerStrikes ?? 0;
      case "totalWarnings":
        return stats.totalWarningsGiven ?? 0;
      case "warrantyActive":
        return <BoolBadge value={stats.warrantyActive} yesLabel="Active" noLabel="Expired" />;
      case "totalMelodies":
        return device.device_melodies_all?.length ?? 0;
      case "assignedUsers":
        return device.user_list?.length ?? 0;
      default:
        return "-";
    }
  };

  // Apply client-side filters
  const filteredDevices = devices.filter((device) => {
    if (subscrStatusFilter === "active" && !isSubscriptionActive(device)) return false;
    if (subscrStatusFilter === "expired" && isSubscriptionActive(device)) return false;
    if (warrantyStatusFilter === "active" && !isWarrantyActive(device)) return false;
    if (warrantyStatusFilter === "expired" && isWarrantyActive(device)) return false;
    if (hasClockFilter === "yes" && !device.device_attributes?.hasClock) return false;
    if (hasClockFilter === "no" && device.device_attributes?.hasClock) return false;
    if (hasBellsFilter === "yes" && !device.device_attributes?.hasBells) return false;
    if (hasBellsFilter === "no" && device.device_attributes?.hasBells) return false;
    return true;
  });

  const activeColumns = ALL_COLUMNS.filter((c) => isVisible(c.key));

  const selectClass = "px-3 py-2 rounded-md text-sm cursor-pointer border";
  const selectStyle = {
    backgroundColor: "var(--bg-card)",
    color: "var(--text-primary)",
    borderColor: "var(--border-primary)",
  };

  return (
    <div>
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-2xl font-bold" style={{ color: "var(--text-heading)" }}>Device Fleet</h1>
        {canEdit && (
          <button
            onClick={() => navigate("/devices/new")}
            className="px-4 py-2 text-sm rounded-md hover:opacity-90 transition-colors cursor-pointer"
            style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
          >
            Add Device
          </button>
        )}
      </div>

      <div className="mb-4 space-y-3">
        <SearchBar
          onSearch={setSearch}
          placeholder="Search by name, location, or serial number..."
        />
        <div className="flex flex-wrap gap-3 items-center">
          <select value={onlineFilter} onChange={(e) => setOnlineFilter(e.target.value)} className={selectClass} style={selectStyle}>
            <option value="">All Status</option>
            <option value="true">Online</option>
            <option value="false">Offline</option>
          </select>
          <select value={tierFilter} onChange={(e) => setTierFilter(e.target.value)} className={selectClass} style={selectStyle}>
            <option value="">All Tiers</option>
            {TIER_OPTIONS.filter(Boolean).map((t) => (
              <option key={t} value={t}>{t.charAt(0).toUpperCase() + t.slice(1)}</option>
            ))}
          </select>
          <select value={subscrStatusFilter} onChange={(e) => setSubscrStatusFilter(e.target.value)} className={selectClass} style={selectStyle}>
            <option value="">Subscr Status</option>
            <option value="active">Active</option>
            <option value="expired">Expired</option>
          </select>
          <select value={warrantyStatusFilter} onChange={(e) => setWarrantyStatusFilter(e.target.value)} className={selectClass} style={selectStyle}>
            <option value="">Warranty Status</option>
            <option value="active">Active</option>
            <option value="expired">Expired</option>
          </select>
          <select value={hasClockFilter} onChange={(e) => setHasClockFilter(e.target.value)} className={selectClass} style={selectStyle}>
            <option value="">Has Clock</option>
            <option value="yes">Yes</option>
            <option value="no">No</option>
          </select>
          <select value={hasBellsFilter} onChange={(e) => setHasBellsFilter(e.target.value)} className={selectClass} style={selectStyle}>
            <option value="">Has Bells</option>
            <option value="yes">Yes</option>
            <option value="no">No</option>
          </select>

          {/* Column visibility dropdown */}
          <div className="relative" ref={columnPickerRef}>
            <button
              type="button"
              onClick={() => setShowColumnPicker((prev) => !prev)}
              className="px-3 py-2 rounded-md text-sm transition-colors cursor-pointer flex items-center gap-1.5 border"
              style={{
                borderColor: "var(--border-primary)",
                color: "var(--text-secondary)",
              }}
            >
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
              </svg>
              Columns
            </button>
            {showColumnPicker && (
              <div
                className="absolute right-0 top-full mt-1 z-20 rounded-lg shadow-lg py-2 w-52 border max-h-80 overflow-y-auto"
                style={{
                  backgroundColor: "var(--bg-card)",
                  borderColor: "var(--border-primary)",
                }}
              >
                {ALL_COLUMNS.map((col) => (
                  <label
                    key={col.key}
                    className="flex items-center gap-2 px-3 py-1.5 text-sm cursor-pointer"
                    style={{
                      color: col.alwaysOn ? "var(--text-muted)" : "var(--text-primary)",
                    }}
                  >
                    <input
                      type="checkbox"
                      checked={isVisible(col.key)}
                      onChange={() => toggleColumn(col.key)}
                      disabled={col.alwaysOn}
                      className="h-3.5 w-3.5 rounded cursor-pointer"
                    />
                    {col.label}
                  </label>
                ))}
              </div>
            )}
          </div>

          <span className="flex items-center text-sm" style={{ color: "var(--text-muted)" }}>
            {filteredDevices.length} {filteredDevices.length === 1 ? "device" : "devices"}
          </span>
        </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>
      )}

      {loading ? (
        <div className="text-center py-8" style={{ color: "var(--text-muted)" }}>Loading...</div>
      ) : filteredDevices.length === 0 ? (
        <div
          className="rounded-lg p-8 text-center text-sm border"
          style={{
            backgroundColor: "var(--bg-card)",
            borderColor: "var(--border-primary)",
            color: "var(--text-muted)",
          }}
        >
          No devices found.
        </div>
      ) : (
        <div
          className="rounded-lg overflow-hidden border"
          style={{
            backgroundColor: "var(--bg-card)",
            borderColor: "var(--border-primary)",
          }}
        >
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr style={{ backgroundColor: "var(--bg-primary)", borderBottom: "1px solid var(--border-primary)" }}>
                  {activeColumns.map((col) => (
                    <th
                      key={col.key}
                      className={`px-4 py-3 text-left font-medium ${col.key === "status" ? "w-10" : ""}`}
                      style={{ color: "var(--text-secondary)" }}
                    >
                      {col.key === "status" ? "" : col.label}
                    </th>
                  ))}
                  {canEdit && (
                    <th className="px-4 py-3 text-left font-medium w-24" style={{ color: "var(--text-secondary)" }} />
                  )}
                </tr>
              </thead>
              <tbody>
                {filteredDevices.map((device) => (
                  <tr
                    key={device.id}
                    onClick={() => navigate(`/devices/${device.id}`)}
                    className="cursor-pointer transition-colors"
                    style={{ borderBottom: "1px solid var(--border-secondary)" }}
                    onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = "var(--bg-card-hover)")}
                    onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = "transparent")}
                  >
                    {activeColumns.map((col) => (
                      <td
                        key={col.key}
                        className={`px-4 py-3 ${col.key === "status" ? "w-10" : ""}`}
                        style={{ color: "var(--text-primary)" }}
                      >
                        {renderCellValue(col.key, device)}
                      </td>
                    ))}
                    {canEdit && (
                      <td className="px-4 py-3">
                        <div
                          className="flex gap-2"
                          onClick={(e) => e.stopPropagation()}
                        >
                          <button
                            onClick={() => setDeleteTarget(device)}
                            className="hover:opacity-80 text-xs cursor-pointer"
                            style={{ color: "var(--danger)" }}
                          >
                            Delete
                          </button>
                        </div>
                      </td>
                    )}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

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