"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import { toast } from "sonner";
import { Button } from "@/design-system/base/button";
import { Modal } from "@/design-system/overlay/modal";
import { actionDeleteAccount } from "@/modules/auth/auth-action";

interface DeleteAccountButtonProps {
  username: string;
}

export function DeleteAccountButton({ username }: DeleteAccountButtonProps) {
  const t = useTranslations("user_profile");
  const router = useRouter();
  const [showModal, setShowModal] = useState(false);
  const [confirmUsername, setConfirmUsername] = useState("");
  const [loading, setLoading] = useState(false);

  const handleDelete = async () => {
    if (confirmUsername !== username) {
      toast.error(t("deleteAccount.usernameMismatch"));
      return;
    }

    setLoading(true);
    try {
      const result = await actionDeleteAccount();
      if (result.success) {
        toast.success(t("deleteAccount.success"));
        router.push("/");
      } else {
        toast.error(result.message || t("deleteAccount.failed"));
      }
    } catch {
      toast.error(t("deleteAccount.failed"));
    } finally {
      setLoading(false);
      setShowModal(false);
    }
  };

  return (
    <>
      <button 
        onClick={() => setShowModal(true)}
        className="text-xs text-gray-400 hover:text-red-500 transition-colors"
      >
        {t("deleteAccount.button")}
      </button>

      <Modal open={showModal} onClose={() => setShowModal(false)}>
        <div className="p-6">
          <h2 className="text-xl font-bold text-red-600 mb-4">
            {t("deleteAccount.title")}
          </h2>
          
          <div className="space-y-4">
            <p className="text-gray-700">
              {t("deleteAccount.warning")}
            </p>
            
            <ul className="list-disc list-inside text-gray-600 text-sm space-y-1">
              <li>{t("deleteAccount.warningDecks")}</li>
              <li>{t("deleteAccount.warningCards")}</li>
              <li>{t("deleteAccount.warningHistory")}</li>
              <li>{t("deleteAccount.warningPermanent")}</li>
            </ul>

            <div className="mt-4">
              <label className="block text-sm font-medium text-gray-700 mb-2">
                {t("deleteAccount.confirmLabel")} <span className="font-mono font-bold">{username}</span>
              </label>
              <input
                type="text"
                value={confirmUsername}
                onChange={(e) => setConfirmUsername(e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500"
                placeholder={username}
              />
            </div>
          </div>

          <div className="flex justify-end gap-3 mt-6">
            <Button variant="secondary" onClick={() => setShowModal(false)}>
              {t("deleteAccount.cancel")}
            </Button>
            <Button 
              variant="error" 
              onClick={handleDelete} 
              loading={loading}
              disabled={confirmUsername !== username}
            >
              {t("deleteAccount.confirm")}
            </Button>
          </div>
        </div>
      </Modal>
    </>
  );
}