"use client"

import { useEffect, useState } from "react"
import useMonitoring from "@/hooks/useMonitoring"
import { Check, CircleHelp, Copy, Server, Settings, Smartphone } from "lucide-react"

interface MonitoringSettingsProps {
  onError: (message: string) => void
  onSuccess: (message: string) => void
}

export const MonitoringSettings = ({ onError, onSuccess }: MonitoringSettingsProps) => {
  const { getGeneralApplicationMonitoringSettings, getGeneralServerMonitoringSettings, editGeneralApplicationMonitoringSettings, editGeneralServerMonitoringSettings } = useMonitoring();
  const [generalApplicationMonitoringSettings, setGeneralApplicationMonitoringSettings] = useState<any>(null);
  const [generalServerMonitoringSettings, setGeneralServerMonitoringSettings] = useState<any>(null);

  const fetchGeneralMonitoringSettings = async () => {
    const appSettings = await getGeneralApplicationMonitoringSettings();
    const serverSettings = await getGeneralServerMonitoringSettings();
    
    if (appSettings.error || serverSettings.error) {
      onError(appSettings.error || serverSettings.error || 'Failed to fetch settings');
      return;
    }

    setGeneralApplicationMonitoringSettings(
      appSettings.data || {
        frequency: 10,
        checksUntilOffline: 1,
      }
    );
    setGeneralServerMonitoringSettings(
      serverSettings.data || {
        frequency: 10,
        checksUntilOffline: 1,
      }
    );
  }

  useEffect(() => {
    fetchGeneralMonitoringSettings();
  }, []);
  
  return(
    <div className="w-full bg-base-200 p-6 rounded-2xl border border-stone-800">
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
        <div className="flex items-center gap-3">
          <div className="p-2 bg-primary/10 rounded-lg">
            <Settings className="w-6 h-6 text-primary" />
          </div>
          <div>
            <h2 className="text-xl font-bold">Monitoring Settings</h2>
            <p className="text-sm opacity-70">Manage your monitoring settings</p>
          </div>
        </div>
      </div>
  
      <div className="space-y-8">
        {/* Server Monitoring Section */}
        <div className="card bg-base-100 shadow-lg border border-base-300">
          <div className="card-body p-6">
            <div className="flex items-center gap-3 mb-6">
              <div className="p-2 bg-primary/10 rounded-lg">
                <Server className="w-6 h-6 text-primary" />
              </div>
              <div>
                <h3 className="text-lg font-bold">Server Monitoring</h3>
                <p className="text-sm opacity-70">Configure server monitoring frequency and thresholds</p>
              </div>
            </div>
  
            <div className="space-y-4">
              <div className="card bg-base-200">
                <div className="card-body p-4">
                  <div className="flex flex-col lg:flex-row lg:items-center gap-6">
                    <div className="flex-1">
                      <div className="flex items-center gap-2 mb-2">
                        <label className="label-text font-medium">Check Frequency</label>
                        <div className="tooltip" data-tip="Time between each status check">
                          <CircleHelp className="w-4 h-4 text-gray-400" />
                        </div>
                      </div>
                      <div className="flex items-center gap-3">
                        <input
                          type="number"
                          className="input input-bordered w-full max-w-[120px]"
                          value={generalServerMonitoringSettings?.frequency}
                          onChange={(e) => setGeneralServerMonitoringSettings({
                            ...generalServerMonitoringSettings,
                            frequency: parseInt(e.target.value)
                          })}
                          min="1"
                        />
                        <span className="text-sm opacity-75">seconds</span>
                      </div>
                      <p className="text-xs text-gray-500 mt-2">
                        Checks will be performed every {generalServerMonitoringSettings?.frequency} seconds
                      </p>
                    </div>
                    
                    <div className="flex-1">
                      <div className="flex items-center gap-2 mb-2">
                        <label className="label-text font-medium">Checks Until Offline</label>
                        <div className="tooltip" data-tip="Consecutive failed checks before marking as offline">
                          <CircleHelp className="w-4 h-4 text-gray-400" />
                        </div>
                      </div>
                      <input
                        type="number"
                        className="input input-bordered w-full max-w-[120px]"
                        value={generalServerMonitoringSettings?.checksUntilOffline}
                        onChange={(e) => setGeneralServerMonitoringSettings({
                          ...generalServerMonitoringSettings,
                          checksUntilOffline: parseInt(e.target.value)
                        })}
                        min="1"
                      />
                      <p className="text-xs text-gray-500 mt-2">
                        System will mark as offline after {generalServerMonitoringSettings?.checksUntilOffline} consecutive failures
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
  
        {/* Application Monitoring Section */}
        <div className="card bg-base-100 shadow-lg border border-base-300">
          <div className="card-body p-6">
            <div className="flex items-center gap-3 mb-6">
              <div className="p-2 bg-secondary/10 rounded-lg">
                <Smartphone className="w-6 h-6 text-secondary" />
              </div>
              <div>
                <h3 className="text-lg font-bold">Application Monitoring</h3>
                <p className="text-sm opacity-70">Configure application monitoring frequency and thresholds</p>
              </div>
            </div>
  
            <div className="space-y-4">
              <div className="card bg-base-200">
                <div className="card-body p-4">
                  <div className="flex flex-col lg:flex-row lg:items-center gap-6">
                    <div className="flex-1">
                      <div className="flex items-center gap-2 mb-2">
                        <label className="label-text font-medium">Check Frequency</label>
                        <div className="tooltip" data-tip="Time between each status check">
                          <CircleHelp className="w-4 h-4 text-gray-400" />
                        </div>
                      </div>
                      <div className="flex items-center gap-3">
                        <input
                          type="number"
                          className="input input-bordered w-full max-w-[120px]"
                          value={generalApplicationMonitoringSettings?.frequency}
                          onChange={(e) => setGeneralApplicationMonitoringSettings({
                            ...generalApplicationMonitoringSettings,
                            frequency: parseInt(e.target.value)
                          })}
                          min="1"
                        />
                        <span className="text-sm opacity-75">seconds</span>
                      </div>
                      <p className="text-xs text-gray-500 mt-2">
                        Checks will be performed every {generalApplicationMonitoringSettings?.frequency} seconds
                      </p>
                    </div>
                    
                    <div className="flex-1">
                      <div className="flex items-center gap-2 mb-2">
                        <label className="label-text font-medium">Checks Until Offline</label>
                        <div className="tooltip" data-tip="Consecutive failed checks before marking as offline">
                          <CircleHelp className="w-4 h-4 text-gray-400" />
                        </div>
                      </div>
                      <input
                        type="number"
                        className="input input-bordered w-full max-w-[120px]"
                        value={generalApplicationMonitoringSettings?.checksUntilOffline}
                        onChange={(e) => setGeneralApplicationMonitoringSettings({
                          ...generalApplicationMonitoringSettings,
                          checksUntilOffline: parseInt(e.target.value)
                        })}
                        min="1"
                      />
                      <p className="text-xs text-gray-500 mt-2">
                        System will mark as offline after {generalApplicationMonitoringSettings?.checksUntilOffline} consecutive failures
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
  
        {/* Save Button */}
        <div className="flex justify-end">
          <button 
            className="btn btn-primary"
            onClick={async () => {
              const serverResponse = await editGeneralServerMonitoringSettings(generalServerMonitoringSettings);
              const appResponse = await editGeneralApplicationMonitoringSettings(generalApplicationMonitoringSettings);
              
              if (serverResponse.error || appResponse.error) {
                onError(serverResponse.error || appResponse.error || 'Failed to save settings');
                return;
              }
              
              onSuccess('Monitoring settings saved successfully');
            }}
          >
            Save Settings
          </button>
        </div>
      </div>
    </div>
  )
}