"use client";

import { useEffect, useState } from "react";
import { useTranslations } from "next-intl";
import { api } from "@/lib/api";
import { 
  Link2, Unlink, RefreshCw, CheckCircle, XCircle, 
  Wifi, WifiOff, Settings, Globe, Key, User, Lock,
  Smartphone, Thermometer, Lightbulb, DoorOpen, Plug,
  Activity, AlertTriangle
} from "lucide-react";

interface ConnectionStatus {
  connected: boolean;
  region?: string;
  user_id?: string;
  message: string;
}

interface LifeSmartDevice {
  device_id: string;
  hub_id: string;
  name: string;
  device_type: string;
  device_model: string;
  is_online: boolean;
  data: any;
  controls: any[];
}

interface SyncResult {
  success: boolean;
  message: string;
  total_devices: number;
  synced_devices: number;
  new_devices: number;
  updated_devices: number;
  failed_devices: number;
  devices: LifeSmartDevice[];
}

interface Region {
  id: string;
  name: string;
  name_ar: string;
}

const deviceIcons: Record<string, any> = {
  environment_sensor: Thermometer,
  motion_sensor: Activity,
  door_sensor: DoorOpen,
  gas_sensor: AlertTriangle,
  smoke_sensor: AlertTriangle,
  water_leak_sensor: AlertTriangle,
  switch_1gang: Lightbulb,
  switch_2gang: Lightbulb,
  switch_3gang: Lightbulb,
  smart_plug: Plug,
  door_lock: Lock,
  curtain_motor: Settings,
  rgb_light: Lightbulb,
  light: Lightbulb,
  dimmer: Lightbulb,
  ir_controller: Smartphone,
  air_conditioner: Settings,
  camera: Settings,
  unknown: Smartphone,
};

