UserDashboard/components/dashboards/SiteStatus.tsx

'use client';

import axios from "axios";
import React, { useState, useEffect, useMemo } from "react";

export type SiteName = string;

interface SiteStatusProps {
  selectedSite: string;   // display label (e.g., CRM project_name)
  siteId: string;         // canonical id (e.g., CRM Project.name like PROJ-0008)
  status?: string;        // CRM status (Open/Completed/On Hold/…)
  location: string;
  inverterProvider: string;
  emergencyContact: string;
  lastSyncTimestamp: string;
}

const API_URL = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:8000";
const WS_URL  = process.env.NEXT_PUBLIC_WS_URL  ?? "ws://localhost:8000/ws";

const SiteStatus = ({
  selectedSite,
  siteId,
  status,
  location,
  inverterProvider,
  emergencyContact,
  lastSyncTimestamp,
}: SiteStatusProps) => {

  // --- WebSocket to receive MQTT-forwarded messages ---
  useEffect(() => {
    const ws = new WebSocket(WS_URL);

    ws.onopen = () => console.log("WebSocket connected");
    ws.onclose = () => console.log("WebSocket disconnected");
    ws.onerror = (e) => console.error("WebSocket error:", e);

    ws.onmessage = (event) => {
      // Tip: avoid alert storms; log or toast instead
      try {
        const data = JSON.parse(event.data);
        console.log("WS:", data);
      } catch {
        console.log("WS raw:", event.data);
      }
    };

    return () => ws.close();
  }, []);

  const [showModal, setShowModal] = useState(false);
  const [deviceId, setDeviceId] = useState("");
  const [functionType, setFunctionType] = useState<"Grid" | "Solar">("Grid");

  // Track devices connected per siteId (dynamic)
  const [loggedDevices, setLoggedDevices] = useState<Record<string, string[]>>({});
  const devicesAtSite = loggedDevices[siteId] ?? [];

  const handleStartLogging = () => setShowModal(true);

  const handleConfirm = async () => {
    const id = deviceId.trim();
    if (!id) return;

    const topic = `ADW300/${siteId}/${id}/${functionType.toLowerCase()}`;

    try {
      const response = await axios.post(`${API_URL}/start-logging`, { topics: [topic] });
      console.log("Started logging:", response.data);

      setLoggedDevices(prev => ({
        ...prev,
        [siteId]: [...(prev[siteId] ?? []), id],
      }));
      setShowModal(false);
      setDeviceId("");
    } catch (error) {
      console.error("Failed to start logging:", error);
    }
  };

  const handleStopLogging = async () => {
    try {
      // Stop only this site's topics (both function types for each device)
      const topics = (loggedDevices[siteId] ?? []).flatMap(did => [
        `ADW300/${siteId}/${did}/grid`,
        `ADW300/${siteId}/${did}/solar`,
      ]);
      await axios.post(`${API_URL}/stop-logging`, topics.length ? { topics } : {});

      setLoggedDevices(prev => ({ ...prev, [siteId]: [] }));
      console.log("Stopped logging for", siteId);
    } catch (error) {
      console.error("Failed to stop logging:", error);
    }
  };

  const statusClass = useMemo(() => {
    const s = (status ?? "").toLowerCase();
    if (s === "open" || s === "active") return "text-green-500";
    if (s === "completed" || s === "closed") return "text-blue-500";
    if (s === "inactive" || s === "on hold") return "text-orange-500";
    if (s === "faulty" || s === "cancelled") return "text-red-500";
    return "text-gray-500";
  }, [status]);

  return (
    <div className="bg-white p-4 rounded-lg shadow-md space-y-2 dark:bg-rtgray-800 dark:text-white-light">
      <h2 className="text-xl font-semibold mb-3">Site Details</h2>

      {/* Status (from CRM) */}
      <div className="flex justify-between items-center text-base">
        <p className="text-gray-600 dark:text-white/85 font-medium">Status:</p>
        <p className={`font-semibold ${statusClass}`}>{status ?? "—"}</p>
      </div>

      {/* Site ID */}
      <div className="flex justify-between items-center text-base">
        <p className="text-gray-600 dark:text-white/85 font-medium">Site ID:</p>
        <p className="font-medium">{siteId}</p>
      </div>

      {/* Location */}
      <div className="flex justify-between items-center text-base">
        <p className="text-gray-600 dark:text-white/85 font-medium">Location:</p>
        <p className="font-medium">{location}</p>
      </div>

      {/* Inverter Provider */}
      <div className="flex justify-between items-center text-base">
        <p className="text-gray-600 dark:text-white/85 font-medium">Inverter Provider:</p>
        <p className="font-medium">{inverterProvider}</p>
      </div>

      {/* Emergency Contact */}
      <div className="flex justify-between items-center text-base">
        <p className="text-gray-600 dark:text-white/85 font-medium">Emergency Contact:</p>
        <p className="font-medium">{emergencyContact}</p>
      </div>

      {/* Last Sync */}
      <div className="flex justify-between items-center text-base">
        <p className="text-gray-600 dark:text-white/85 font-medium">Last Sync:</p>
        <p className="font-medium">{lastSyncTimestamp}</p>
      </div>

      {/* Start/Stop */}
      <div className="flex justify-between items-center text-base space-x-2">
        {devicesAtSite.length > 0 ? (
          <button
            onClick={handleStopLogging}
            className="text-sm lg:text-md bg-red-500 hover:bg-red-600 text-white font-medium px-3 py-2 rounded"
          >
            Stop Logging
          </button>
        ) : (
          <button
            onClick={handleStartLogging}
            className="text-sm lg:text-md btn-primary px-3 py-2"
          >
            Start Logging
          </button>
        )}
      </div>

      {/* Modal */}
      {showModal && (
        <div className="fixed inset-0 z-50 bg-black bg-opacity-50 flex items-center justify-center">
          <div className="bg-white dark:bg-rtgray-800 rounded-lg p-6 w-[90%] max-w-md shadow-lg">
            <h2 className="text-lg font-semibold mb-4">Enter Device Info</h2>

            <input
              type="text"
              placeholder="Device ID (e.g. device_01)"
              className="w-full p-2 mb-4 border rounded dark:border-rtgray-800 dark:bg-rtgray-700 dark:text-white"
              value={deviceId}
              onChange={(e) => setDeviceId(e.target.value)}
            />

            <select
              className="w-full p-2 mb-4 border rounded dark:border-rtgray-800 dark:bg-rtgray-700 dark:text-white"
              value={functionType}
              onChange={(e) => setFunctionType(e.target.value as "Grid" | "Solar")}
            >
              <option value="Grid">Grid</option>
              <option value="Solar">Solar</option>
            </select>

            <div className="flex justify-end space-x-2">
              <button
                onClick={() => setShowModal(false)}
                className="btn-primary bg-white border-2 border-black hover:bg-rtgray-200 px-4 py-2"
              >
                Cancel
              </button>
              <button
                onClick={handleConfirm}
                className="btn-primary px-4 py-2"
                disabled={!deviceId.trim()}
              >
                Confirm
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default SiteStatus;