"use client";

import { useEffect, useState, useCallback } from "react";
import { Plus, Pencil, Trash2, Search, Eye, ToggleLeft, ToggleRight, RefreshCw } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { fetchSensors, updateSensor, deleteSensor, type SensorDevice, type DeviceType, type Protocol } from "@/lib/api";

const SITE_ID = "sg-01";

export const DEVICE_TYPE_LABELS: Record<string, string> = {
  ups:            "UPS",
  generator:      "Generator",
  crac:           "CRAC Unit",
  chiller:        "Chiller",
  ats:            "Transfer Switch",
  rack:           "Rack PDU",
  network_switch: "Network Switch",
  leak:           "Leak Sensor",
  fire_zone:      "Fire / VESDA",
  custom:         "Custom",
};

export const PROTOCOL_LABELS: Record<string, string> = {
  mqtt:       "MQTT",
  modbus_tcp: "Modbus TCP",
  modbus_rtu: "Modbus RTU",
  snmp:       "SNMP",
  bacnet:     "BACnet",
  http:       "HTTP Poll",
};

const TYPE_COLORS: Record<string, string> = {
  ups:            "bg-blue-500/10 text-blue-400",
  generator:      "bg-amber-500/10 text-amber-400",
  crac:           "bg-cyan-500/10 text-cyan-400",
  chiller:        "bg-sky-500/10 text-sky-400",
  ats:            "bg-purple-500/10 text-purple-400",
  rack:           "bg-green-500/10 text-green-400",
  network_switch: "bg-indigo-500/10 text-indigo-400",
  leak:           "bg-teal-500/10 text-teal-400",
  fire_zone:      "bg-red-500/10 text-red-400",
  custom:         "bg-muted text-muted-foreground",
};

const PROTOCOL_COLORS: Record<string, string> = {
  mqtt:       "bg-green-500/10 text-green-400",
  modbus_tcp: "bg-orange-500/10 text-orange-400",
  modbus_rtu: "bg-orange-500/10 text-orange-400",
  snmp:       "bg-violet-500/10 text-violet-400",
  bacnet:     "bg-pink-500/10 text-pink-400",
  http:       "bg-yellow-500/10 text-yellow-400",
};

interface Props {
  onAdd:    () => void;
  onEdit:   (s: SensorDevice) => void;
  onDetail: (id: number) => void;
}

