"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { useMutation } from "@tanstack/react-query"
import { useUnsubscribeAll } from "@/lib/queries/use-subscription-mutations"
import { useDeleteAllFolders } from "@/lib/queries/use-folder-mutations"
import { useDeleteAllCustomFeeds } from "@/lib/queries/use-custom-feed-mutations"
import { notify } from "@/lib/notify"

export function DangerZoneSettings() {
  const router = useRouter()
  const unsubscribeAll = useUnsubscribeAll()
  const deleteAllFolders = useDeleteAllFolders()
  const deleteAllCustomFeeds = useDeleteAllCustomFeeds()
  const [showDeleteSubsConfirm, setShowDeleteSubsConfirm] = useState(false)
  const [showDeleteFoldersConfirm, setShowDeleteFoldersConfirm] = useState(false)
  const [showDeleteCustomFeedsConfirm, setShowDeleteCustomFeedsConfirm] = useState(false)
  const [showDeleteAccountConfirm, setShowDeleteAccountConfirm] = useState(false)
  const [deleteConfirmText, setDeleteConfirmText] = useState("")

  const deleteAccount = useMutation({
    mutationFn: async () => {
      const response = await fetch("/api/account", { method: "DELETE" })
      if (!response.ok) throw new Error("failed to delete account")
    },
    onSuccess: () => {
      router.push("/sign-in")
    },
    onError: (error: Error) => {
      notify("failed to delete account: " + error.message)
    },
  })

  return (
    <div className="px-4 py-3">
      <p className="mb-6 text-text-dim">
        these actions are irreversible. proceed with caution.
      </p>

      <div className="mb-6">
        <h3 className="mb-2 text-text-primary">remove all subscriptions</h3>
        <p className="mb-2 text-text-dim">
          unsubscribe from every feed. entries will remain but no new ones will be fetched.
        </p>
        {showDeleteSubsConfirm ? (
          <div className="flex items-center gap-2">
            <span className="text-status-error">are you sure?</span>
            <button
              onClick={() => {
                unsubscribeAll.mutate()
                setShowDeleteSubsConfirm(false)
              }}
              disabled={unsubscribeAll.isPending}
              className="border border-status-error px-3 py-1 text-status-error transition-colors hover:bg-status-error hover:text-background-primary disabled:opacity-50"
            >
              yes, remove all
            </button>
            <button
              onClick={() => setShowDeleteSubsConfirm(false)}
              className="px-2 py-1 text-text-secondary transition-colors hover:text-text-primary"
            >
              cancel
            </button>
          </div>
        ) : (
          <button
            onClick={() => setShowDeleteSubsConfirm(true)}
            className="border border-border px-3 py-1 text-text-secondary transition-colors hover:border-status-error hover:text-status-error"
          >
            remove all subscriptions
          </button>
        )}
      </div>

      <div className="mb-6">
        <h3 className="mb-2 text-text-primary">delete all folders</h3>
        <p className="mb-2 text-text-dim">
          remove all folders. feeds will be ungrouped but not unsubscribed.
        </p>
        {showDeleteFoldersConfirm ? (
          <div className="flex items-center gap-2">
            <span className="text-status-error">are you sure?</span>
            <button
              onClick={() => {
                deleteAllFolders.mutate()
                setShowDeleteFoldersConfirm(false)
              }}
              disabled={deleteAllFolders.isPending}
              className="border border-status-error px-3 py-1 text-status-error transition-colors hover:bg-status-error hover:text-background-primary disabled:opacity-50"
            >
              yes, delete all
            </button>
            <button
              onClick={() => setShowDeleteFoldersConfirm(false)}
              className="px-2 py-1 text-text-secondary transition-colors hover:text-text-primary"
            >
              cancel
            </button>
          </div>
        ) : (
          <button
            onClick={() => setShowDeleteFoldersConfirm(true)}
            className="border border-border px-3 py-1 text-text-secondary transition-colors hover:border-status-error hover:text-status-error"
          >
            delete all folders
          </button>
        )}
      </div>

      <div className="mb-6">
        <h3 className="mb-2 text-text-primary">delete all custom feeds</h3>
        <p className="mb-2 text-text-dim">
          remove all custom feeds (saved searches).
        </p>
        {showDeleteCustomFeedsConfirm ? (
          <div className="flex items-center gap-2">
            <span className="text-status-error">are you sure?</span>
            <button
              onClick={() => {
                deleteAllCustomFeeds.mutate()
                setShowDeleteCustomFeedsConfirm(false)
              }}
              disabled={deleteAllCustomFeeds.isPending}
              className="border border-status-error px-3 py-1 text-status-error transition-colors hover:bg-status-error hover:text-background-primary disabled:opacity-50"
            >
              yes, delete all
            </button>
            <button
              onClick={() => setShowDeleteCustomFeedsConfirm(false)}
              className="px-2 py-1 text-text-secondary transition-colors hover:text-text-primary"
            >
              cancel
            </button>
          </div>
        ) : (
          <button
            onClick={() => setShowDeleteCustomFeedsConfirm(true)}
            className="border border-border px-3 py-1 text-text-secondary transition-colors hover:border-status-error hover:text-status-error"
          >
            delete all custom feeds
          </button>
        )}
      </div>

      <div>
        <h3 className="mb-2 text-text-primary">delete account</h3>
        <p className="mb-2 text-text-dim">
          permanently delete your account and all associated data. this cannot be undone.
        </p>
        {showDeleteAccountConfirm ? (
          <div>
            {/* eslint-disable-next-line asa-lowercase/lowercase-strings */}
            <p className="mb-2 text-status-error">
              type DELETE to confirm account deletion.
            </p>
            <div className="flex items-center gap-2">
              <input
                type="text"
                value={deleteConfirmText}
                onChange={(event) => setDeleteConfirmText(event.target.value)}
                placeholder="type DELETE" // eslint-disable-line asa-lowercase/lowercase-strings
                className="border border-border bg-background-primary px-3 py-2 text-text-primary outline-none placeholder:text-text-dim focus:border-status-error"
                autoFocus
              />
              <button
                onClick={() => deleteAccount.mutate()}
                disabled={deleteConfirmText !== "DELETE" || deleteAccount.isPending}
                className="border border-status-error px-4 py-2 text-status-error transition-colors hover:bg-status-error hover:text-background-primary disabled:opacity-50"
              >
                {deleteAccount.isPending ? "deleting ..." : "confirm delete"}
              </button>
              <button
                onClick={() => {
                  setShowDeleteAccountConfirm(false)
                  setDeleteConfirmText("")
                }}
                className="px-2 py-1 text-text-secondary transition-colors hover:text-text-primary"
              >
                cancel
              </button>
            </div>
          </div>
        ) : (
          <button
            onClick={() => setShowDeleteAccountConfirm(true)}
            className="border border-border px-3 py-1 text-text-secondary transition-colors hover:border-status-error hover:text-status-error"
          >
            delete account and all data
          </button>
        )}
      </div>
    </div>
  )
}