"use client";

import { useDashboard } from "@/providers/DashboardDataProvider";
import { useAuth } from "@/providers/AuthProvider";
import { Monitor, Shield, AlertCircle } from "lucide-react";

/**
 * Component that displays device status summary.
 * Can be used on any page since DashboardDataProvider is now global.
 */
export default function DeviceStatusSummary() {
  const { isAuthenticated } = useAuth();
  const { devices, hasInitialized } = useDashboard();

  // Don't render anything if user is not authenticated
  if (!isAuthenticated) {
    return null;
  }

  // Show loading state
  if (!hasInitialized) {
    return (
      <div className="bg-card/50 backdrop-blur-sm border rounded-lg p-4 max-w-md mx-auto">
        <div className="flex items-center gap-3">
          <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-purple-500"></div>
          <span className="text-sm text-muted-foreground">
            Loading devices...
          </span>
        </div>
      </div>
    );
  }

  const activeDevices = devices.filter((device) => device.syncStatus);
  const inactiveDevices = devices.filter((device) => !device.syncStatus);

  return (
    <div className="bg-card/50 backdrop-blur-sm border rounded-lg p-6 max-w-md mx-auto">
      <div className="flex items-center gap-3 mb-4">
        <div className="h-8 w-8 rounded-lg bg-purple-gradient flex items-center justify-center">
          <Monitor className="h-4 w-4 text-white" />
        </div>
        <h3 className="text-lg font-semibold">Your Devices</h3>
      </div>

      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Shield className="h-4 w-4 text-green-500" />
            <span className="text-sm">Active Protection</span>
          </div>
          <span className="text-sm font-medium">{activeDevices.length}</span>
        </div>

        {inactiveDevices.length > 0 && (
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <AlertCircle className="h-4 w-4 text-orange-500" />
              <span className="text-sm">Needs Attention</span>
            </div>
            <span className="text-sm font-medium">
              {inactiveDevices.length}
            </span>
          </div>
        )}

        <div className="pt-2 border-t">
          <p className="text-xs text-muted-foreground">
            Total devices: {devices.length}
          </p>
        </div>
      </div>
    </div>
  );
}