import React from "react";
import { Button } from "@/components/ui/button"
import {
    Dialog,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from "@/components/ui/dialog"

export default function SUPERCOMMAND() {
    const [keySequence, setKeySequence] = React.useState("");
    const [showDialog, setShowDialog] = React.useState(false);
    const targetSequence = "MAGICALWORLD";

    const handleKeyDown = (event: KeyboardEvent) => {
        // 영문자만 처리
        if (event.key.length === 1 && /[a-zA-Z]/.test(event.key)) {
            console.log(keySequence);
            console.log(targetSequence);
            console.log("Key pressed:", event.key);
            setKeySequence(prev => {
                const newSequence = prev + event.key;
                console.log("New sequence:", newSequence);

                // 목표 시퀀스와 정확히 일치하는지 확인 (대문자만)
                if (newSequence === targetSequence) {
                    console.log("Sequence matched!");
                    setShowDialog(true);
                    return "";
                }

                // 목표 시퀀스의 시작 부분과 일치하는지 확인 (대문자만)
                if (targetSequence.startsWith(newSequence)) {
                    return newSequence;
                }

                // 일치하지 않으면 현재 키부터 다시 시작
                const restartSequence = event.key;
                if (targetSequence.startsWith(restartSequence)) {
                    return restartSequence;
                }

                // 완전히 초기화
                return "";
            });
        } else {
            // 특수키나 숫자가 입력되면 시퀀스 초기화
            setKeySequence("");
        }
    };

    React.useEffect(() => {
        window.addEventListener("keydown", handleKeyDown);
        return () => {
            window.removeEventListener("keydown", handleKeyDown);
        };
    }, []);

    return (
        <Dialog open={showDialog} onOpenChange={setShowDialog}>
            <DialogContent className="flex flex-col gap-0 p-0 sm:max-h-[min(640px,80vh)] sm:max-w-lg [&>button:last-child]:top-3.5">
                <DialogHeader className="contents space-y-0 text-left">
                    <DialogTitle className="border-b px-6 py-4 text-base">
                        ???
                    </DialogTitle>
                    <div className="overflow-y-auto">
                        <DialogDescription asChild>
                            <div className="px-6 py-4">
                                <div className="[&_strong]:text-foreground space-y-4 [&_strong]:font-semibold pb-32">
                                    <p style={{ whiteSpace: 'pre-line' }}>{`마법소녀는 세상을 구했는데
어째서 나는 구원 받을 수 없는 거야?
누군가 도와주러 와줘

마법소녀는 세상을 구했는데
어째서 나는 구원 받을 수 없는 거야?
바라던 평화가 이루어진 순간에
저는 필요 없어진 아이인가요?
결국 편할대로 이용당해서
심정도 신체도 상처투성이고
이런 세상이라면 이젠 사라져버려

장점조차 없어서 자신을 사랑하지 못하고
무엇을 해봐도 실패뿐인 열등생이네
그럼에도 다른 누군가에게 필요해지길 원해서
나 마법소녀가 되어 다시 태어날 거야
모두의 감사에 채워져 가

하지만 언제부턴가 사람들에게 익숙해져
당연하게 되었어
마법소녀는 죽을 각오를 했는데
어째서 나는 보답받지 못하는 거야?
쌓인 불안이 해소된 순간에
저는 쓸모 없어지는 건가요?

타인의 불행으로 성립되는 평화에
의심조차 품지 않고 살아가다니
어이없는 놈들이네
이런 세상은 전부 전부 싫어져서
믿을 수 있는 것조차 사라지고
변하지 못하고 돌아오지 못하고
이젠 어떡할 수 없어 괴로워

마법소녀는 세상을 구했는데
어째서 나는 구원 받을 수 없는 거야?
누군가 누군가 가르쳐줘 부탁이야
모두의 감사가 힘이 된다
하지만 언제부턴가 그 수는 줄고
어라 나 바보 같아
마법소녀는 희망을 잃어버리고
눈물과 같이 흘러내려

마법소녀는 세상을 구했는데
어째서 나는 구원 받을 수 없는 거야?
바라던 평화가 이루어진 순간에
저는 필요없어진 아이인가요?
결국 편할대로 이용당해서
심정도 신체도 상처투성이고
마법이 풀려가

이런 세상 전부 전부 부숴버리고
행복한 결말을 찾아
이걸로 괜찮아 이걸로 괜찮아
근데 어째서 마음이 답답한 거야?

마법소녀는 세상을 부쉈는데
어째서 나는 구원 받을 수 없는 거야?
누군가 누군가 빨리 빨리
나를 데려가 줘
절망의 늪에서 작별을 고했어`}
                                    </p>
                                </div>
                            </div>
                        </DialogDescription>
                        <DialogFooter className="px-6 py-6 sm:justify-start fixed bottom-0 left-0 w-full bg-background/80 backdrop-blur-sm">
                            <Button type="button">Okay</Button>
                        </DialogFooter>
                    </div>
                </DialogHeader>
            </DialogContent>
        </Dialog>
    );
}