export function SensorTable({ onAdd, onEdit, onDetail }: Props) {
  const [sensors,    setSensors]    = useState<SensorDevice[]>([]);
  const [loading,    setLoading]    = useState(true);
  const [search,     setSearch]     = useState("");
  const [typeFilter, setTypeFilter] = useState<string>("all");
  const [confirmDel, setConfirmDel] = useState<number | null>(null);
  const [toggling,   setToggling]   = useState<number | null>(null);

  const load = useCallback(async () => {
    try {
      const data = await fetchSensors(SITE_ID);
      setSensors(data);
    } catch { /* keep stale */ }
    finally { setLoading(false); }
  }, []);

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

  const handleToggle = async (s: SensorDevice) => {
    setToggling(s.id);
    try {
      const updated = await updateSensor(s.id, { enabled: !s.enabled });
      setSensors(prev => prev.map(x => x.id === s.id ? updated : x));
    } catch { /* ignore */ }
    finally { setToggling(null); }
  };

  const handleDelete = async (id: number) => {
    try {
      await deleteSensor(id);
      setSensors(prev => prev.filter(x => x.id !== id));
    } catch { /* ignore */ }
    finally { setConfirmDel(null); }
  };

  const filtered = sensors.filter(s => {
    const matchType = typeFilter === "all" || s.device_type === typeFilter;
    const q = search.toLowerCase();
    const matchSearch = !q || s.device_id.toLowerCase().includes(q) || s.name.toLowerCase().includes(q) || (s.room_id ?? "").toLowerCase().includes(q);
    return matchType && matchSearch;
  });

  const typeOptions = [...new Set(sensors.map(s => s.device_type))].sort();

  return (
    <div className="space-y-4">
      {/* Toolbar */}
      <div className="flex items-center gap-3 flex-wrap">
        <div className="relative flex-1 min-w-48">
          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
          <input
            value={search}
            onChange={e => setSearch(e.target.value)}
            placeholder="Search by name or ID..."
            className="w-full pl-8 pr-3 py-1.5 text-sm bg-muted/30 border border-border rounded-md focus:outline-none focus:ring-1 focus:ring-primary"
          />
        </div>
        <select
          value={typeFilter}
          onChange={e => setTypeFilter(e.target.value)}
          className="text-sm bg-muted/30 border border-border rounded-md px-2 py-1.5 text-foreground focus:outline-none"
        >
          <option value="all">All types</option>
          {typeOptions.map(t => (
            <option key={t} value={t}>{DEVICE_TYPE_LABELS[t] ?? t}</option>
          ))}
        </select>
        <Button size="sm" variant="ghost" onClick={load} className="gap-1.5">
          <RefreshCw className="w-3.5 h-3.5" /> Refresh
        </Button>
        <Button size="sm" onClick={onAdd} className="gap-1.5">
          <Plus className="w-3.5 h-3.5" /> Add Sensor
        </Button>
      </div>

      <div className="text-xs text-muted-foreground">
        {filtered.length} of {sensors.length} devices
      </div>

      {/* Table */}
      {loading ? (
        <div className="space-y-2">
          {Array.from({ length: 6 }).map((_, i) => (
            <div key={i} className="h-10 rounded bg-muted/30 animate-pulse" />
          ))}
        </div>
      ) : filtered.length === 0 ? (
        <div className="text-center py-12 text-sm text-muted-foreground">
          No sensors found{search ? ` matching "${search}"` : ""}
        </div>
      ) : (
        <div className="overflow-x-auto rounded-lg border border-border/40">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-border/30 bg-muted/10">
                <th className="text-left px-3 py-2 text-xs font-medium text-muted-foreground">Device ID</th>
                <th className="text-left px-3 py-2 text-xs font-medium text-muted-foreground">Name</th>
                <th className="text-left px-3 py-2 text-xs font-medium text-muted-foreground">Type</th>
                <th className="text-left px-3 py-2 text-xs font-medium text-muted-foreground">Room</th>
                <th className="text-left px-3 py-2 text-xs font-medium text-muted-foreground">Protocol</th>
                <th className="text-center px-3 py-2 text-xs font-medium text-muted-foreground">Enabled</th>
                <th className="text-right px-3 py-2 text-xs font-medium text-muted-foreground">Actions</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(s => (
                <tr key={s.id} className="border-b border-border/10 hover:bg-muted/10 transition-colors">
                  <td className="px-3 py-2 font-mono text-xs text-muted-foreground">{s.device_id}</td>
                  <td className="px-3 py-2 font-medium">{s.name}</td>
                  <td className="px-3 py-2">
                    <span className={cn("text-[10px] font-semibold px-2 py-0.5 rounded-full", TYPE_COLORS[s.device_type] ?? "bg-muted text-muted-foreground")}>
                      {DEVICE_TYPE_LABELS[s.device_type] ?? s.device_type}
                    </span>
                  </td>
                  <td className="px-3 py-2 text-xs text-muted-foreground">{s.room_id ?? "—"}</td>
                  <td className="px-3 py-2">
                    <span className={cn("text-[10px] font-semibold px-2 py-0.5 rounded-full", PROTOCOL_COLORS[s.protocol] ?? "bg-muted text-muted-foreground")}>
                      {PROTOCOL_LABELS[s.protocol] ?? s.protocol}
                    </span>
                  </td>
                  <td className="px-3 py-2 text-center">
                    <button
                      onClick={() => handleToggle(s)}
                      disabled={toggling === s.id}
                      className={cn("transition-opacity", toggling === s.id && "opacity-50")}
                    >
                      {s.enabled
                        ? <ToggleRight className="w-5 h-5 text-green-400" />
                        : <ToggleLeft  className="w-5 h-5 text-muted-foreground" />
                      }
                    </button>
                  </td>
                  <td className="px-3 py-2">
                    <div className="flex items-center justify-end gap-1">
                      <button
                        onClick={() => onDetail(s.id)}
                        className="p-1 rounded hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
                        title="View details"
                      >
                        <Eye className="w-3.5 h-3.5" />
                      </button>
                      <button
                        onClick={() => onEdit(s)}
                        className="p-1 rounded hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
                        title="Edit"
                      >
                        <Pencil className="w-3.5 h-3.5" />
                      </button>
                      {confirmDel === s.id ? (
                        <div className="flex items-center gap-1 ml-1">
                          <button
                            onClick={() => handleDelete(s.id)}
                            className="text-[10px] px-1.5 py-0.5 rounded bg-destructive/10 text-destructive hover:bg-destructive/20 font-medium"
                          >
                            Confirm
                          </button>
                          <button
                            onClick={() => setConfirmDel(null)}
                            className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground hover:bg-muted/80"
                          >
                            Cancel
                          </button>
                        </div>
                      ) : (
                        <button
                          onClick={() => setConfirmDel(s.id)}
                          className="p-1 rounded hover:bg-muted transition-colors text-muted-foreground hover:text-destructive"
                          title="Delete"
                        >
                          <Trash2 className="w-3.5 h-3.5" />
                        </button>
                      )}
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}