"use client";
import { useDeleteAccount } from "@/state/profile/profile.action";
import { Trash2 } from "lucide-react";
import { useSession, signOut } from "next-auth/react";
import { useLogout } from "@/state/auth/auth.action";
import { useQueryClient } from "@tanstack/react-query";
import React, { useState, useEffect } from "react";

const DeleteAccount: React.FC = () => {
  const { data: session, status } = useSession();
  const [email, setEmail] = useState("");

  const { mutate: deleteAccount } = useDeleteAccount();
  const { mutate: logOut } = useLogout();
  const queryClient = useQueryClient();
  useEffect(() => {
    if (session?.user?.email) {
      setEmail(session.user.email);
    }
  }, [session]);

  if (status === "loading") {
    return <p className="pt-[120px] text-center">Checking session...</p>;
  }

  const userIdGet = session?.user?.id;

  if (!userIdGet) {
    return (
      <div className="min-h-screen flex items-center justify-center pt-[80px] px-4">
        <div className="bg-white shadow-xl rounded-2xl p-8 max-w-md w-full text-center">
          {/* Icon */}
          <div className="flex justify-center mb-4">
            <Trash2 className="w-14 h-14 text-red-600" />
          </div>

          {/* Title */}
          <h1 className="text-2xl font-semibold text-gray-900 mb-2">
            Login Required
          </h1>

          {/* Message */}
          <p className="text-gray-700 mb-6">
            Please login to delete your account.
          </p>
        </div>
      </div>
    );
  }

  const handelDeleteAccount = () => {
    deleteAccount(userIdGet, {
      onSuccess: async () => {
        // Log out the user after successful account deletion
        logOut(
          { id: "", payload: {} },
          {
            onSuccess: async () => {
              await signOut({ redirect: false });

              // Clear local/session state
              window.localStorage.clear();
              queryClient.clear();

              // Redirect to homepage
              window.location.href = "/";
            },
            onError: (err) => {
              console.error("Error during logout:", err);
              // Even if logout fails, still sign out from next-auth
              signOut({ redirect: true, callbackUrl: "/" });
            },
          }
        );
      },
      onError: (error: Error) => {
        console.error("Error deleting account:", error.message);
      },
    });
  };

  return (
    <div className="container pt-[120px] mx-auto p-6 space-y-6">
      <h1 className="text-3xl font-bold text-white">Delete Account</h1>

      <p className="text-white">
        Enter your email address below to request deletion of your account.
      </p>

      {/* Input Field */}
      <div className="space-y-2">
        <label className="block font-medium text-white">Email Address</label>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="Enter your email"
          className="w-full border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-red-500"
        />
      </div>

      {/* Delete Button */}
      <button
        className="bg-red-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-red-700 transition cursor-pointer"
        onClick={handelDeleteAccount}
      >
        Delete My Account
      </button>
    </div>
  );
};

export default DeleteAccount;