'use client';

import { useState } from "react";

type VerificationState = 'initial' | 'sent' | 'verified' | 'failed' | 'changed';

type MenuAccountOptionProps = {
  verificationState: VerificationState;
  setVerificationState: (state: VerificationState) => void;
  deleteOpen?: boolean;
  setDeleteOpen?: (open: boolean) => void;
};

export default function MenuAccountOption({
  verificationState,
  setVerificationState,
  deleteOpen,
  setDeleteOpen,
}: MenuAccountOptionProps) {
  const [isOpen, setIsOpen] = useState(false);

  const itemClass = (active: boolean) =>
    [
      "relative inline-flex h-6 w-11 items-center rounded-full transition-colors",
      active ? "bg-blue-600" : "bg-gray-300",
    ].join(" ");

  const knobClass = (active: boolean) =>
    [
      "inline-block h-5 w-5 transform rounded-full bg-white transition",
      active ? "translate-x-5" : "translate-x-1",
    ].join(" ");

  const is = {
    initial: verificationState === 'initial',
    sent: verificationState === 'sent',
    verified: verificationState === 'verified',
    failed: verificationState === 'failed',
    changed: verificationState === 'changed',
  };

  return (
    <div>
      <button
        type="button"
        onClick={() => setIsOpen(!isOpen)}
        className={`fixed bottom-2 right-2 bg-red-400 cursor-pointer rounded-full w-[40px] h-[40px] shadow-xl z-100`}
      >
      </button>
      {isOpen && (
        <div className="fixed inset-0 flex items-center justify-center z-50">
          <div className="w-[500px] h-[600px] flex bg-white/80 p-10 border rounded-lg relative">
            <button
              type="button"
              aria-label="닫기"
              onClick={() => setIsOpen(false)}
              className="absolute top-3 right-3 inline-flex items-center justify-center rounded-full w-8 h-8 bg-gray-200 hover:bg-gray-300 text-gray-700"
            >
              ×
            </button>
            <div className="w-full h-full overflow-auto">
              <div className="mb-6">
                <p className="text-sm text-gray-700">현재 상태: <span className="font-semibold">{verificationState}</span></p>
              </div>
              <ul className="flex flex-col gap-4">
                <li className="flex items-center justify-between">
                  <p className="mr-4">초기 상태</p>
                  <button
                    type="button"
                    aria-label="초기 상태로 설정"
                    aria-pressed={is.initial}
                    onClick={() => setVerificationState('initial')}
                    className={itemClass(is.initial)}
                  >
                    <span className={knobClass(is.initial)} />
                  </button>
                </li>
                <li className="flex items-center justify-between">
                  <p className="mr-4">인증번호 전송 상태</p>
                  <button
                    type="button"
                    aria-label="인증번호 전송 상태로 설정"
                    aria-pressed={is.sent}
                    onClick={() => setVerificationState('sent')}
                    className={itemClass(is.sent)}
                  >
                    <span className={knobClass(is.sent)} />
                  </button>
                </li>
                <li className="flex items-center justify-between">
                  <p className="mr-4">인증 완료 상태</p>
                  <button
                    type="button"
                    aria-label="인증 완료 상태로 설정"
                    aria-pressed={is.verified}
                    onClick={() => setVerificationState('verified')}
                    className={itemClass(is.verified)}
                  >
                    <span className={knobClass(is.verified)} />
                  </button>
                </li>
                <li className="flex items-center justify-between">
                  <p className="mr-4">인증 실패 상태</p>
                  <button
                    type="button"
                    aria-label="인증 실패 상태로 설정"
                    aria-pressed={is.failed}
                    onClick={() => setVerificationState('failed')}
                    className={itemClass(is.failed)}
                  >
                    <span className={knobClass(is.failed)} />
                  </button>
                </li>
              </ul>
              <div className="mt-6 border-t pt-6">
                <li className="flex items-center justify-between">
                  <p className="mr-4">비밀번호 변경 완료 상태</p>
                  <button
                    type="button"
                    aria-label="비밀번호 변경 완료 상태로 설정"
                    aria-pressed={is.changed}
                    onClick={() =>
                      setVerificationState(is.changed ? 'initial' : 'changed')
                    }
                    className={itemClass(is.changed)}
                  >
                    <span className={knobClass(is.changed)} />
                  </button>
                </li>
                <li className="mt-4 flex items-center justify-between">
                  <p className="mr-4">회원 탈퇴 모달</p>
                  <button
                    type="button"
                    aria-label="회원 탈퇴 모달 토글"
                    aria-pressed={!!deleteOpen}
                    onClick={() => setDeleteOpen?.(!deleteOpen)}
                    className={itemClass(!!deleteOpen)}
                  >
                    <span className={knobClass(!!deleteOpen)} />
                  </button>
                </li>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}


