"use client";

import Image from "next/image";
import type { VoiceState } from "@/hooks/useLiveKitVoice";

interface VoiceOverlayProps {
  voiceState: VoiceState;
  audioLevel: number;
  interimText?: string;
  onStop: () => void;
  onTap: () => void;
}

export default function VoiceOverlay({
  voiceState,
  audioLevel,
  interimText,
  onStop,
  onTap,
}: VoiceOverlayProps) {
  const isListening = voiceState === "listening";
  const isThinking = voiceState === "thinking";
  const isSpeaking = voiceState === "speaking";

  const orbScale = isListening ? 1 + audioLevel * 0.28 : 1;

  const ringDuration = isListening
    ? Math.max(1.0, 2.2 - audioLevel * 1.2)
    : 2.2;

  const ringOpacity = isListening
    ? 0.25 + audioLevel * 0.55
    : 0.25;

  return (
    <div
      className="absolute inset-0 z-20 flex flex-col items-center justify-center select-none"
      style={{
        background: "rgba(6, 4, 2, 0.90)",
        backdropFilter: "blur(22px)",
      }}
    >
      <style>{`
        @keyframes vo-ring {
          0%   { transform: scale(0.82); opacity: 0.9; }
          100% { transform: scale(2.1); opacity: 0; }
        }

        @keyframes vo-breathe {
          0%, 100% { transform: scale(1); }
          50% { transform: scale(1.06); }
        }

        @keyframes vo-spin {
          to { transform: rotate(360deg); }
        }

        @keyframes vo-eq {
          0%, 100% { transform: scaleY(0.2); }
          50% { transform: scaleY(1); }
        }

        @keyframes vo-wave {
          0%, 100% {
            transform: scale(1);
            opacity: 0.9;
          }

          50% {
            transform: scale(1.06);
            opacity: 1;
          }
        }
      `}</style>

      {/* Orb area */}
      <div
        className="relative flex items-center justify-center cursor-pointer"
        style={{ width: 220, height: 220 }}
        onClick={isListening || isSpeaking ? onTap : undefined}
        title={isListening ? "Tap to send" : undefined}
      >
        {/* Listening rings */}
        {isListening &&
          [0, 0.55, 1.1].map((delay, i) => (
            <span
              key={i}
              className="absolute inset-0 rounded-full"
              style={{
                border: `1.5px solid rgba(255,255,255,${ringOpacity})`,
                animation: `vo-ring ${ringDuration}s ease-out ${delay}s infinite`,
              }}
            />
          ))}

        {/* Core orb */}
        <div
          style={{
            width: 120,
            height: 120,
            borderRadius: "50%",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            transform: `scale(${orbScale})`,
            transition:
              "transform 0.08s ease-out, background 0.4s ease, box-shadow 0.4s ease",
            background: isListening
              ? "radial-gradient(circle at 38% 38%, #ff7070, #b81e1e)"
              : isSpeaking
              ? "radial-gradient(circle at 38% 38%, #d4aa6a, #85714d)"
              : "radial-gradient(circle at 38% 38%, #9090a8, #3e3e52)",
            boxShadow: isListening
              ? `0 0 ${30 + audioLevel * 45}px rgba(220,50,50,${
                  0.35 + audioLevel * 0.3
                })`
              : isSpeaking
              ? "0 0 55px rgba(133,113,77,0.5)"
              : "none",
            animation: isSpeaking
              ? "vo-breathe 2s ease-in-out infinite"
              : "none",
          }}
        >
          {/* Speaking */}
          {isSpeaking && (
            <div
              className="flex items-end gap-[3px]"
              style={{ height: 38 }}
            >
              {[0, 0.07, 0.14, 0.21, 0.12, 0.19, 0.05].map((d, i) => (
                <span
                  key={i}
                  style={{
                    width: 5,
                    height: 32,
                    background: "rgba(255,255,255,0.92)",
                    borderRadius: 3,
                    transformOrigin: "bottom",
                    animation: `vo-eq 0.52s ease-in-out ${d}s infinite`,
                  }}
                />
              ))}
            </div>
          )}

          {/* Thinking */}
          {isThinking && (
            <div
              style={{
                width: 40,
                height: 40,
                borderRadius: "50%",
                border: "3px solid rgba(255,255,255,0.15)",
                borderTopColor: "rgba(255,255,255,0.85)",
                animation: "vo-spin 0.75s linear infinite",
              }}
            />
          )}

          {/* Listening icon */}
          {isListening && (
            <Image
              src="/waveform-lines-light-full.svg"
              alt="Voice waveform"
              width={52}
              height={52}
              style={{
                objectFit: "contain",
                opacity: 0.95,
                animation: "vo-wave 1.2s ease-in-out infinite",
              }}
            />
          )}
        </div>
      </div>

      {/* State label */}
      <p className="mt-6 text-[18px] font-semibold text-white tracking-wide">
        {isListening
          ? "Listening"
          : isThinking
          ? "Thinking…"
          : "Speaking"}
      </p>

      <p
        className="mt-1 text-[13px]"
        style={{ color: "rgba(255,255,255,0.45)" }}
      >
        {isThinking && "Processing your message…"}
      </p>

      {/* Live interim transcript — words appear as you speak */}
      {interimText ? (
        <p
          className="mt-3 text-[14px] text-center px-6 max-w-[85%]"
          style={{ color: "rgba(255,255,255,0.75)", minHeight: "1.5rem" }}
        >
          {interimText}
        </p>
      ) : (
        <div style={{ minHeight: "1.5rem", marginTop: "0.75rem" }} />
      )}

      {/* Send button */}
      {isListening && (
        <button
          onClick={onTap}
          className="mt-6 flex items-center gap-2 px-6 py-2.5 rounded-full font-medium text-[14px] cursor-pointer transition-all active:scale-95"
          style={{
            background: "rgba(133,113,77,0.85)",
            color: "white",
            border: "1px solid rgba(255,255,255,0.2)",
          }}
        >
          <svg
            width={14}
            height={14}
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth={2.5}
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <line x1="22" y1="2" x2="11" y2="13" />
            <polygon points="22 2 15 22 11 13 2 9 22 2" />
          </svg>

          Send now
        </button>
      )}

      {/* End voice */}
      <button
        onClick={onStop}
        className="mt-5 px-7 py-2 rounded-full text-[13px] font-medium cursor-pointer transition-all"
        style={{
          border: "1px solid rgba(255,255,255,0.15)",
          color: "rgba(255,255,255,0.45)",
          background: "transparent",
        }}
        onMouseEnter={(e) =>
          (e.currentTarget.style.color = "rgba(255,255,255,0.85)")
        }
        onMouseLeave={(e) =>
          (e.currentTarget.style.color = "rgba(255,255,255,0.45)")
        }
      >
        End voice
      </button>
    </div>
  );
}