"use client"

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

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

export const NotificationSettings = ({ onError, onSuccess }: NotificationSettingsProps) => {
  const {
    getNotificationApplicationsSettings,
    getNotificationServerSettings,
    editNotificationApplicationsSettings,
    editNotificationServerSettings,
  } = useNotifications()
  const [applicationsSettings, setApplicationsSettings] = useState<any>(null)
  const [serverSettings, setServerSettings] = useState<any>(null)
  const [copiedVariable, setCopiedVariable] = useState<string | null>(null)
  const [serverCollapsed, setServerCollapsed] = useState(true)
  const [applicationCollapsed, setApplicationCollapsed] = useState(true)

  const fetchNotificationSettings = async () => {
    const applicationsSettings = await getNotificationApplicationsSettings()
    const serverSettings = await getNotificationServerSettings()

    setServerSettings(
      serverSettings || {
        enabled: false,
        statusChange: true,
        cpuLimit: 80,
        gpuLimit: 80,
        memoryLimit: 80,
        diskLimit: 80,
        temperatureLimit: 80,
        notificationTextStatus: "{servername} went {status}",
        notificationTextCpu: "{servername} CPU usage is high at {cpu}%",
        notificationTextGpu: "{servername} GPU usage is high at {gpu}%",
        notificationTextMemory: "{servername} Memory usage is high at {memory}%",
        notificationTextDisk: "{servername} Disk usage is high at {disk}%",
        notificationTextTemperature: "{servername} Temperature is high at {temperature}°C",
        notificationCpu: true,
        notificationGpu: true,
        notificationMemory: true,
        notificationDisk: true,
        notificationTemperature: true,
      },
    )

    setApplicationsSettings(
      applicationsSettings || {
        enabled: false,
        statusChange: false,
        latencyLimit: 1000,
        notificationTextStatus: "{appname} went {status}",
        notificationTextLatency: "{appname} latency is high at {latency}ms",
        notificationLatency: true,
      },
    )
  }

  useEffect(() => {
    fetchNotificationSettings()
  }, [])

  const saveNotificationSettings = async () => {
    const response = editNotificationServerSettings(serverSettings)
    if (typeof response === "string") {
      onError && onError(response)
      return
    }

    const response2 = editNotificationApplicationsSettings(applicationsSettings)
    if (typeof response2 === "string") {
      onError && onError(response2)
      return
    }
    try {
      const successMessage = await response
      const successMessage2 = await response2
      console.log(successMessage, successMessage2)
      if (onSuccess && successMessage && successMessage2) {
        onSuccess("Notification settings saved successfully")
      }
    } catch (apiError: any) {
      onError && onError(apiError)
    }
  }

  const copyToClipboard = async (text: string) => {
    try {
      await navigator.clipboard.writeText(text)
      setCopiedVariable(text)
      setTimeout(() => setCopiedVariable(null), 2000)
    } catch (err) {
      console.error("Failed to copy text: ", err)
    }
  }

  const ResourceThresholdRow = ({
    label,
    checked,
    onCheckedChange,
    value,
    onValueChange,
    unit,
    message,
    onMessageChange,
    disabled,
  }: {
    label: string
    checked: boolean
    onCheckedChange: () => void
    value: number
    onValueChange: (value: string) => void
    unit: string
    message: string
    onMessageChange: (value: string) => void
    disabled: boolean
  }) => (
    <div className="card bg-base-100 shadow-sm border border-base-300 mb-3">
      <div className="card-body p-4">
        <div className="space-y-4">
          {/* Header Row - Checkbox and Threshold */}
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <input
                type="checkbox"
                className="checkbox checkbox-primary"
                checked={checked}
                onChange={onCheckedChange}
                disabled={disabled}
              />
              <span className="font-medium">{label}</span>
            </div>

            <div className="flex items-center gap-2">
              <span className="text-sm text-base-content/70">Threshold:</span>
              <div className="flex items-center gap-1">
                <input
                  type="number"
                  className="input input-bordered input-sm w-20 text-center"
                  value={value}
                  onChange={(e) => onValueChange(e.target.value)}
                  disabled={disabled}
                  min="0"
                  max={unit === "°C" ? "200" : "100"}
                />
                <span className="text-sm font-medium text-base-content/80">{unit}</span>
              </div>
            </div>
          </div>

          {/* Message Template Row */}
          <div className="space-y-2">
            <div className="flex items-center gap-2">
              <span className="text-sm font-medium text-base-content/80">Notification Message:</span>
              <div
                className="tooltip tooltip-right"
                data-tip="Use template variables like {servername}, {status}, etc."
              >
                <CircleHelp className="w-4 h-4 text-base-content/50" />
              </div>
            </div>
            <input
              type="text"
              className="input input-bordered input-sm w-full"
              placeholder={`Enter ${label.toLowerCase()} notification message...`}
              value={message}
              onChange={(e) => onMessageChange(e.target.value)}
              disabled={disabled}
            />
          </div>
        </div>
      </div>
    </div>
  )

  return (
    <div className="w-full bg-base-200 p-6 rounded-2xl border border-stone-800">
      {/* Header */}
      <div className="text-center lg:text-left mb-6">
        <h2 className="text-xl font-bold">Notification Settings</h2>
        <p className="text-sm opacity-70 mt-1">Configure monitoring alerts for your servers and applications</p>
      </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 ${serverCollapsed ? "pb-2" : ""}`}>
            <div
              className={`flex items-center gap-3 ${serverCollapsed ? "mb-2" : "mb-6"} cursor-pointer hover:bg-base-200 -m-2 p-2 rounded-lg transition-colors`}
              onClick={() => setServerCollapsed(!serverCollapsed)}
            >
              <div className="p-2 bg-primary/10 rounded-lg">
                <Server className="w-6 h-6 text-primary" />
              </div>
              <div className="flex-1">
                <h3 className="text-lg font-bold">Server Notifications</h3>
                <p className="text-sm opacity-70">Monitor server resources and performance</p>
              </div>
              <span
                className={`px-3 py-1 rounded-full text-xs font-medium w-20 text-center ${
                  serverSettings?.enabled ? "bg-success text-white" : "bg-error text-white"
                }`}
              >
                {serverSettings?.enabled ? "Active" : "Inactive"}
              </span>
              <div className={`transition-transform duration-200 ${serverCollapsed ? "" : "rotate-180"}`}>
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                </svg>
              </div>
            </div>

            <div
              className={`transition-all duration-300 overflow-hidden ${serverCollapsed ? "max-h-0 opacity-0" : "max-h-none opacity-100"}`}
            >
              {/* Master Toggle */}
              <div className="card bg-base-200 mb-6">
                <div className="card-body p-4">
                  <div className="flex items-center gap-3">
                    <input
                      type="checkbox"
                      className="toggle toggle-primary"
                      checked={serverSettings?.enabled}
                      onChange={() => setServerSettings({ ...serverSettings, enabled: !serverSettings.enabled })}
                    />
                    <div>
                      <h4 className="font-semibold">Enable Server Monitoring</h4>
                      <p className="text-sm text-base-content/70">Turn on global server monitoring notifications</p>
                    </div>
                  </div>
                </div>
              </div>

              {/* Settings Content */}
              <div className={`space-y-6 ${!serverSettings?.enabled ? "opacity-50" : ""}`}>
                {/* Status Change Alerts */}
                <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 items-center gap-3 lg:flex-1">
                        <input
                          type="checkbox"
                          className="checkbox checkbox-primary"
                          checked={serverSettings?.statusChange}
                          onChange={() =>
                            setServerSettings({ ...serverSettings, statusChange: !serverSettings.statusChange })
                          }
                          disabled={!serverSettings?.enabled}
                        />
                        <div>
                          <span className="font-medium">Status Change Alerts</span>
                          <p className="text-xs text-base-content/70">Get notified when server status changes</p>
                        </div>
                      </div>
                      <div className="flex items-center gap-2 lg:flex-1">
                        <input
                          type="text"
                          className="input input-bordered input-sm flex-1"
                          placeholder="Status change notification message..."
                          value={serverSettings?.notificationTextStatus}
                          onChange={(e) =>
                            setServerSettings({ ...serverSettings, notificationTextStatus: e.target.value })
                          }
                          disabled={!serverSettings?.enabled}
                        />
                        <div className="tooltip tooltip-left" data-tip="Notification message template">
                          <CircleHelp className="w-4 h-4 text-base-content/50" />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Resource Thresholds */}
                <div>
                  <h4 className="text-base font-semibold mb-4">Resource Thresholds</h4>
                  <div className="space-y-0">
                    <ResourceThresholdRow
                      label="CPU Usage"
                      checked={serverSettings?.notificationCpu}
                      onCheckedChange={() =>
                        setServerSettings({ ...serverSettings, notificationCpu: !serverSettings.notificationCpu })
                      }
                      value={serverSettings?.cpuLimit}
                      onValueChange={(value) => setServerSettings({ ...serverSettings, cpuLimit: value })}
                      unit="%"
                      message={serverSettings?.notificationTextCpu}
                      onMessageChange={(value) => setServerSettings({ ...serverSettings, notificationTextCpu: value })}
                      disabled={!serverSettings?.enabled}
                    />

                    <ResourceThresholdRow
                      label="GPU Usage"
                      checked={serverSettings?.notificationGpu}
                      onCheckedChange={() =>
                        setServerSettings({ ...serverSettings, notificationGpu: !serverSettings.notificationGpu })
                      }
                      value={serverSettings?.gpuLimit}
                      onValueChange={(value) => setServerSettings({ ...serverSettings, gpuLimit: value })}
                      unit="%"
                      message={serverSettings?.notificationTextGpu}
                      onMessageChange={(value) => setServerSettings({ ...serverSettings, notificationTextGpu: value })}
                      disabled={!serverSettings?.enabled}
                    />

                    <ResourceThresholdRow
                      label="Memory Usage"
                      checked={serverSettings?.notificationMemory}
                      onCheckedChange={() =>
                        setServerSettings({ ...serverSettings, notificationMemory: !serverSettings.notificationMemory })
                      }
                      value={serverSettings?.memoryLimit}
                      onValueChange={(value) => setServerSettings({ ...serverSettings, memoryLimit: value })}
                      unit="%"
                      message={serverSettings?.notificationTextMemory}
                      onMessageChange={(value) =>
                        setServerSettings({ ...serverSettings, notificationTextMemory: value })
                      }
                      disabled={!serverSettings?.enabled}
                    />

                    <ResourceThresholdRow
                      label="Disk Usage"
                      checked={serverSettings?.notificationDisk}
                      onCheckedChange={() =>
                        setServerSettings({ ...serverSettings, notificationDisk: !serverSettings.notificationDisk })
                      }
                      value={serverSettings?.diskLimit}
                      onValueChange={(value) => setServerSettings({ ...serverSettings, diskLimit: value })}
                      unit="%"
                      message={serverSettings?.notificationTextDisk}
                      onMessageChange={(value) => setServerSettings({ ...serverSettings, notificationTextDisk: value })}
                      disabled={!serverSettings?.enabled}
                    />

                    <ResourceThresholdRow
                      label="Temperature"
                      checked={serverSettings?.notificationTemperature}
                      onCheckedChange={() =>
                        setServerSettings({
                          ...serverSettings,
                          notificationTemperature: !serverSettings.notificationTemperature,
                        })
                      }
                      value={serverSettings?.temperatureLimit}
                      onValueChange={(value) => setServerSettings({ ...serverSettings, temperatureLimit: value })}
                      unit="°C"
                      message={serverSettings?.notificationTextTemperature}
                      onMessageChange={(value) =>
                        setServerSettings({ ...serverSettings, notificationTextTemperature: value })
                      }
                      disabled={!serverSettings?.enabled}
                    />
                  </div>
                </div>

                {/* Server Variables Reference */}
                <div className="card bg-gradient-to-br from-base-200 to-base-300 border border-base-300 mt-6">
                  <div className="card-body p-4">
                    <div className="flex items-center gap-2 mb-3">
                      <CircleHelp className="w-4 h-4 text-primary" />
                      <h5 className="text-sm font-semibold">Available Server Variables</h5>
                    </div>
                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
                      {[
                        { var: "{servername}", desc: "Server name or hostname" },
                        { var: "{status}", desc: "Current server status" },
                        { var: "{cpu}", desc: "CPU usage percentage" },
                        { var: "{gpu}", desc: "GPU usage percentage" },
                        { var: "{memory}", desc: "Memory usage percentage" },
                        { var: "{disk}", desc: "Disk usage percentage" },
                        { var: "{temperature}", desc: "Temperature in Celsius" },
                      ].map((item) => (
                        <div
                          key={item.var}
                          className="group bg-base-100 border border-base-300 rounded-lg p-2 hover:border-primary hover:shadow-sm transition-all duration-200 cursor-pointer"
                          onClick={() => copyToClipboard(item.var)}
                        >
                          <div className="flex items-center justify-between">
                            <div className="flex-1">
                              <div className="font-mono text-xs font-semibold text-primary">{item.var}</div>
                              <div className="text-xs text-base-content/70">{item.desc}</div>
                            </div>
                            <div className="ml-2 opacity-0 group-hover:opacity-100 transition-opacity">
                              {copiedVariable === item.var ? (
                                <Check className="w-3 h-3 text-success" />
                              ) : (
                                <Copy className="w-3 h-3 text-base-content/50" />
                              )}
                            </div>
                          </div>
                        </div>
                      ))}
                    </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 ${applicationCollapsed ? "pb-2" : ""}`}>
            <div
              className={`flex items-center gap-3 ${applicationCollapsed ? "mb-2" : "mb-6"} cursor-pointer hover:bg-base-200 -m-2 p-2 rounded-lg transition-colors`}
              onClick={() => setApplicationCollapsed(!applicationCollapsed)}
            >
              <div className="p-2 bg-secondary/10 rounded-lg">
                <Smartphone className="w-6 h-6 text-secondary" />
              </div>
              <div className="flex-1">
                <h3 className="text-lg font-bold">Application Notifications</h3>
                <p className="text-sm opacity-70">Configure application monitoring notifications</p>
              </div>
              <span
                className={`px-3 py-1 rounded-full text-xs font-medium w-20 text-center ${
                  applicationsSettings?.enabled ? "bg-success text-white" : "bg-error text-white"
                }`}
              >
                {applicationsSettings?.enabled ? "Active" : "Inactive"}
              </span>
              <div className={`transition-transform duration-200 ${applicationCollapsed ? "" : "rotate-180"}`}>
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                </svg>
              </div>
            </div>

            <div
              className={`transition-all duration-300 overflow-hidden ${applicationCollapsed ? "max-h-0 opacity-0" : "max-h-none opacity-100"}`}
            >
              {/* Master Toggle */}
              <div className="card bg-base-200 mb-6">
                <div className="card-body p-4">
                  <div className="flex items-center gap-3">
                    <input
                      type="checkbox"
                      className="toggle toggle-primary"
                      checked={applicationsSettings?.enabled}
                      onChange={() =>
                        setApplicationsSettings({ ...applicationsSettings, enabled: !applicationsSettings.enabled })
                      }
                    />
                    <div>
                      <h4 className="font-semibold">Enable Application Monitoring</h4>
                      <p className="text-sm text-base-content/70">Turn on global application monitoring</p>
                    </div>
                  </div>
                </div>
              </div>

              {/* Application Settings */}
              <div className={`space-y-6 ${!applicationsSettings?.enabled ? "opacity-50" : ""}`}>
                {/* Status Change Alerts */}
                <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 items-center gap-3 lg:flex-1">
                        <input
                          type="checkbox"
                          className="checkbox checkbox-primary"
                          checked={applicationsSettings?.statusChange}
                          onChange={() =>
                            setApplicationsSettings({
                              ...applicationsSettings,
                              statusChange: !applicationsSettings.statusChange,
                            })
                          }
                          disabled={!applicationsSettings?.enabled}
                        />
                        <div>
                          <span className="font-medium">Status Change Alerts</span>
                          <p className="text-xs text-base-content/70">Get notified when application status changes</p>
                        </div>
                      </div>
                      <div className="flex items-center gap-2 lg:flex-1">
                        <input
                          type="text"
                          className="input input-bordered input-sm flex-1"
                          placeholder="Status change notification message..."
                          value={applicationsSettings?.notificationTextStatus}
                          onChange={(e) =>
                            setApplicationsSettings({ ...applicationsSettings, notificationTextStatus: e.target.value })
                          }
                          disabled={!applicationsSettings?.enabled}
                        />
                        <div className="tooltip tooltip-left" data-tip="Notification message template">
                          <CircleHelp className="w-4 h-4 text-base-content/50" />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Performance Thresholds */}
                <div>
                  <h4 className="text-base font-semibold mb-4">Performance Thresholds</h4>
                  <ResourceThresholdRow
                    label="Latency Threshold"
                    checked={applicationsSettings?.notificationLatency}
                    onCheckedChange={() =>
                      setApplicationsSettings({
                        ...applicationsSettings,
                        notificationLatency: !applicationsSettings.notificationLatency,
                      })
                    }
                    value={applicationsSettings?.latencyLimit}
                    onValueChange={(value) =>
                      setApplicationsSettings({ ...applicationsSettings, latencyLimit: Number(value) })
                    }
                    unit="ms"
                    message={applicationsSettings?.notificationTextLatency}
                    onMessageChange={(value) =>
                      setApplicationsSettings({ ...applicationsSettings, notificationTextLatency: value })
                    }
                    disabled={!applicationsSettings?.enabled}
                  />
                </div>

                {/* Application Variables Reference */}
                <div className="card bg-gradient-to-br from-base-200 to-base-300 border border-base-300 mt-6">
                  <div className="card-body p-4">
                    <div className="flex items-center gap-2 mb-3">
                      <CircleHelp className="w-4 h-4 text-secondary" />
                      <h5 className="text-sm font-semibold">Available Application Variables</h5>
                    </div>
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                      {[
                        { var: "{appname}", desc: "Application name" },
                        { var: "{status}", desc: "Application status" },
                        { var: "{latency}", desc: "Application latency in ms" },
                      ].map((item) => (
                        <div
                          key={item.var}
                          className="group bg-base-100 border border-base-300 rounded-lg p-2 hover:border-primary hover:shadow-sm transition-all duration-200 cursor-pointer"
                          onClick={() => copyToClipboard(item.var)}
                        >
                          <div className="flex items-center justify-between">
                            <div className="flex-1">
                              <div className="font-mono text-xs font-semibold text-secondary">{item.var}</div>
                              <div className="text-xs text-base-content/70">{item.desc}</div>
                            </div>
                            <div className="ml-2 opacity-0 group-hover:opacity-100 transition-opacity">
                              {copiedVariable === item.var ? (
                                <Check className="w-3 h-3 text-success" />
                              ) : (
                                <Copy className="w-3 h-3 text-base-content/50" />
                              )}
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Action Buttons */}
        <div className="flex justify-end">
          <button className="btn btn-primary" onClick={saveNotificationSettings}>
            Save Settings
          </button>
        </div>
      </div>
    </div>
  )
}