"use client"
import Image from "next/image";
import { Button as BaseButton } from "@base-ui/react/button";
import { Button } from "@/components/ui/button"
import { useTimerStore } from "@/zustand"
import { m, AnimatePresence } from "motion/react"
import { Bell, BellSlash, Pause, Play, X, MusicNote, Timer, Microphone, ShareNetwork, Monitor, Circle } from "@phosphor-icons/react"
import Link from "next/link"
import { useEffect, useMemo, useState, type KeyboardEvent } from "react"

type DynamicIslandState = "idle" | "ring" | "timer" | "recording" | "music" | "airdrop" | "screen-recording"

const formatTime = (t: number) => {
  const minutes = String(Math.floor(t / 60)).padStart(1, "0")
  const seconds = String(t % 60).padStart(2, "0")
  return `${minutes}:${seconds}`
}

const buttonConfigs = [
  { state: "idle" as const, icon: Circle, label: "Idle" },
  { state: "ring" as const, icon: Bell, label: "Ring" },
  { state: "timer" as const, icon: Timer, label: "Timer" },
  { state: "recording" as const, icon: Microphone, label: "Recording" },
  { state: "music" as const, icon: MusicNote, label: "Music" },
  { state: "airdrop" as const, icon: ShareNetwork, label: "AirDrop" },
  { state: "screen-recording" as const, icon: Monitor, label: "Screen" },
]

