import { useMemo } from "react";

export type VoicePhase = "listening" | "thinking" | "speaking";

const PHASE_PALETTE: Record<
  VoicePhase,
  { primary: string; secondary: string; accent: string; glow: string }
> = {
  listening: {
    primary: "rgba(6,182,212,0.55)",
    secondary: "rgba(14,165,233,0.35)",
    accent: "rgba(34,211,238,0.22)",
    glow: "voice-bloom-cyan",
  },
  speaking: {
    primary: "rgba(16,185,129,0.58)",
    secondary: "rgba(52,211,153,0.38)",
    accent: "rgba(110,231,183,0.24)",
    glow: "voice-bloom-emerald",
  },
  thinking: {
    primary: "rgba(139,92,246,0.52)",
    secondary: "rgba(167,139,250,0.34)",
    accent: "rgba(196,181,253,0.22)",
    glow: "voice-bloom-violet",
  },
};

const ACCENT_TINT: Record<string, string> = {
  cyan: "rgba(6,182,212,0.42)",
  emerald: "rgba(16,185,129,0.42)",
  violet: "rgba(139,92,246,0.42)",
  amber: "rgba(245,158,11,0.38)",
  rose: "rgba(244,63,94,0.36)",
};

export function VoiceCanvas({
  phase,
  energy = 0,
  reducedMotion = false,
  personaAccent,
}: {
  phase: VoicePhase;
  energy?: number;
  reducedMotion?: boolean;
  personaAccent?: keyof typeof ACCENT_TINT;
}) {
  const palette = PHASE_PALETTE[phase];
  const personaTint = personaAccent ? ACCENT_TINT[personaAccent] : null;
  const bloomScale = useMemo(() => 1 + energy * 0.28, [energy]);
  const ringOpacity = useMemo(() => 0.35 + energy * 0.45, [energy]);

  return (
    <div aria-hidden className="pointer-events-none absolute inset-0 overflow-hidden bg-[#030508]">
      {/* Deep field */}
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_120%_80%_at_50%_100%,rgba(8,12,20,0.95)_0%,#030508_55%)]" />

      {/* Dual-mind bloom orbs */}
      <div
        className={`absolute -left-[18%] top-[8%] h-[62vmin] w-[62vmin] rounded-full blur-[80px] ${reducedMotion ? "" : palette.glow}`}
        style={{
          background: `radial-gradient(circle, ${palette.primary} 0%, transparent 68%)`,
          opacity: reducedMotion ? 0.55 : 0.75,
          transform: `scale(${bloomScale})`,
          transition: reducedMotion ? undefined : "transform 120ms ease-out",
        }}
      />
      <div
        className={`absolute -right-[14%] top-[22%] h-[54vmin] w-[54vmin] rounded-full blur-[72px] ${reducedMotion ? "" : "voice-bloom-secondary"}`}
        style={{
          background: personaTint
            ? `radial-gradient(circle, ${personaTint} 0%, ${palette.secondary} 45%, transparent 70%)`
            : `radial-gradient(circle, ${palette.secondary} 0%, transparent 70%)`,
          opacity: reducedMotion ? 0.45 : 0.65,
          animationDelay: "-1.4s",
        }}
      />
      <div
        className={`absolute left-1/2 top-[38%] h-[48vmin] w-[48vmin] -translate-x-1/2 rounded-full blur-[96px] ${reducedMotion ? "" : palette.glow}`}
        style={{
          background: `radial-gradient(circle, ${palette.accent} 0%, transparent 72%)`,
          opacity: 0.5 + energy * 0.25,
          transform: `translateX(-50%) scale(${0.92 + energy * 0.18})`,
          transition: reducedMotion
            ? undefined
            : "transform 140ms ease-out, opacity 140ms ease-out",
        }}
      />

      {/* Liquid glass rings */}
      <div className="absolute left-1/2 top-[42%] size-[min(72vmin,520px)] -translate-x-1/2 -translate-y-1/2">
        <div
          className={`size-full rounded-full border border-white/[0.07] ${reducedMotion ? "" : "voice-glass-ring"}`}
          style={{ opacity: ringOpacity }}
        />
      </div>
      <div className="absolute left-1/2 top-[42%] size-[min(58vmin,420px)] -translate-x-1/2 -translate-y-1/2">
        <div
          className={`size-full rounded-full border border-white/[0.05] ${reducedMotion ? "" : "voice-glass-ring-inner"}`}
          style={{ opacity: ringOpacity * 0.85 }}
        />
      </div>

      {/* Fine grain for depth */}
      <div className="absolute inset-0 opacity-[0.035] mix-blend-overlay voice-grain" />

      {/* Horizon line */}
      <div className="absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
    </div>
  );
}