'use client';
import Projects from "@/components/Projects";
import TimelineComponent from "@/components/timeline";
import Image from "next/image";
import DraggableWindow from "@/components/DraggableWindow";
import ReadmeWindow from "@/components/ReadmeWindow";
import Snowfall from 'react-snowfall';
import { useTheme } from "next-themes";
import { Banner } from "@/components/ui/banner";
import { LinkIcon, TreeDeciduous, TreePalmIcon, TreesIcon } from "lucide-react";
import { useState } from "react";
import Contact from "@/components/Contact";
import DraggableWindose from "@/components/DraggableWindose";
import TXT from "@/components/txt";

export default function Page() {
  const { theme } = useTheme();
  const [show, setShow] = useState(true);
  const [targetPosition, setTargetPosition] = useState<{ x: number; y: number } | null>(null);
  const [windowVisible, setWindowVisible] = useState(true);

  const handleTXTHover = (position: { x: number; y: number } | null) => {
    setTargetPosition(position);
    if (position) {
      setWindowVisible(true);
    }
  };

  return (
    <main className="min-h-screen w-screen overflow-y-scroll snap-y snap-mandatory relative">
      <Snowfall color={theme === 'dark' ? '#ffffff' : '#bcbcd6ff'} />

      <div className="max-w-3xl w-full flex flex-row h-auto mx-auto gap-4 items-center my-8 lg:px-0 px-8">
        <Image
          src="/Frame.svg"
          alt="logo"
          className="w-fit h-fit"
          width={30}
          height={30}
        />
        <h1 className="font-ntype text-3xl text-foreground/70">
          <a href="mailto:me@imnya.ng">me@imnya.ng</a>
        </h1>
      </div>
      <div className="max-w-3xl w-full flex mx-auto mb-8">
        <Contact />
      </div>
      <section id="about" className="w-full snap-start snap-always flex flex-col items-center justify-center px-8 lg:px-0">
        <div className="max-w-3xl w-full mb-8">
          <Banner
            show={show}
            onHide={() => setShow(false)}
            icon={
              <TreeDeciduous className="w-4 h-4 text-green-800" />
            }
            title={
              <>
                제 크리스마스 트리를 꾸며주세요!
              </>
            }
            action={{
              label: "트리 꾸미러 가기",
              onClick: () => window.open("https://imnya.ng/tree", "_blank"),
            }}
          />
        </div>

        <DraggableWindose targetPosition={targetPosition} isVisible={windowVisible} onClose={() => setWindowVisible(false)} onDragStart={() => setTargetPosition(null)} />
        <TXT onHover={handleTXTHover} />
        <div className="max-w-3xl w-full">
          <p>나의 <strong>어두움</strong>이 다른 사람들에겐 <strong>빛</strong>이 되길 바라는 <strong>개발자, 정보보안전문가</strong> 남현석입니다.</p>
          <p><strong>초등학교 시절 운영체제</strong>에 흥미를 느껴 컴퓨터를 시작했고, 이후 프로그래밍에 관심을 갖게 되었습니다.</p>
          <p><strong>초등학교 4학년 때 Python</strong>으로 프로그래밍을 시작했으며, 현재는 <strong>TypeScript</strong>를 주로 사용합니다.</p>
          <p>최근에는 정보보안 분야 중 <strong>웹 해킹</strong>에 관심이 많습니다.</p>
          <br />
          <ReadmeWindow />
          <br />
          <p>대표적인 프로젝트들은 아래와 같습니다.</p>
          <Projects />
          <br />
          <TimelineComponent />

          <div className="text-muted-foreground text-sm">
            <br />
            <p>© 2025 HyunSuk Nam. All rights reserved.</p>
            <p>이 웹사이트의 일부 이미지는 생성형 인공지능을 통해 제작되었습니다.</p>
            <br />
          </div>
        </div>
      </section>
    </main>
  );
}