"use client"

import { useState, useEffect, useCallback, useRef } from "react"
import { useSubscribeToFeed } from "@/lib/queries/use-subscribe-to-feed"
import { useSubscriptions } from "@/lib/queries/use-subscriptions"
import { useUserProfile } from "@/lib/queries/use-user-profile"
import { useUserInterfaceStore } from "@/lib/stores/user-interface-store"

export function AddFeedDialog() {
  const isOpen = useUserInterfaceStore((state) => state.isAddFeedDialogOpen)
  const setOpen = useUserInterfaceStore((state) => state.setAddFeedDialogOpen)
  const [feedUrl, setFeedUrl] = useState("")
  const [customTitle, setCustomTitle] = useState("")
  const [selectedFolderIdentifier, setSelectedFolderIdentifier] = useState<
    string | null
  >(null)
  const [authenticationType, setAuthenticationType] = useState("none")
  const [feedCredential, setFeedCredential] = useState("")
  const subscribeToFeed = useSubscribeToFeed()
  const { data: subscriptionsData } = useSubscriptions()
  const { data: userProfile } = useUserProfile()

  const supportsAuthenticatedFeeds =
    userProfile?.tier === "pro" || userProfile?.tier === "developer"

  const handleClose = useCallback(() => {
    setFeedUrl("")
    setCustomTitle("")
    setSelectedFolderIdentifier(null)
    setAuthenticationType("none")
    setFeedCredential("")
    setOpen(false)
  }, [setOpen])

  async function handleSubmit(event: React.FormEvent) {
    event.preventDefault()

    subscribeToFeed.mutate(
      {
        feedUrl,
        folderIdentifier: selectedFolderIdentifier,
        customTitle: customTitle || null,
        feedCredential:
          authenticationType !== "none" ? feedCredential : null,
        feedAuthenticationType:
          authenticationType !== "none" ? authenticationType : null,
      },
      {
        onSuccess: () => {
          handleClose()
        },
      }
    )
  }

  const dialogReference = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (!isOpen) return

    function handleKeyDown(event: KeyboardEvent) {
      if (event.key === "Escape") {
        event.preventDefault()
        event.stopPropagation()
        handleClose()
      }
    }

    document.addEventListener("keydown", handleKeyDown, true)
    return () => document.removeEventListener("keydown", handleKeyDown, true)
  }, [isOpen, handleClose])

  useEffect(() => {
    if (isOpen) {
      const urlInput = dialogReference.current?.querySelector<HTMLInputElement>("#feed-url")
      urlInput?.focus()
    }
  }, [isOpen])

  if (!isOpen) return null

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      <div
        className="fixed inset-0 bg-background-primary/80"
        onClick={handleClose}
      />
      <div ref={dialogReference} className="relative w-full max-w-md border border-border bg-background-secondary p-6">
        <h2 className="mb-4 text-text-primary">add feed</h2>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-2">
            <label htmlFor="feed-url" className="text-text-secondary">
              feed url
            </label>
            <input
              id="feed-url"
              type="url"
              value={feedUrl}
              onChange={(event) => setFeedUrl(event.target.value)}
              required
              placeholder="https://example.com/feed.xml"
              className="w-full border border-border bg-background-primary px-3 py-2 text-text-primary outline-none placeholder:text-text-dim focus:border-text-dim"
            />
          </div>
          <div className="space-y-2">
            <label htmlFor="custom-title" className="text-text-secondary">
              custom title (optional)
            </label>
            <input
              id="custom-title"
              type="text"
              value={customTitle}
              onChange={(event) => setCustomTitle(event.target.value)}
              className="w-full border border-border bg-background-primary px-3 py-2 text-text-primary outline-none placeholder:text-text-dim focus:border-text-dim"
            />
          </div>
          <div className="space-y-2">
            <label htmlFor="folder-select" className="text-text-secondary">
              folder (optional)
            </label>
            <select
              id="folder-select"
              value={selectedFolderIdentifier ?? ""}
              onChange={(event) =>
                setSelectedFolderIdentifier(event.target.value || null)
              }
              className="w-full border border-border bg-background-primary px-3 py-2 text-text-primary outline-none"
            >
              <option value="">no folder</option>
              {subscriptionsData?.folders.map((folder) => (
                <option
                  key={folder.folderIdentifier}
                  value={folder.folderIdentifier}
                >
                  {folder.name}
                </option>
              ))}
            </select>
          </div>
          {supportsAuthenticatedFeeds && (
            <div className="space-y-2">
              <label
                htmlFor="auth-type"
                className="text-text-secondary"
              >
                authentication (optional)
              </label>
              <select
                id="auth-type"
                value={authenticationType}
                onChange={(event) => setAuthenticationType(event.target.value)}
                className="w-full border border-border bg-background-primary px-3 py-2 text-text-primary outline-none"
              >
                <option value="none">none</option>
                <option value="bearer">bearer token</option>
                <option value="basic">basic (user:pass)</option>
                <option value="query_param">query parameter</option>
              </select>
              {authenticationType !== "none" && (
                <input
                  type="password"
                  value={feedCredential}
                  onChange={(event) => setFeedCredential(event.target.value)}
                  placeholder={
                    authenticationType === "query_param"
                      ? "api_key=your_token"
                      : authenticationType === "basic"
                        ? "username:password"
                        : "your token"
                  }
                  className="w-full border border-border bg-background-primary px-3 py-2 text-text-primary outline-none placeholder:text-text-dim focus:border-text-dim"
                />
              )}
            </div>
          )}
          <div className="flex gap-2">
            <button
              type="button"
              onClick={handleClose}
              className="flex-1 border border-border px-4 py-2 text-text-secondary transition-colors hover:bg-background-tertiary hover:text-text-primary"
            >
              cancel
            </button>
            <button
              type="submit"
              disabled={subscribeToFeed.isPending}
              className="flex-1 border border-border bg-background-tertiary px-4 py-2 text-text-primary transition-colors hover:bg-border disabled:opacity-50"
            >
              {subscribeToFeed.isPending ? "adding..." : "add feed"}
            </button>
          </div>
        </form>
      </div>
    </div>
  )
}