import Image from "next/image";
import { useState } from "react";
import { useIsMobile } from "@/hooks/use-mobile";
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";

interface TXTProps {
    onHover?: (position: { x: number; y: number } | null) => void;
}

export default function TXT({ onHover }: TXTProps) {
    const isMobile = useIsMobile();
    const [openInput, setOpenInput] = useState(false);
    const [openResult, setOpenResult] = useState(false);
    const [key, setKey] = useState("");
    const [error, setError] = useState("");
    const [content, setContent] = useState("");

    const handleSubmit = async () => {
        setError("");
        setContent("");
        try {
            const response = await fetch(`https://api.imnya.ng/secret?key=${encodeURIComponent(key)}`);
            const data = await response.text();
            if (data === "false") {
                setError("아니요?");
            } else {
                setOpenInput(false);
                setOpenResult(true);
                setContent(data);
            }
        } catch (_err) {
            console.error(_err);
            setError("오류가 발생했습니다");
        }
    };

    if (isMobile) return null;

    return (
        <>
            <button 
                type="button"
                className="flex flex-col items-center justify-center gap-4 absolute top-4 left-4 p-2 cursor-pointer font-galmuri drag-none select-none bg-transparent border-none"
                onMouseEnter={() => onHover?.({ x: 16, y: 16 })}
                onMouseLeave={() => onHover?.(null)}
                onClick={() => setOpenInput(true)}
            >
                <Image src="/txt.webp" alt="txt" width={24} height={24} />
                <span className="text-sm font-medium text-foreground/80 font-galmuri">비밀.txt</span>
            </button>
            <Dialog open={openInput} onOpenChange={setOpenInput}>
                <DialogContent>
                    <DialogHeader>
                        <DialogTitle>비밀 코드 입력</DialogTitle>
                        <DialogDescription>
                            비밀 코드를 입력하세요.
                        </DialogDescription>
                    </DialogHeader>
                    <div className="grid gap-4 py-4">
                        <Input
                            placeholder="비밀 코드"
                            value={key}
                            onChange={(e) => setKey(e.target.value)}
                        />
                        {error && <p className="text-red-500">{error}</p>}
                    </div>
                    <DialogFooter>
                        <Button onClick={handleSubmit}>확인</Button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>
            <Dialog open={openResult} onOpenChange={setOpenResult}>
                <DialogContent>
                    <DialogHeader>
                        <DialogTitle>비밀.txt</DialogTitle>
                        <DialogDescription>
                            {content.split('\n').map((line, idx) => (
                                <span key={idx}>
                                    {line}
                                    <br />
                                </span>
                            ))}
                        </DialogDescription>
                    </DialogHeader>
                    <DialogFooter>
                        <Button onClick={() => setOpenResult(false)}>닫기</Button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>
        </>
    );
}