"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 generalApplicationMonitoringSettings = await getGeneralApplicationMonitoringSettings();
    const generalServerMonitoringSettings = await getGeneralServerMonitoringSettings();
    if (typeof generalApplicationMonitoringSettings === 'string' || typeof generalServerMonitoringSettings === 'string') {
      onError(typeof generalApplicationMonitoringSettings === 'string' ? generalApplicationMonitoringSettings : generalServerMonitoringSettings as string);
      return;
    }
    setGeneralApplicationMonitoringSettings(
      generalApplicationMonitoringSettings || {
        frequency: 10,
        checksUntilOffline: 1,
      } 
    );
    setGeneralServerMonitoringSettings(
      generalServerMonitoringSettings || {
        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-4">
                    <div className="flex-1">
                      <label className="label">
                        <span className="label-text font-medium">Check Frequency (every x seconds)</span>
                      </label>
                      <input
                        type="number"
                        className="input input-bordered w-full"
                        value={generalServerMonitoringSettings?.frequency}
                        onChange={(e) => setGeneralServerMonitoringSettings({
                          ...generalServerMonitoringSettings,
                          frequency: parseInt(e.target.value)
                        })}
                        min="1"
                      />
                    </div>
                    <div className="flex-1">
                      <label className="label">
                        <span className="label-text font-medium">Checks Until Offline</span>
                      </label>
                      <input
                        type="number"
                        className="input input-bordered w-full"
                        value={generalServerMonitoringSettings?.checksUntilOffline}
                        onChange={(e) => setGeneralServerMonitoringSettings({
                          ...generalServerMonitoringSettings,
                          checksUntilOffline: parseInt(e.target.value)
                        })}
                        min="1"
                      />
                    </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-4">
                    <div className="flex-1">
                      <label className="label">
                        <span className="label-text font-medium">Check Frequency (every x seconds)</span>
                      </label>
                      <input
                        type="number"
                        className="input input-bordered w-full"
                        value={generalApplicationMonitoringSettings?.frequency}
                        onChange={(e) => setGeneralApplicationMonitoringSettings({
                          ...generalApplicationMonitoringSettings,
                          frequency: parseInt(e.target.value)
                        })}
                        min="1"
                      />
                    </div>
                    <div className="flex-1">
                      <label className="label">
                        <span className="label-text font-medium">Checks Until Offline</span>
                      </label>
                      <input
                        type="number"
                        className="input input-bordered w-full"
                        value={generalApplicationMonitoringSettings?.checksUntilOffline}
                        onChange={(e) => setGeneralApplicationMonitoringSettings({
                          ...generalApplicationMonitoringSettings,
                          checksUntilOffline: parseInt(e.target.value)
                        })}
                        min="1"
                      />
                    </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 (typeof serverResponse === 'string' || typeof appResponse === 'string') {
                onError(typeof serverResponse === 'string' ? serverResponse : appResponse as string);
                return;
              }
              
              onSuccess('Monitoring settings saved successfully');
            }}
          >
            Save Settings
          </button>
        </div>
      </div>
    </div>
  )
}