export default function LifeSmartPage() {
  const t = useTranslations("lifesmart");
  const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus | null>(null);
  const [loading, setLoading] = useState(true);
  const [connecting, setConnecting] = useState(false);
  const [syncing, setSyncing] = useState(false);
  const [devices, setDevices] = useState<LifeSmartDevice[]>([]);
  const [syncResult, setSyncResult] = useState<SyncResult | null>(null);
  const [regions, setRegions] = useState<Region[]>([]);
  const [showConnectModal, setShowConnectModal] = useState(false);
  const [authMethod, setAuthMethod] = useState<"password" | "token">("password");
  
  const [credentials, setCredentials] = useState({
    app_key: "",
    app_token: "",
    username: "",
    password: "",
    user_token: "",
    user_id: "",
    region: "global",
  });

  useEffect(() => {
    fetchConnectionStatus();
    fetchRegions();
  }, []);

  const fetchConnectionStatus = async () => {
    try {
      const status = await api.getLifeSmartStatus();
      setConnectionStatus(status);
      if (status.connected) {
        fetchDevices();
      }
    } catch (error) {
      console.error("Failed to fetch connection status:", error);
      setConnectionStatus({ connected: false, message: "Failed to check status" });
    } finally {
      setLoading(false);
    }
  };

  const fetchRegions = async () => {
    try {
      const data = await api.getLifeSmartRegions();
      setRegions(data.regions || []);
    } catch (error) {
      console.error("Failed to fetch regions:", error);
    }
  };

  const fetchDevices = async () => {
    try {
      const deviceList = await api.getLifeSmartDevices();
      setDevices(deviceList);
    } catch (error) {
      console.error("Failed to fetch devices:", error);
    }
  };

  const handleConnect = async () => {
    setConnecting(true);
    try {
      let result;
      if (authMethod === "password") {
        result = await api.connectLifeSmart({
          app_key: credentials.app_key,
          app_token: credentials.app_token,
          username: credentials.username,
          password: credentials.password,
          region: credentials.region,
        });
      } else {
        result = await api.connectLifeSmartWithToken({
          app_key: credentials.app_key,
          app_token: credentials.app_token,
          user_token: credentials.user_token,
          user_id: credentials.user_id,
          region: credentials.region,
        });
      }
      
      if (result.success) {
        setShowConnectModal(false);
        await fetchConnectionStatus();
        alert("تم الاتصال بنجاح!");
      } else {
        alert("فشل الاتصال: " + result.message);
      }
    } catch (error: any) {
      console.error("Connection failed:", error);
      alert("فشل الاتصال: " + (error.response?.data?.detail || error.message));
    } finally {
      setConnecting(false);
    }
  };

  const handleDisconnect = async () => {
    if (!confirm("هل أنت متأكد من قطع الاتصال بحساب LifeSmart؟")) return;
    
    try {
      await api.disconnectLifeSmart();
      setConnectionStatus({ connected: false, message: "Disconnected" });
      setDevices([]);
      setSyncResult(null);
    } catch (error) {
      console.error("Failed to disconnect:", error);
      alert("فشل قطع الاتصال");
    }
  };

  const handleSync = async () => {
    setSyncing(true);
    try {
      const result = await api.syncLifeSmartDevices();
      setSyncResult(result);
      if (result.success) {
        setDevices(result.devices);
      }
    } catch (error: any) {
      console.error("Sync failed:", error);
      alert("فشل المزامنة: " + (error.response?.data?.detail || error.message));
    } finally {
      setSyncing(false);
    }
  };

  const getDeviceIcon = (type: string) => {
    const Icon = deviceIcons[type] || deviceIcons.unknown;
    return <Icon className="w-5 h-5" />;
  };

  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>
    );
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
            {t("title")}
          </h1>
          <p className="text-gray-500 dark:text-gray-400">{t("subtitle")}</p>
        </div>
      </div>

      {/* Connection Status Card */}
      <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-4">
            <div className={`p-3 rounded-full ${connectionStatus?.connected ? 'bg-green-100 dark:bg-green-900/30' : 'bg-gray-100 dark:bg-gray-700'}`}>
              {connectionStatus?.connected ? (
                <Wifi className="w-6 h-6 text-green-600 dark:text-green-400" />
              ) : (
                <WifiOff className="w-6 h-6 text-gray-400" />
              )}
            </div>
            <div>
              <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
                {t("connectionStatus")}
              </h2>
              <p className={`text-sm ${connectionStatus?.connected ? 'text-green-600 dark:text-green-400' : 'text-gray-500'}`}>
                {connectionStatus?.connected ? t("connected") : t("notConnected")}
              </p>
              {connectionStatus?.connected && connectionStatus.region && (
                <p className="text-xs text-gray-400 mt-1">
                  {t("region")}: {connectionStatus.region} | User ID: {connectionStatus.user_id}
                </p>
              )}
            </div>
          </div>
          
          <div className="flex gap-3">
            {connectionStatus?.connected ? (
              <>
                <button
                  onClick={handleSync}
                  disabled={syncing}
                  className="flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 disabled:opacity-50"
                >
                  <RefreshCw className={`w-4 h-4 ${syncing ? 'animate-spin' : ''}`} />
                  {syncing ? t("syncing") : t("syncDevices")}
                </button>
                <button
                  onClick={handleDisconnect}
                  className="flex items-center gap-2 px-4 py-2 border border-red-200 text-red-600 rounded-lg hover:bg-red-50 dark:border-red-900 dark:hover:bg-red-900/20"
                >
                  <Unlink className="w-4 h-4" />
                  {t("disconnect")}
                </button>
              </>
            ) : (
              <button
                onClick={() => setShowConnectModal(true)}
                className="flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90"
              >
                <Link2 className="w-4 h-4" />
                {t("connect")}
              </button>
            )}
          </div>
        </div>
      </div>

      {/* Sync Result */}
      {syncResult && (
        <div className={`p-4 rounded-lg border ${syncResult.success ? 'bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-800' : 'bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800'}`}>
          <div className="flex items-center gap-2">
            {syncResult.success ? (
              <CheckCircle className="w-5 h-5 text-green-600" />
            ) : (
              <XCircle className="w-5 h-5 text-red-600" />
            )}
            <span className="font-medium">{syncResult.message}</span>
          </div>
          {syncResult.success && (
            <div className="mt-2 flex gap-4 text-sm text-gray-600 dark:text-gray-400">
              <span>إجمالي: {syncResult.total_devices}</span>
              <span>جديد: {syncResult.new_devices}</span>
              <span>محدث: {syncResult.updated_devices}</span>
              {syncResult.failed_devices > 0 && (
                <span className="text-red-600">فشل: {syncResult.failed_devices}</span>
              )}
            </div>
          )}
        </div>
      )}

      {/* Devices List */}
      {connectionStatus?.connected && devices.length > 0 && (
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700">
          <div className="p-4 border-b border-gray-200 dark:border-gray-700">
            <h3 className="text-lg font-semibold">{t("devicesList")} ({devices.length})</h3>
          </div>
          <div className="divide-y divide-gray-200 dark:divide-gray-700">
            {devices.map((device) => (
              <div key={device.device_id} className="p-4 flex items-center justify-between">
                <div className="flex items-center gap-4">
                  <div className={`p-2 rounded-lg ${device.is_online ? 'bg-green-100 dark:bg-green-900/30 text-green-600' : 'bg-gray-100 dark:bg-gray-700 text-gray-400'}`}>
                    {getDeviceIcon(device.device_type)}
                  </div>
                  <div>
                    <h4 className="font-medium text-gray-900 dark:text-white">{device.name}</h4>
                    <p className="text-sm text-gray-500">
                      {device.device_type} • {device.device_model}
                    </p>
                  </div>
                </div>
                <div className="flex items-center gap-3">
                  <span className={`px-2 py-1 rounded-full text-xs ${device.is_online ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' : 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400'}`}>
                    {device.is_online ? t("online") : t("offline")}
                  </span>
                  {device.controls && device.controls.length > 0 && (
                    <span className="text-xs text-gray-400">
                      {device.controls.length} {t("controls")}
                    </span>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Empty State */}
      {connectionStatus?.connected && devices.length === 0 && (
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-12 text-center">
          <Smartphone className="w-12 h-12 mx-auto text-gray-400 mb-4" />
          <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
            {t("noDevices")}
          </h3>
          <p className="text-gray-500 mb-4">{t("noDevicesDesc")}</p>
          <button
            onClick={handleSync}
            disabled={syncing}
            className="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 disabled:opacity-50"
          >
            {syncing ? t("syncing") : t("syncNow")}
          </button>
        </div>
      )}

      {/* Connect Modal */}
      {showConnectModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center">
          <div className="absolute inset-0 bg-black/50" onClick={() => setShowConnectModal(false)} />
          <div className="relative bg-white dark:bg-gray-800 rounded-xl shadow-xl w-full max-w-lg mx-4 p-6 max-h-[90vh] overflow-y-auto">
            <h2 className="text-xl font-semibold mb-6">{t("connectAccount")}</h2>
            
            {/* Auth Method Tabs */}
            <div className="flex mb-6 bg-gray-100 dark:bg-gray-700 rounded-lg p-1">
              <button
                onClick={() => setAuthMethod("password")}
                className={`flex-1 py-2 px-4 rounded-md text-sm font-medium transition-colors ${
                  authMethod === "password"
                    ? "bg-white dark:bg-gray-600 shadow"
                    : "text-gray-600 dark:text-gray-400"
                }`}
              >
                {t("authPassword")}
              </button>
              <button
                onClick={() => setAuthMethod("token")}
                className={`flex-1 py-2 px-4 rounded-md text-sm font-medium transition-colors ${
                  authMethod === "token"
                    ? "bg-white dark:bg-gray-600 shadow"
                    : "text-gray-600 dark:text-gray-400"
                }`}
              >
                {t("authToken")}
              </button>
            </div>

            <div className="space-y-4">
              {/* App Key */}
              <div>
                <label className="block text-sm font-medium mb-1">
                  <Key className="w-4 h-4 inline mr-1" />
                  App Key *
                </label>
                <input
                  type="text"
                  value={credentials.app_key}
                  onChange={(e) => setCredentials({ ...credentials, app_key: e.target.value })}
                  className="w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900"
                  placeholder="Your LifeSmart App Key"
                />
              </div>

              {/* App Token */}
              <div>
                <label className="block text-sm font-medium mb-1">
                  <Lock className="w-4 h-4 inline mr-1" />
                  App Token *
                </label>
                <input
                  type="password"
                  value={credentials.app_token}
                  onChange={(e) => setCredentials({ ...credentials, app_token: e.target.value })}
                  className="w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900"
                  placeholder="Your LifeSmart App Token"
                />
              </div>

              {/* Region */}
              <div>
                <label className="block text-sm font-medium mb-1">
                  <Globe className="w-4 h-4 inline mr-1" />
                  {t("region")}
                </label>
                <select
                  value={credentials.region}
                  onChange={(e) => setCredentials({ ...credentials, region: e.target.value })}
                  className="w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900"
                >
                  {regions.map((region) => (
                    <option key={region.id} value={region.id}>
                      {region.name} - {region.name_ar}
                    </option>
                  ))}
                </select>
              </div>

              {authMethod === "password" ? (
                <>
                  {/* Username */}
                  <div>
                    <label className="block text-sm font-medium mb-1">
                      <User className="w-4 h-4 inline mr-1" />
                      {t("username")} *
                    </label>
                    <input
                      type="email"
                      value={credentials.username}
                      onChange={(e) => setCredentials({ ...credentials, username: e.target.value })}
                      className="w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900"
                      placeholder="LifeSmart account email"
                    />
                  </div>

                  {/* Password */}
                  <div>
                    <label className="block text-sm font-medium mb-1">
                      <Lock className="w-4 h-4 inline mr-1" />
                      {t("password")} *
                    </label>
                    <input
                      type="password"
                      value={credentials.password}
                      onChange={(e) => setCredentials({ ...credentials, password: e.target.value })}
                      className="w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900"
                      placeholder="LifeSmart account password"
                    />
                  </div>
                </>
              ) : (
                <>
                  {/* User ID */}
                  <div>
                    <label className="block text-sm font-medium mb-1">
                      <User className="w-4 h-4 inline mr-1" />
                      User ID *
                    </label>
                    <input
                      type="text"
                      value={credentials.user_id}
                      onChange={(e) => setCredentials({ ...credentials, user_id: e.target.value })}
                      className="w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900"
                      placeholder="LifeSmart User ID"
                    />
                  </div>

                  {/* User Token */}
                  <div>
                    <label className="block text-sm font-medium mb-1">
                      <Key className="w-4 h-4 inline mr-1" />
                      User Token *
                    </label>
                    <input
                      type="password"
                      value={credentials.user_token}
                      onChange={(e) => setCredentials({ ...credentials, user_token: e.target.value })}
                      className="w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900"
                      placeholder="LifeSmart User Token"
                    />
                  </div>
                </>
              )}

              {/* Info Box */}
              <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
                <h4 className="font-medium text-blue-800 dark:text-blue-300 mb-2">{t("howToGetCredentials")}</h4>
                <ol className="text-sm text-blue-700 dark:text-blue-400 list-decimal list-inside space-y-1">
                  <li>{t("step1")}</li>
                  <li>{t("step2")}</li>
                  <li>{t("step3")}</li>
                </ol>
              </div>
            </div>

            <div className="flex gap-3 mt-6">
              <button
                onClick={() => setShowConnectModal(false)}
                className="flex-1 px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700"
              >
                {t("cancel")}
              </button>
              <button
                onClick={handleConnect}
                disabled={connecting || !credentials.app_key || !credentials.app_token}
                className="flex-1 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 disabled:opacity-50"
              >
                {connecting ? t("connecting") : t("connect")}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}