"use client";

import { useState } from "react";

/* ─── Icons (Hugeicon-style inline SVG) ─── */

function PauseIcon({ size = 32 }: { size?: number }) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 32 32"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M16 2C19.713 2 23.274 3.475 25.8995 6.1005C28.525 8.72601 30 12.287 30 16C30 19.713 28.525 23.274 25.8995 25.8995C23.274 28.525 19.713 30 16 30C12.287 30 8.72601 28.525 6.1005 25.8995C3.475 23.274 2 19.713 2 16C2 12.287 3.475 8.72601 6.1005 6.1005C8.72601 3.475 12.287 2 16 2ZM12.5 10.5C11.9696 10.5 11.4609 10.7107 11.0858 11.0858C10.7107 11.4609 10.5 11.9696 10.5 12.5V19.5C10.5 20.0304 10.7107 20.5391 11.0858 20.9142C11.4609 21.2893 11.9696 21.5 12.5 21.5C13.0304 21.5 13.5391 21.2893 13.9142 20.9142C14.2893 20.5391 14.5 20.0304 14.5 19.5V12.5C14.5 11.9696 14.2893 11.4609 13.9142 11.0858C13.5391 10.7107 13.0304 10.5 12.5 10.5ZM19.5 10.5C18.9696 10.5 18.4609 10.7107 18.0858 11.0858C17.7107 11.4609 17.5 11.9696 17.5 12.5V19.5C17.5 20.0304 17.7107 20.5391 18.0858 20.9142C18.4609 21.2893 18.9696 21.5 19.5 21.5C20.0304 21.5 20.5391 21.2893 20.9142 20.9142C21.2893 20.5391 21.5 20.0304 21.5 19.5V12.5C21.5 11.9696 21.2893 11.4609 20.9142 11.0858C20.5391 10.7107 20.0304 10.5 19.5 10.5Z"
        fill="currentColor"
      />
    </svg>
  );
}

function PlayIcon({ size = 32 }: { size?: number }) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 32 32"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14 14-6.268 14-14S23.732 2 16 2Zm-2.5 19.5V10.5a1 1 0 0 1 1.5-.866l8 5a1 1 0 0 1 0 1.732l-8 5a1 1 0 0 1-1.5-.866Z"
        fill="currentColor"
      />
    </svg>
  );
}

/* ─── Track list data ─── */

const TRACKS = [
  { title: "Eyes Closed", cover: "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/heroui-pro-landing/small-album-1.webp" },
  { title: "Hymn for the Weekend", cover: "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/heroui-pro-landing/small-album-2.webp" },
  { title: "Something Just Like This", cover: "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/heroui-pro-landing/small-album-3.webp" },
];

/* ─── Glass Player ─── */

