"use client";

import { useState } from "react";

const LEAVE_MS = 2300; // 연출 총 길이 (인트로 페이드 + 구름 걷힘)

// 구름 안쪽 가장자리의 뭉게 퍼프 (top%, size(vh), edgeOffset(%))
const PUFFS: Array<[number, number, number]> = [
  [-4, 26, -8],
  [12, 34, -3],
  [30, 28, -10],
  [46, 38, -2],
  [63, 30, -9],
  [78, 36, -4],
  [92, 27, -8],
];

function CloudHalf({ side }: { side: "left" | "right" }) {
  return (
    <div className={`intro-cloud intro-cloud-${side}`}>
      {/* 구름 본체 */}
      <div className="absolute inset-0 bg-white" style={{ filter: "blur(10px)" }} />
      {/* 안쪽 가장자리 뭉게뭉게 */}
      {PUFFS.map(([top, size, off], i) => (
        <div
          key={i}
          className="cloud-puff"
          style={{
            top: `${top}%`,
            [side === "left" ? "right" : "left"]: `${off}%`,
            width: `${size}vh`,
            height: `${size * 0.72}vh`,
          }}
        />
      ))}
    </div>
  );
}

/** 시작 화면: 타이틀 일러스트 + 시작하기 → 구름이 걷히며 마을 진입 */
export default function IntroScreen({ onDone }: { onDone: () => void }) {
  const [leaving, setLeaving] = useState(false);

  const start = () => {
    if (leaving) return;
    setLeaving(true);
    setTimeout(onDone, LEAVE_MS);
  };

  return (
    <div
      className={`fixed inset-0 z-[100] overflow-hidden ${leaving ? "intro-leaving pointer-events-none" : ""}`}
    >
      {/* 구름 레이어 (인트로 아래) — 인트로가 투명해지면 드러나고, 양옆으로 걷힘 */}
      <CloudHalf side="left" />
      <CloudHalf side="right" />

      {/* 타이틀 일러스트 */}
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        src="/assets/intro.png"
        alt="고양이 마을"
        className="absolute inset-0 h-full w-full object-cover transition-opacity duration-1000 ease-out"
        style={{ opacity: leaving ? 0 : 1 }}
      />

      {/* 시작하기 버튼 */}
      <div
        className="absolute inset-x-0 bottom-[16%] flex justify-center transition-opacity duration-500"
        style={{ opacity: leaving ? 0 : 1 }}
      >
        <button
          onClick={start}
          className="nature-btn animate-bounce-slow px-12 py-4 text-2xl shadow-2xl"
        >
          🐾 시작하기
        </button>
      </div>
    </div>
  );
}