export default function DynamicIsland() {
  const [currentState, setCurrentState] = useState<DynamicIslandState>("idle")
  const [isSilent, setIsSilent] = useState(false)
  const [recordingBars, setRecordingBars] = useState(() => Array.from({ length: 20 }, (_, id) => ({ id, height: 5 })))
  const [musicBars, setMusicBars] = useState(() => Array.from({ length: 6 }, (_, id) => ({ id, height: 5 })))
  const [screenRecordingSeconds, setScreenRecordingSeconds] = useState(0)
  const [screenRecordingStopped, setScreenRecordingStopped] = useState(false)

  const { time, isRunning, start, pause, reset } = useTimerStore()

  // Ring animation effect
  useEffect(() => {
    if (currentState === "ring") {
      const interval = setInterval(() => {
        setIsSilent((prev) => !prev)
      }, 3000)
      return () => clearInterval(interval)
    }
  }, [currentState])

  useEffect(() => {
    if (currentState !== "timer") {
      reset()
      pause()
    }
  }, [currentState, reset, pause])

  // Recording bars animation
  useEffect(() => {
    if (currentState === "recording") {
      start()
      const interval = setInterval(() => {
        setRecordingBars((bars) => bars.map((bar) => ({ ...bar, height: Math.floor(Math.random() * 10) + 3 })))
      }, 200)
      return () => clearInterval(interval)
    }
  }, [currentState, start])

  // Music bars animation
  useEffect(() => {
    if (currentState === "music") {
      let interval: NodeJS.Timeout
      if (isRunning) {
        interval = setInterval(() => {
          setMusicBars((prev) => prev.map((bar) => ({ ...bar, height: Math.floor(Math.random() * 14) + 4 })))
        }, 200)
      }
      return () => clearInterval(interval)
    }
  }, [currentState, isRunning])

  // Screen recording timer
  useEffect(() => {
    if (currentState === "screen-recording" && !screenRecordingStopped) {
      setScreenRecordingSeconds(0)
      setScreenRecordingStopped(false)
      const timer = setInterval(() => {
        setScreenRecordingSeconds((prev) => (prev < 11 ? prev + 1 : prev))
      }, 1000)
      return () => clearInterval(timer)
    }
  }, [currentState, screenRecordingStopped])

  // Reset states when switching
  useEffect(() => {
    if (currentState === "timer") {
      // Timer keeps its state
    } else if (currentState === "screen-recording") {
      setScreenRecordingSeconds(0)
      setScreenRecordingStopped(false)
    }
  }, [currentState])

  const dimensions = useMemo(() => {
    switch (currentState) {
      case "idle":
        return { width: 96, height: 28 }
      case "ring":
        return { width: isSilent ? 140 : 120, height: 28 }
      case "timer":
        return { width: 284, height: 64 }
      case "recording":
        return { width: 200, height: 28 }
      case "music":
        return { width: 320, height: 280 }
      case "airdrop":
        return { width: 284, height: 180 }
      case "screen-recording":
        return { width: 288, height: 64 }
      default:
        return { width: 96, height: 28 }
    }
  }, [currentState, isSilent])

  const renderContent = () => {
    switch (currentState) {
      case "idle":
        return null

      case "ring":
        return (
          <AnimatePresence mode="wait" initial={false}>
            {!isSilent ? (
              <m.div
                key="ring"
                className="flex items-center justify-between w-full px-3 text-white"
                initial={{ opacity: 0, y: 8 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -8 }}
                transition={{ duration: 0.12, ease: [0.23, 1, 0.32, 1] }}
              >
                <Bell className="w-4 h-4" />
                <span className="text-sm font-medium">Ring</span>
              </m.div>
            ) : (
              <m.div
                key="silent"
                className="flex items-center justify-between w-full px-3"
                initial={{ opacity: 0, y: 8 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -8 }}
                transition={{ duration: 0.12, ease: [0.23, 1, 0.32, 1] }}
              >
                <m.div
                  className="flex items-center justify-center bg-orange-600 rounded-full h-5 w-5"
                  initial={{ scale: 0.5 }}
                  animate={{ scale: 1 }}
                  transition={{ type: "spring", duration: 0.4, bounce: 0.25 }}
                >
                  <BellSlash className="w-3 h-3 text-white" />
                </m.div>
                <span className="text-sm text-orange-500 font-medium">Silent</span>
              </m.div>
            )}
          </AnimatePresence>
        )

      case "timer":
        const timeString = formatTime(time)
        return (
          <div className="flex items-center justify-between w-full gap-6 py-2 pl-2.5 pr-5">
            <m.div className="text-white flex items-center justify-center gap-2 px-1">
              <Button
                onClick={isRunning ? pause : start}
                className="flex justify-center items-center text-xl cursor-pointer bg-[#694608] hover:bg-[#694608] rounded-full h-10 w-10"
              >
                {isRunning ? <Pause className="w-4 h-4 text-[#FDB000]" /> : <Play className="w-4 h-4 text-[#FDB000]" />}
              </Button>
              <Button
                onClick={reset}
                className="flex justify-center items-center text-xl bg-neutral-700 hover:bg-accent cursor-pointer text-white rounded-full h-10 w-10"
              >
                <X className="h-4 w-4 text-4xl font-bold" />
              </Button>
            </m.div>
            <div className="flex items-center gap-3 text-white px-1">
              <div className="text-sm font-medium flex items-end justify-end">Timer</div>
              <div className="flex text-3xl font-semibold leading-none">
                {timeString.split("").map((char) => (
                  <div key={char} className="relative w-[18px] flex justify-center items-center">
                    <AnimatePresence mode="wait">
                      <m.span
                        key={char}
                        initial={{ y: 14, opacity: 0 }}
                        animate={{ y: 0, opacity: 1 }}
                        exit={{ y: -14, opacity: 0 }}
                        transition={{ duration: 0.2, ease: [0.77, 0, 0.175, 1] }}
                        className="absolute"
                      >
                        {char}
                      </m.span>
                    </AnimatePresence>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )

      case "recording":
        return (
          <div className="flex items-center justify-between w-full px-2 gap-2">
            <div className="flex items-center gap-[2px] h-full">
              {recordingBars.map((bar) => (
                <m.div
                  key={bar.id}
                  animate={{ scaleY: bar.height / 20 }}
                  style={{ transformOrigin: "bottom" }}
                  transition={{ type: "spring", stiffness: 300, damping: 15, mass: 0.5 }}
                  className="w-[4px] bg-[#FD4F30] rounded-sm h-5"
                />
              ))}
            </div>
            <div className="text-[#FD4F30] text-sm font-mono">{formatTime(time)}</div>
          </div>
        )

      case "music":
        const totalTime = 120
        const progress = (time / totalTime) * 100
        const remainingTime = totalTime - time

        const handlePlayPause = () => {
          if (time >= totalTime) {
            reset()
            setTimeout(start, 100)
          } else if (isRunning) {
            pause()
          } else {
            start()
          }
        }

        return (
          <div className="w-full h-full px-5 py-4 flex flex-col justify-between">
            {/* Top Section: Album + Title + Bars */}
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-4">
                <div className="w-14 h-14 rounded-2xl bg-linear-to-b from-orange-400 to-pink-600 flex items-center justify-center shadow-md">
                  <div className="w-9 h-9 rounded-lg bg-linear-to-b from-orange-300 to-pink-500" />
                </div>
                <div>
                  <div className="text-white font-semibold text-lg">Glow</div>
                  <div className="text-neutral-400 text-sm">Echo</div>
                </div>
              </div>
              <div className="flex items-end gap-[3px] h-7">
                {musicBars.map((bar) => (
                  <m.div
                    key={bar.id}
                    className="w-[3px] bg-blue-400 rounded-full"
                    animate={{ scaleY: isRunning ? bar.height / 8 : 1 }}
                    style={{ transformOrigin: "bottom" }}
                    transition={{ type: "spring", stiffness: 280, damping: 14, mass: 0.4 }}
                  />
                ))}
              </div>
            </div>

            {/* Progress Bar + Time */}
            <div className="space-y-2">
              <div className="flex justify-between text-white/80 text-xs">
                <span>{formatTime(time)}</span>
                <span>-{formatTime(remainingTime)}</span>
              </div>
              <div className="w-full h-1.5 bg-neutral-700 rounded-full overflow-hidden">
                <m.div
                  className="h-full bg-white rounded-full"
                  style={{ width: `${progress}%` }}
                  transition={{ duration: 0.1 }}
                />
              </div>
            </div>

            {/* Controls (fixed height row so icons don't affect layout) */}
            <div className="flex items-center justify-center gap-8 h-16">
              {/* Reset */}
              <MotionBaseButton
                whileHover={{ scale: 1.1 }}
                className="text-white rounded-full hover:bg-white/10 transition h-12 w-12 flex items-center justify-center"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 16 16"
                  className="w-7 h-7 fill-current"
                  style={{ transform: "scaleX(-1)" }}
                >
                  <path d="M7.596 7.304a.802.802 0 0 1 0 1.392l-6.363 3.692C.713 12.69 0 12.345 0 11.692V4.308c0-.653.713-.998 1.233-.696z"></path>
                  <path d="M15.596 7.304a.802.802 0 0 1 0 1.392l-6.363 3.692C8.713 12.69 8 12.345 8 11.692V4.308c0-.653.713-.998 1.233-.696z"></path>
                </svg>
              </MotionBaseButton>

              {/* Play / Pause */}
              <MotionBaseButton
                whileHover={{ scale: 1.1 }}
                onClick={handlePlayPause}
                className="text-white rounded-full backdrop-blur-md shadow-md h-14 w-14 flex items-center justify-center"
              >
                {isRunning ? (
                  <svg viewBox="0 0 10 13" className="w-7 h-7 fill-current text-neutral-200">
                    <path d="M1.0 12.7H2.8C3.5 12.7 3.9 12.4 3.9 11.7V1.0C3.9 0.3 3.5 0 2.8 0H1.0C0.4 0 0 0.4 0 1.0V11.7C0 12.4 0.4 12.7 1.0 12.7ZM6.7 12.7H8.5C9.2 12.7 9.5 12.4 9.5 11.7V1.0C9.5 0.3 9.2 0 8.5 0H6.7C6.0 0 5.7 0.4 5.7 1.0V11.7C5.7 12.4 6.0 12.7 6.7 12.7Z"></path>
                  </svg>
                ) : (
                  <svg viewBox="0 0 12 14" className="w-8 h-8 fill-current text-neutral-200">
                    <path d="M0.9 13.2C1.3 13.2 1.5 13.1 1.8 12.9L10.9 7.7C11.6 7.3 11.8 7 11.8 6.6C11.8 6.2 11.6 6 10.9 5.6L1.8 0.3C1.5 0.1 1.3 0 0.9 0C0.4 0 0 0.5 0 1.1V12.1C0 12.8 0.4 13.2 0.9 13.2Z"></path>
                  </svg>
                )}
              </MotionBaseButton>

              {/* Pause (second skip) */}
              <MotionBaseButton
                whileHover={{ scale: 1.1 }}
                className="text-white rounded-full hover:bg-white/10 transition h-12 w-12 flex items-center justify-center"
              >
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" className="w-7 h-7 fill-current">
                  <path d="M7.596 7.304a.802.802 0 0 1 0 1.392l-6.363 3.692C.713 12.69 0 12.345 0 11.692V4.308c0-.653.713-.998 1.233-.696z"></path>
                  <path d="M15.596 7.304a.802.802 0 0 1 0 1.392l-6.363 3.692C8.713 12.69 8 12.345 8 11.692V4.308c0-.653.713-.998 1.233-.696z"></path>
                </svg>
              </MotionBaseButton>
            </div>
          </div>
        )

      case "airdrop":
        return (
          <div className="flex w-full flex-col gap-2 p-4">
            <div className="flex w-full items-center justify-between">
              <div className="flex w-2/3 flex-col items-start gap-2">
                <div className="relative flex h-10 w-10 items-center justify-center">
                  <svg
                    width="598"
                    height="525"
                    viewBox="2 25 598 525"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    className="size-12 text-[#159BF4]"
                  >
                    <path
                      d="M245.089 398.614C238.706 404.993 228.716 406.384 221.532 400.924C203.536 387.245 189.405 368.982 180.699 347.924C170.034 322.127 168.094 293.551 175.175 266.549C182.256 239.547 197.97 215.6 219.923 198.357C241.876 181.114 268.864 171.52 296.775 171.038C324.686 170.555 351.989 179.21 374.525 195.684C397.061 212.158 413.594 235.547 421.605 262.288C429.615 289.029 428.664 317.655 418.897 343.806C411.012 364.916 397.731 383.478 380.5 397.709C373.258 403.691 362.781 402.418 356.139 395.776C346.376 386.014 349.309 369.308 359.107 359.581C366.113 352.625 371.91 344.457 376.18 335.396C384.498 317.745 386.515 297.776 381.894 278.817C377.274 259.859 366.296 243.057 350.79 231.211C335.284 219.365 316.186 213.192 296.68 213.719C277.174 214.247 258.438 221.444 243.595 234.111C228.752 246.777 218.698 264.149 215.109 283.329C211.521 302.509 214.615 322.34 223.875 339.516C228.413 347.934 234.298 355.465 241.238 361.845C251.62 371.389 255.064 388.646 245.089 398.614Z"
                      fill="currentColor"
                    ></path>
                    <path
                      d="M256.333 299C256.333 310.316 260.829 321.168 268.83 329.17C276.832 337.171 287.684 341.667 299 341.667C310.316 341.667 321.168 337.171 329.17 329.17C337.171 321.168 341.667 310.316 341.667 299C341.667 287.684 337.171 276.832 329.17 268.83C321.168 260.829 310.316 256.333 299 256.333C287.684 256.333 276.832 260.829 268.83 268.83C260.829 276.832 256.333 287.684 256.333 299Z"
                      fill="currentColor"
                    ></path>
                  </svg>
                  <Image
                    src="https://skiper-ui.com/mac/user.png"
                    alt="user"
                    width={24}
                    height={24}
                    className="absolute -right-1 bottom-0 rounded-full"
                  />
                </div>
                <div className="text-white">
                  <h1 className="text-sm font-medium">AirDrop</h1>
                  <p className="mr-2 text-xs leading-4">
                    <Link className="text-blue-500" href={"https://x.com/ZingadePiyush"}>
                      Piyush
                    </Link>{" "}
                    would like to share UI components with you all.
                  </p>
                </div>
              </div>
              <div className="h-24 w-24 overflow-hidden rounded-2xl">
                <Image
                  src="https://skiper-ui.com/mac/japan.webp"
                  alt="preview"
                  width={96}
                  height={96}
                  className="size-full object-cover"
                />
              </div>
            </div>
            <div className="flex w-full gap-2 font-medium mt-3">
              <MotionBaseButton
                whileTap={{ scale: 0.9 }}
                transition={{ type: "spring", stiffness: 400, damping: 17 }}
                className="w-1/2 rounded-full cursor-pointer bg-neutral-700 py-1.5 text-white"
              >
                Decline
              </MotionBaseButton>
              <MotionBaseButton
                whileTap={{ scale: 0.9 }}
                transition={{ type: "spring", stiffness: 400, damping: 17 }}
                className="w-1/2 rounded-full cursor-pointer bg-[#012B59] py-1 text-[#159BF4]"
              >
                Accept
              </MotionBaseButton>
            </div>
          </div>
        )

      case "screen-recording":
        const showPreview = screenRecordingSeconds >= 11 || screenRecordingStopped
        return (
          <div className="flex w-full items-center justify-between gap-2 p-4">
            <div className="gap-2 space-y-1 text-white">
              <div className="flex items-center gap-1">
                {!showPreview && (
                  <m.div
                    className="size-3 rounded-full bg-red-500"
                    animate={{ opacity: [1, 0.3, 1] }}
                    transition={{ duration: 1, repeat: Number.POSITIVE_INFINITY }}
                  />
                )}
                <m.p
                  className="text-red-500 text-sm"
                  animate={!showPreview ? { opacity: [1, 0.4, 1] } : {}}
                  transition={{ duration: 0.5, repeat: Number.POSITIVE_INFINITY }}
                >
                  {`0:${screenRecordingSeconds.toString().padStart(2, "0")}`}
                </m.p>
              </div>
              <div className="w-30 relative flex h-5 items-center justify-center">
                <m.h1
                  key={showPreview ? "saved" : "recording"}
                  initial={{ opacity: 0, y: 4 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.3, ease: [0.23, 1, 0.32, 1] }}
                  className="absolute w-full text-sm text-white"
                >
                  {showPreview ? "Recording Saved" : "Recording..."}
                </m.h1>
              </div>
            </div>
            <div className="flex justify-end">
              <div className="relative flex size-10 items-center justify-center">
                {!showPreview && (
                  <>
                    <m.svg
                      className="absolute inset-0 text-white"
                      viewBox="0 0 50 50"
                      animate={{ rotate: 360 }}
                      transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY, ease: "linear" }}
                    >
                      <circle
                        strokeLinecap="round"
                        strokeWidth="3"
                        stroke="currentColor"
                        fill="transparent"
                        r="23.5"
                        cx="25"
                        cy="25"
                        pathLength="1"
                        strokeDasharray="1px 1px"
                        opacity="0.5"
                      />
                    </m.svg>
                    <m.div
                      className="z-10 size-3.5 rounded-sm bg-red-500"
                      animate={{ scale: [1, 1.2, 1] }}
                      transition={{ duration: 1.2, repeat: Number.POSITIVE_INFINITY }}
                    />
                  </>
                )}
                {showPreview && (
                  <m.div
                    className="absolute inset-0 size-12 overflow-hidden rounded-full"
                    initial={{ scale: 0.95 }}
                    animate={{ scale: 1 }}
                    transition={{ type: "spring", duration: 0.5, bounce: 0.3 }}
                  >
                  <Image
                    alt="preview"
                    src="https://skiper-ui.com/mac/japan.webp"
                    width={48}
                    height={48}
                    className="object-cover w-full h-full"
                  />
                  </m.div>
                )}
                {!showPreview && (
                  <button onClick={() => setScreenRecordingStopped(true)} className="absolute inset-0 cursor-pointer" aria-label="Stop screen recording" />
                )}
              </div>
            </div>
          </div>
        )

      default:
        return null
    }
  }

  return (
    <div className="flex flex-col items-center gap-8 p-8">
      {/* Dynamic Island */}
      <div className="flex items-center justify-center" role="region" aria-label="Dynamic Island" style={{ height: "300px" }}>
        <m.div
          layoutId="dynamic-island"
          className="bg-neutral-950 rounded-2xl flex items-center justify-center overflow-hidden"
          animate={{
            scaleX: dimensions.width / 96,
            scaleY: dimensions.height / 28,
          }}
          transition={{
            type: "spring",
            duration: 0.5,
            bounce: 0.18,
          }}
        >
          <AnimatePresence mode="wait">
            <m.div
              key={currentState}
              initial={{ opacity: 0, scale: 0.92 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.95 }}
              transition={{ duration: 0.18, ease: [0.23, 1, 0.32, 1] }}
              className="w-full h-full flex items-center justify-center"
            >
              {renderContent()}
            </m.div>
          </AnimatePresence>
        </m.div>
      </div>

      {/* Control Buttons */}
      <div className="flex flex-wrap gap-3 justify-center max-w-md">
        {buttonConfigs.map(({ state, icon: Icon, label }) => (
          <MotionBaseButton
            key={state}
            onClick={() => setCurrentState(state)}
            onKeyDown={(e: KeyboardEvent) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setCurrentState(state); } }}
            className={`flex items-center gap-2 px-4 py-2 rounded-full transition-colors ${currentState === state ? "bg-blue-600 text-white" : "bg-neutral-700 text-neutral-300 hover:bg-neutral-600"
              }`}
            whileHover={{ scale: 1.04 }}
            whileTap={{ scale: 0.96 }}
            transition={{ type: "spring", duration: 0.3, bounce: 0.15 }}
          >
            <Icon className="w-4 h-4" />
            <span className="text-sm font-medium">{label}</span>
          </MotionBaseButton>
        ))}
      </div>
    </div>
  )
}


const MotionBaseButton = m.create(BaseButton as any);