"use client";

import { useEffect, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import { api } from "@/lib/api";
import { 
  ArrowLeft, Power, Thermometer, Droplets, Sun, 
  Activity, Lock, Unlock, Blinds, Lightbulb, 
  Plug, RefreshCw, Settings, AlertTriangle
} from "lucide-react";

interface DeviceControl {
  idx: string;
  type: string;
  name: string;
  values: any;
}

interface Device {
  id: string;
  name: string;
  name_ar?: string;
  device_type: string;
  lifesmart_device_id: string;
  is_online: boolean;
  device_metadata?: {
    hub_id?: string;
    model?: string;
    data?: Record<string, any>;
    controls?: DeviceControl[];
    last_sync?: string;
  };
}

interface Reading {
  type: string;
  value: number;
  unit: string;
}

export default function DeviceDetailPage() {
  const params = useParams();
  const router = useRouter();
  const t = useTranslations("devices");
  const [device, setDevice] = useState<Device | null>(null);
  const [loading, setLoading] = useState(true);
  const [controlling, setControlling] = useState<string | null>(null);
  const [readings, setReadings] = useState<Reading[]>([]);

  useEffect(() => {
    fetchDevice();
  }, [params.id]);

  const fetchDevice = async () => {
    try {
      const data = await api.getDevice(params.id as string);
      setDevice(data);
      
      // Parse readings from device data
      if (data.device_metadata?.data) {
        const parsedReadings: Reading[] = [];
        const rawData = data.device_metadata.data;
        
        if (rawData.T !== undefined) {
          parsedReadings.push({ type: "temperature", value: rawData.T / 10, unit: "°C" });
        }
        if (rawData.H !== undefined) {
          parsedReadings.push({ type: "humidity", value: rawData.H / 10, unit: "%" });
        }
        if (rawData.L !== undefined) {
          parsedReadings.push({ type: "light", value: rawData.L, unit: "lux" });
        }
        if (rawData.P !== undefined) {
          parsedReadings.push({ type: "power", value: rawData.P, unit: "W" });
        }
        if (rawData.V !== undefined) {
          parsedReadings.push({ type: "voltage", value: rawData.V / 10, unit: "V" });
        }
        
        setReadings(parsedReadings);
      }
    } catch (error) {
      console.error("Failed to fetch device:", error);
    } finally {
      setLoading(false);
    }
  };

  const handleControl = async (idx: string, value: number, controlType: string = "0x81") => {
    if (!device?.device_metadata?.hub_id || !device?.lifesmart_device_id) {
      alert("معلومات الجهاز غير مكتملة");
      return;
    }

    setControlling(idx);
    try {
      await api.controlLifeSmartDevice({
        hub_id: device.device_metadata.hub_id,
        device_id: device.lifesmart_device_id,
        idx,
        value,
        control_type: controlType,
      });
      
      // Refresh device data
      await fetchDevice();
    } catch (error: any) {
      console.error("Control failed:", error);
      alert("فشل التحكم: " + (error.response?.data?.detail || error.message));
    } finally {
      setControlling(null);
    }
  };

  const getReadingIcon = (type: string) => {
    switch (type) {
      case "temperature": return <Thermometer className="w-6 h-6" />;
      case "humidity": return <Droplets className="w-6 h-6" />;
      case "light": return <Sun className="w-6 h-6" />;
      case "power": return <Plug className="w-6 h-6" />;
      case "voltage": return <Activity className="w-6 h-6" />;
      default: return <Activity className="w-6 h-6" />;
    }
  };

  const getReadingLabel = (type: string) => {
    switch (type) {
      case "temperature": return "درجة الحرارة";
      case "humidity": return "الرطوبة";
      case "light": return "الإضاءة";
      case "power": return "الطاقة";
      case "voltage": return "الجهد";
      default: return type;
    }
  };

  const renderControls = () => {
    if (!device?.device_metadata?.controls || device.device_metadata.controls.length === 0) {
      return null;
    }

    const controls = device.device_metadata.controls;
    const deviceData = device.device_metadata.data || {};

    return (
      <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
        <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
          <Settings className="w-5 h-5" />
          عناصر التحكم
        </h3>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {controls.map((control) => {
            const currentValue = deviceData[control.idx];
            const isOn = currentValue === 1 || currentValue === "1" || currentValue === true;
            
            // Switch/Toggle control
            if (control.values && Array.isArray(control.values) && control.values.includes(0) && control.values.includes(1)) {
              return (
                <div key={control.idx} className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="font-medium">{control.name}</p>
                      <p className="text-sm text-gray-500">{control.idx}</p>
                    </div>
                    <button
                      onClick={() => handleControl(control.idx, isOn ? 0 : 1, control.type)}
                      disabled={controlling === control.idx || !device.is_online}
                      className={`p-3 rounded-full transition-colors ${
                        isOn 
                          ? 'bg-green-500 text-white hover:bg-green-600' 
                          : 'bg-gray-200 dark:bg-gray-600 hover:bg-gray-300 dark:hover:bg-gray-500'
                      } disabled:opacity-50`}
                    >
                      {controlling === control.idx ? (
                        <RefreshCw className="w-6 h-6 animate-spin" />
                      ) : (
                        <Power className="w-6 h-6" />
                      )}
                    </button>
                  </div>
                </div>
              );
            }

            // Brightness slider
            if (control.values === "0-100") {
              const brightness = parseInt(currentValue) || 0;
              return (
                <div key={control.idx} className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg col-span-full md:col-span-2">
                  <div className="flex items-center justify-between mb-2">
                    <p className="font-medium">{control.name}</p>
                    <span className="text-sm text-gray-500">{brightness}%</span>
                  </div>
                  <input
                    type="range"
                    min="0"
                    max="100"
                    value={brightness}
                    onChange={(e) => handleControl(control.idx, parseInt(e.target.value), control.type)}
                    disabled={!device.is_online}
                    className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
                  />
                </div>
              );
            }

            // Lock/Unlock buttons
            if (control.idx === "LK" || control.idx === "UL") {
              return (
                <div key={control.idx} className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                  <button
                    onClick={() => handleControl(control.idx, 1, control.type)}
                    disabled={controlling === control.idx || !device.is_online}
                    className={`w-full flex items-center justify-center gap-2 px-4 py-3 rounded-lg ${
                      control.idx === "LK"
                        ? 'bg-red-100 text-red-700 hover:bg-red-200 dark:bg-red-900/30 dark:text-red-400'
                        : 'bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900/30 dark:text-green-400'
                    } disabled:opacity-50`}
                  >
                    {controlling === control.idx ? (
                      <RefreshCw className="w-5 h-5 animate-spin" />
                    ) : control.idx === "LK" ? (
                      <Lock className="w-5 h-5" />
                    ) : (
                      <Unlock className="w-5 h-5" />
                    )}
                    {control.name}
                  </button>
                </div>
              );
            }

            // Curtain controls (Open/Close/Stop)
            if (["OP", "CL", "ST"].includes(control.idx)) {
              const icons: Record<string, any> = {
                OP: <Blinds className="w-5 h-5" />,
                CL: <Blinds className="w-5 h-5 rotate-180" />,
                ST: <AlertTriangle className="w-5 h-5" />,
              };
              const colors: Record<string, string> = {
                OP: "bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900/30 dark:text-green-400",
                CL: "bg-blue-100 text-blue-700 hover:bg-blue-200 dark:bg-blue-900/30 dark:text-blue-400",
                ST: "bg-yellow-100 text-yellow-700 hover:bg-yellow-200 dark:bg-yellow-900/30 dark:text-yellow-400",
              };
              
              return (
                <div key={control.idx} className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                  <button
                    onClick={() => handleControl(control.idx, 1, control.type)}
                    disabled={controlling === control.idx || !device.is_online}
                    className={`w-full flex items-center justify-center gap-2 px-4 py-3 rounded-lg ${colors[control.idx]} disabled:opacity-50`}
                  >
                    {controlling === control.idx ? (
                      <RefreshCw className="w-5 h-5 animate-spin" />
                    ) : (
                      icons[control.idx]
                    )}
                    {control.name}
                  </button>
                </div>
              );
            }

            // Default control display
            return (
              <div key={control.idx} className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                <p className="font-medium">{control.name}</p>
                <p className="text-sm text-gray-500">{control.idx}: {JSON.stringify(currentValue)}</p>
              </div>
            );
          })}
        </div>
      </div>
    );
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
      </div>
    );
  }

  if (!device) {
    return (
      <div className="text-center py-12">
        <p className="text-gray-500">الجهاز غير موجود</p>
        <button
          onClick={() => router.back()}
          className="mt-4 px-4 py-2 bg-primary text-white rounded-lg"
        >
          رجوع
        </button>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <button
          onClick={() => router.back()}
          className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"
        >
          <ArrowLeft className="w-5 h-5" />
        </button>
        <div className="flex-1">
          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
            {device.name}
          </h1>
          <p className="text-gray-500">{device.device_type} • {device.device_metadata?.model || device.lifesmart_device_id}</p>
        </div>
        <span className={`px-3 py-1 rounded-full text-sm ${
          device.is_online
            ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400"
            : "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400"
        }`}>
          {device.is_online ? "متصل" : "غير متصل"}
        </span>
      </div>

      {/* Readings */}
      {readings.length > 0 && (
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          {readings.map((reading) => (
            <div key={reading.type} className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4">
              <div className="flex items-center gap-3 text-gray-400 mb-2">
                {getReadingIcon(reading.type)}
                <span className="text-sm">{getReadingLabel(reading.type)}</span>
              </div>
              <p className="text-2xl font-bold text-gray-900 dark:text-white">
                {reading.value.toFixed(1)} <span className="text-sm font-normal text-gray-500">{reading.unit}</span>
              </p>
            </div>
          ))}
        </div>
      )}

      {/* Controls */}
      {renderControls()}

      {/* Device Info */}
      <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
        <h3 className="text-lg font-semibold mb-4">معلومات الجهاز</h3>
        <dl className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <dt className="text-sm text-gray-500">معرف الجهاز</dt>
            <dd className="font-mono text-sm">{device.lifesmart_device_id}</dd>
          </div>
          <div>
            <dt className="text-sm text-gray-500">معرف المحور</dt>
            <dd className="font-mono text-sm">{device.device_metadata?.hub_id || "-"}</dd>
          </div>
          <div>
            <dt className="text-sm text-gray-500">الموديل</dt>
            <dd>{device.device_metadata?.model || "-"}</dd>
          </div>
          <div>
            <dt className="text-sm text-gray-500">آخر مزامنة</dt>
            <dd>{device.device_metadata?.last_sync ? new Date(device.device_metadata.last_sync).toLocaleString("ar") : "-"}</dd>
          </div>
        </dl>
      </div>
    </div>
  );
}