"use client"

import { useState } from "react"
import AddNotification from "@/components/dialogues/AddNotification"
import DeleteNotification from "@/components/dialogues/DeleteNotification"
import TestNotification from "@/components/dialogues/TestNotification"
import useNotifications from "@/hooks/useNotifications"
import { Plus, Trash2, Play, Bell, Settings, CheckCircle, AlertCircle } from "lucide-react"
import Loading from "@/components/Loading"

export const NotificationProviderSettings = ({
  onError,
  onSuccess,
}: { onError: (message: string) => void; onSuccess: (message: string) => void }) => {
  const { loadNotifications, notifications, loading, testNotification } = useNotifications()
  const [deleteNotificationId, setDeleteNotificationId] = useState<number | null>(null)
  const [notificationTestId, setNotificationTestId] = useState<number | null>(null)

  const testNotificationHandler = async (notificationProviderId: number) => {
    ;(document.getElementById("test_notification") as HTMLDialogElement)?.showModal()
    const notificationTest = await testNotification(notificationProviderId)
    setNotificationTestId(notificationTest)
  }

  const getTypeIcon = (type: string) => {
    switch (type.toLowerCase()) {
      case "email":
        return "📧"
      case "slack":
        return "💬"
      case "discord":
        return "🎮"
      case "webhook":
        return "🔗"
      case "telegram":
        return "✈️"
      default:
        return "🔔"
    }
  }

  const getTypeBadgeColor = (type: string) => {
    switch (type.toLowerCase()) {
      case "email":
        return "badge-primary"
      case "slack":
        return "badge-secondary"
      case "discord":
        return "badge-accent"
      case "webhook":
        return "badge-info"
      case "telegram":
        return "badge-success"
      default:
        return "badge-neutral"
    }
  }

  return (
    <div className="w-full bg-base-200 p-6 rounded-2xl border border-stone-800">
      {/* Header */}
      <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">Notification Providers</h2>
            <p className="text-sm opacity-70">Manage your notification providers and test connections</p>
          </div>
        </div>
        <button
          className="btn btn-primary gap-2 shadow-lg hover:shadow-xl transition-shadow"
          onClick={() => (document.getElementById("add_notification") as HTMLDialogElement)?.showModal()}
        >
          <Plus className="w-5 h-5" />
          Add Provider
        </button>
      </div>

      {/* Content */}
      {loading ? (
        <div className="flex justify-center items-center h-64 w-full">
          <Loading />
        </div>
      ) : notifications && notifications.length > 0 ? (
        <div className="card bg-base-100 shadow-lg border border-base-300">
          <div className="card-body p-0">

            {/* Table Content */}
            <div className="overflow-x-auto">
              <table className="table table-zebra">
                <thead>
                  <tr className="border-base-300">
                    <th className="bg-base-200/30">
                      <span className="text-xs font-semibold uppercase tracking-wider text-base-content/70">ID</span>
                    </th>
                    <th className="bg-base-200/30">
                      <span className="text-xs font-semibold uppercase tracking-wider text-base-content/70">
                        Provider
                      </span>
                    </th>
                    <th className="bg-base-200/30">
                      <span className="text-xs font-semibold uppercase tracking-wider text-base-content/70">Type</span>
                    </th>
                    <th className="bg-base-200/30">
                      <span className="text-xs font-semibold uppercase tracking-wider text-base-content/70">
                        Status
                      </span>
                    </th>
                    <th className="bg-base-200/30 text-center">
                      <span className="text-xs font-semibold uppercase tracking-wider text-base-content/70">
                        Actions
                      </span>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {notifications.map((notification: any, index: number) => (
                    <tr key={notification.id} className="hover:bg-base-200/50 transition-colors">
                      <td>
                        <div className="flex items-center gap-2">
                          <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-sm font-semibold text-primary">
                            {notification.id}
                          </div>
                        </div>
                      </td>
                      <td>
                        <div className="flex items-center gap-3">
                          <div className="text-2xl">{getTypeIcon(notification.type)}</div>
                          <div>
                            <div className="font-semibold text-base-content">{notification.name}</div>
                            <div className="text-sm text-base-content/60">Provider #{notification.id}</div>
                          </div>
                        </div>
                      </td>
                      <td>
                        <div className={`badge badge-outline badge-sm ${getTypeBadgeColor(notification.type)}`}>
                          {notification.type}
                        </div>
                      </td>
                      <td>
                        <div className="flex items-center gap-2">
                          <CheckCircle className="w-4 h-4 text-success" />
                          <span className="text-sm font-medium text-success">Active</span>
                        </div>
                      </td>
                      <td>
                        <div className="flex items-center justify-center gap-2">
                          <div className="tooltip tooltip-top" data-tip="Test Provider">
                            <button
                              className="btn btn-sm btn-success hover:btn-success/80 transition-colors shadow-md"
                              onClick={() => testNotificationHandler(notification.id)}
                            >
                              <Play className="w-4 h-4" />
                            </button>
                          </div>
                          <div className="tooltip tooltip-top" data-tip="Delete Provider">
                            <button
                              className="btn btn-sm btn-error hover:btn-error/80 transition-colors shadow-md"
                              onClick={() => {
                                setDeleteNotificationId(notification.id)
                                ;(document.getElementById("delete_notification") as HTMLDialogElement)?.showModal()
                              }}
                            >
                              <Trash2 className="w-4 h-4" />
                            </button>
                          </div>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      ) : (
        <div className="card bg-base-100 shadow-lg border border-base-300">
          <div className="card-body">
            <div className="flex flex-col items-center justify-center py-16">
              <div className="relative mb-6">
                <div className="w-20 h-20 bg-gradient-to-br from-primary/20 to-secondary/20 rounded-full flex items-center justify-center">
                  <Bell className="w-10 h-10 text-primary/60" />
                </div>
                <div className="absolute -top-1 -right-1 w-6 h-6 bg-warning rounded-full flex items-center justify-center">
                  <AlertCircle className="w-4 h-4 text-warning-content" />
                </div>
              </div>
              <h3 className="text-lg font-semibold text-base-content mb-2">No Providers Configured</h3>
              <p className="text-base-content/70 text-center mb-6 max-w-md">
                Get started by adding your first notification provider. You can configure SMTP, Ntfy, Telegram and
                more.
              </p>
              <button
                className="btn btn-primary gap-2 shadow-lg hover:shadow-xl transition-shadow"
                onClick={() => (document.getElementById("add_notification") as HTMLDialogElement)?.showModal()}
              >
                <Plus className="w-5 h-5" />
                Add Your First Provider
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Dialogs */}
      <AddNotification onNotificationAdded={loadNotifications} onSuccess={onSuccess} onError={onError} />
      {deleteNotificationId && (
        <DeleteNotification
          notificationId={deleteNotificationId}
          onNotificationDeleted={loadNotifications}
          onError={onError}
          onSuccess={onSuccess}
        />
      )}
      {notificationTestId && <TestNotification notificationTestId={notificationTestId} onError={onError} />}
    </div>
  )
}