daily-briefing/web/src/components/MqttCard.tsx

import { useState, useMemo } from "react";
import { Radio, ChevronDown, ChevronUp, Zap, ZapOff } from "lucide-react";
import type { MqttData, MqttEntity } from "../api";

interface Props {
  data: MqttData;
}

export default function MqttCard({ data }: Props) {
  const [expanded, setExpanded] = useState(false);
  const [filter, setFilter] = useState<string | null>(null);

  // Group entities by category
  const grouped = useMemo(() => {
    const map: Record<string, MqttEntity[]> = {};
    for (const e of data.entities) {
      const cat = e.category || "other";
      if (!map[cat]) map[cat] = [];
      map[cat].push(e);
    }
    return map;
  }, [data.entities]);

  const categories = Object.keys(grouped).sort();
  const filtered = filter ? grouped[filter] || [] : data.entities;
  const shown = expanded ? filtered : filtered.slice(0, 8);

  return (
    <div className="glass-card p-5">
      {/* Header */}
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-2">
          <Radio className="w-4 h-4 text-violet-400" />
          <h3 className="text-sm font-semibold text-white">MQTT</h3>
          <span className="text-[10px] text-slate-500 font-mono">
            {data.entities.length} Entit{data.entities.length === 1 ? "ät" : "äten"}
          </span>
        </div>
        <div className="flex items-center gap-1.5">
          {data.connected ? (
            <Zap className="w-3.5 h-3.5 text-violet-400" />
          ) : (
            <ZapOff className="w-3.5 h-3.5 text-slate-600" />
          )}
          <span
            className={`text-[10px] font-medium ${
              data.connected ? "text-violet-400" : "text-slate-600"
            }`}
          >
            {data.connected ? "Verbunden" : "Getrennt"}
          </span>
        </div>
      </div>

      {/* Category filter tabs */}
      {categories.length > 1 && (
        <div className="flex gap-1.5 mb-3 flex-wrap">
          <button
            onClick={() => setFilter(null)}
            className={`text-[10px] px-2 py-0.5 rounded-full border transition-colors ${
              filter === null
                ? "bg-violet-500/20 border-violet-500/30 text-violet-300"
                : "bg-white/5 border-white/[0.06] text-slate-500 hover:text-slate-300"
            }`}
          >
            Alle
          </button>
          {categories.map((cat) => (
            <button
              key={cat}
              onClick={() => setFilter(filter === cat ? null : cat)}
              className={`text-[10px] px-2 py-0.5 rounded-full border transition-colors ${
                filter === cat
                  ? "bg-violet-500/20 border-violet-500/30 text-violet-300"
                  : "bg-white/5 border-white/[0.06] text-slate-500 hover:text-slate-300"
              }`}
            >
              {cat}
              <span className="ml-1 opacity-50">{grouped[cat].length}</span>
            </button>
          ))}
        </div>
      )}

      {/* Entity list */}
      {data.entities.length === 0 ? (
        <div className="text-center py-6">
          <Radio className="w-8 h-8 text-slate-700 mx-auto mb-2" />
          <p className="text-xs text-slate-600">
            {data.connected
              ? "Warte auf MQTT-Nachrichten..."
              : "MQTT nicht konfiguriert"}
          </p>
        </div>
      ) : (
        <div className="space-y-1.5">
          {shown.map((entity) => (
            <EntityRow key={entity.topic} entity={entity} />
          ))}
        </div>
      )}

      {/* Expand/collapse */}
      {filtered.length > 8 && (
        <button
          onClick={() => setExpanded(!expanded)}
          className="mt-3 w-full flex items-center justify-center gap-1 text-[10px] text-slate-500 hover:text-slate-300 transition-colors"
        >
          {expanded ? (
            <>
              <ChevronUp className="w-3 h-3" />
              Weniger anzeigen
            </>
          ) : (
            <>
              <ChevronDown className="w-3 h-3" />
              Alle {filtered.length} anzeigen
            </>
          )}
        </button>
      )}
    </div>
  );
}

function EntityRow({ entity }: { entity: MqttEntity }) {
  const age = Math.round((Date.now() / 1000 - entity.timestamp));
  const ageStr =
    age < 60
      ? `${age}s`
      : age < 3600
        ? `${Math.floor(age / 60)}m`
        : `${Math.floor(age / 3600)}h`;

  // Format value for display
  const displayValue = formatValue(entity.value);
  const isNumeric = typeof entity.value === "number";

  return (
    <div className="flex items-center justify-between gap-3 px-2.5 py-1.5 rounded-lg bg-white/[0.02] hover:bg-white/[0.04] transition-colors group">
      <div className="flex-1 min-w-0">
        <p className="text-[11px] text-slate-300 truncate">{entity.name}</p>
        <p className="text-[9px] text-slate-600 truncate font-mono">{entity.topic}</p>
      </div>
      <div className="flex items-center gap-2 shrink-0">
        <span
          className={`text-xs font-mono font-medium ${
            isNumeric ? "text-violet-300" : "text-slate-300"
          }`}
        >
          {displayValue}
        </span>
        <span className="text-[9px] text-slate-700 w-6 text-right">{ageStr}</span>
      </div>
    </div>
  );
}

function formatValue(value: any): string {
  if (value === null || value === undefined) return "—";
  if (typeof value === "boolean") return value ? "ON" : "OFF";
  if (typeof value === "number") {
    return Number.isInteger(value) ? value.toString() : value.toFixed(1);
  }
  if (typeof value === "object") {
    return JSON.stringify(value).slice(0, 40);
  }
  const str = String(value);
  // Common HA/MQTT states → nicer display
  if (str === "on" || str === "ON") return "ON";
  if (str === "off" || str === "OFF") return "OFF";
  if (str === "online") return "Online";
  if (str === "offline") return "Offline";
  return str.length > 30 ? str.slice(0, 30) + "…" : str;
}