export default function GlassPlayer() {
  const [playing, setPlaying] = useState(true);
  const [expanded, setExpanded] = useState(false);

  return (
    <div
      style={{
        position: "relative",
        width: 401,
        height: 367,
        minHeight: 367,
        overflow: "clip",
        background: "#f4f4f5",
        borderRadius: 20,
        fontFamily:
          '-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif',
      }}
    >
      {/* ── Main content ── */}
      <div
        style={{
          position: "absolute",
          top: 25,
          left: 25,
          right: 25,
          display: "flex",
          alignItems: "flex-start",
          gap: 16,
        }}
      >
        {/* Album cover */}
        <img
          alt="Demons"
          src="/player-cover.png"
          style={{
            width: 116,
            height: 116,
            flexShrink: 0,
            objectFit: "cover",
            mixBlendMode: "luminosity",
            borderRadius: 14,
            boxShadow: "0 4px 25px 0 rgba(0,0,0,0.34)",
          }}
        />

        {/* Title & controls */}
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            gap: 12,
            paddingTop: 4,
            minWidth: 0,
          }}
        >
          <div style={{ display: "flex", flexDirection: "column" }}>
            <p
              style={{
                margin: 0,
                fontSize: 20,
                fontWeight: 600,
                lineHeight: 1.34,
                color: "#18181b",
              }}
            >
              Demons
            </p>
            <p
              style={{
                margin: 0,
                fontSize: 12,
                fontWeight: 500,
                lineHeight: 1.34,
                color: "#71717a",
                opacity: 0.5,
                whiteSpace: "nowrap",
              }}
            >
              Single By John Smith
            </p>
          </div>

          {/* Buttons */}
          <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
            <button
              onClick={() => setPlaying(!playing)}
              style={{
                width: 74,
                height: 32,
                borderRadius: 9999,
                border: "1px solid rgba(24,24,27,0.08)",
                background: "rgba(24,24,27,0.04)",
                color: "#18181b",
                fontSize: 13,
                fontWeight: 500,
                cursor: "pointer",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              {playing ? "Pause" : "Play"}
            </button>
            <button
              style={{
                height: 32,
                padding: "0 14px",
                borderRadius: 9999,
                border: "none",
                background: "transparent",
                color: "#71717a",
                fontSize: 13,
                fontWeight: 500,
                cursor: "pointer",
              }}
            >
              Save
            </button>
          </div>
        </div>
      </div>

      {/* ── Track list ── */}
      <div
        style={{
          position: "absolute",
          left: 25,
          top: 175,
          display: "flex",
          flexDirection: "column",
          gap: 11,
          width: 351,
        }}
      >
        {TRACKS.map((track, i) => (
          <div key={track.title}>
            <div
              style={{
                display: "flex",
                alignItems: "center",
                gap: 22,
              }}
            >
              <img
                alt={track.title}
                src={track.cover}
                style={{
                  width: 26,
                  height: 26,
                  flexShrink: 0,
                  objectFit: "cover",
                  borderRadius: 16,
                }}
              />
              <p
                style={{
                  margin: 0,
                  fontSize: 14,
                  fontWeight: 500,
                  lineHeight: 1.34,
                  color: "#71717a",
                }}
              >
                {track.title}
              </p>
            </div>
            {i < TRACKS.length - 1 && (
              <div
                style={{
                  marginTop: 11,
                  height: 1,
                  width: "100%",
                  background: "#e4e4e7",
                  opacity: 0.5,
                }}
              />
            )}
          </div>
        ))}
      </div>

      {/* ── Floating glass mini-player ── */}
      <div
        onClick={() => setExpanded(!expanded)}
        style={{
          position: "absolute",
          zIndex: 20,
          cursor: "pointer",
          overflow: "hidden",

          /* ▼ Glass recipe */
          background: "rgba(255,255,255,0.6)",
          backdropFilter: "blur(40px)",
          WebkitBackdropFilter: "blur(40px)",
          border: "1px solid rgba(255,255,255,0.2)",
          boxShadow:
            "0 4px 12.5px 0 rgba(0,0,0,0.08), 0 0 4px 0 rgba(255,255,255,0.9) inset",

          /* ▼ Animated geometry */
          borderRadius: expanded ? 20 : 32,
          height: expanded ? 220 : 52,
          width: expanded ? 351 : 200,
          left: expanded ? 25 : "calc(50% - 100px)",
          top: expanded ? 130 : "calc(100% - 72px)",

          transition: [
            "top 500ms cubic-bezier(0.23, 1, 0.32, 1)",
            "left 500ms cubic-bezier(0.23, 1, 0.32, 1)",
            "width 500ms cubic-bezier(0.23, 1, 0.32, 1)",
            "height 500ms cubic-bezier(0.23, 1, 0.32, 1)",
            "border-radius 500ms cubic-bezier(0.23, 1, 0.32, 1)",
            "box-shadow 200ms cubic-bezier(0.23, 1, 0.32, 1)",
            "background-color 500ms cubic-bezier(0.23, 1, 0.32, 1)",
            "border-color 500ms cubic-bezier(0.23, 1, 0.32, 1)",
          ].join(", "),
        }}
      >
        {/* Mini album art */}
        <img
          alt="Demons"
          src="/player-cover.png"
          style={{
            position: "absolute",
            objectFit: "cover",
            mixBlendMode: "luminosity",
            boxShadow: "0 4px 25px 0 rgba(0,0,0,0.34)",

            borderRadius: expanded ? 12 : 16,
            width: expanded ? 42 : 29,
            height: expanded ? 42 : 29,
            left: expanded ? 20 : 16,
            top: expanded ? 16 : 11.5,

            transition: [
              "top 500ms cubic-bezier(0.23, 1, 0.32, 1)",
              "left 500ms cubic-bezier(0.23, 1, 0.32, 1)",
              "width 500ms cubic-bezier(0.23, 1, 0.32, 1)",
              "height 500ms cubic-bezier(0.23, 1, 0.32, 1)",
              "border-radius 500ms cubic-bezier(0.23, 1, 0.32, 1)",
            ].join(", "),
          }}
        />

        {/* Mini text */}
        <div
          style={{
            position: "absolute",
            whiteSpace: "nowrap",
            fontSize: 12,
            fontWeight: 500,
            lineHeight: 1.34,
            textAlign: "left",

            left: expanded ? 74 : 57,
            top: expanded ? 18 : 10,
            width: expanded ? 200 : 80,

            transition: [
              "top 500ms cubic-bezier(0.23, 1, 0.32, 1)",
              "left 500ms cubic-bezier(0.23, 1, 0.32, 1)",
              "width 500ms cubic-bezier(0.23, 1, 0.32, 1)",
            ].join(", "),
          }}
        >
          <p style={{ margin: 0, color: "#18181b" }}>Demons</p>
          <p style={{ margin: 0, color: "#71717a" }}>John Smith</p>
        </div>

        {/* Mini pause/play button */}
        <button
          aria-label={playing ? "Pause" : "Play"}
          onClick={(e) => {
            e.stopPropagation();
            setPlaying(!playing);
          }}
          style={{
            position: "absolute",
            width: 32,
            height: 32,
            cursor: "pointer",
            background: "none",
            border: "none",
            padding: 0,
            color: "#18181b",

            left: expanded ? 311 : 158,
            top: expanded ? 20 : 10,

            transition: [
              "top 500ms cubic-bezier(0.23, 1, 0.32, 1)",
              "left 500ms cubic-bezier(0.23, 1, 0.32, 1)",
            ].join(", "),
          }}
        >
          {playing ? <PauseIcon /> : <PlayIcon />}
        </button>

        {/* ── Expanded track list inside glass ── */}
        <div
          style={{
            position: "absolute",
            top: 72,
            left: 20,
            right: 20,
            display: "flex",
            flexDirection: "column",
            gap: 10,
            opacity: expanded ? 1 : 0,
            transition: "opacity 300ms ease",
            pointerEvents: expanded ? "auto" : "none",
          }}
        >
          {TRACKS.map((track, i) => (
            <div key={track.title}>
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: 16,
                }}
              >
                <img
                  alt={track.title}
                  src={track.cover}
                  style={{
                    width: 24,
                    height: 24,
                    flexShrink: 0,
                    objectFit: "cover",
                    borderRadius: 12,
                  }}
                />
                <p
                  style={{
                    margin: 0,
                    fontSize: 13,
                    fontWeight: 500,
                    lineHeight: 1.34,
                    color: "#52525b",
                  }}
                >
                  {track.title}
                </p>
              </div>
              {i < TRACKS.length - 1 && (
                <div
                  style={{
                    marginTop: 10,
                    height: 1,
                    width: "100%",
                    background: "rgba(0,0,0,0.06)",
                  }}
                />
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}