"use client";

import React, { useState, useEffect, useRef } from "react";

import { motion, AnimatePresence } from "framer-motion";

import { Plus, Mic, ChevronDown, Check, X, Sun, Sparkles, Star, CircleDashed, Hexagon, Triangle } from "lucide-react";

import { cn } from "@/lib/utils";

const MODELS = [

{ id: 'opus', name: 'Claude Opus 5.5', shortName: 'Opus 5.5', icon: <Sun className="w-3.5 h-3.5 text-orange-500" /> },

{ id: 'gpt6', name: 'GPT-6 Astra', shortName: 'GPT-6', icon: <Sparkles className="w-3.5 h-3.5 text-emerald-500" /> },

{ id: 'gemini', name: 'Gemini 3.1 Pro', shortName: 'Gemini 3.1', icon: <Star className="w-3.5 h-3.5 text-blue-400" /> },

{ id: 'fable', name: 'Claude Fable 5.1', shortName: 'Fable 5.1', icon: <Sun className="w-3.5 h-3.5 text-orange-400" /> },

{ id: 'grok', name: 'Grok 4.7', shortName: 'Grok 4.7', icon: <CircleDashed className="w-3.5 h-3.5 text-zinc-400" /> },

{ id: 'deepseek', name: 'DeepSeek-V4-Pro', shortName: 'DeepSeek', icon: <Hexagon className="w-3.5 h-3.5 text-blue-500" /> },

{ id: 'qwen', name: 'Qwen3.8-Max', shortName: 'Qwen3.8', icon: <Triangle className="w-3.5 h-3.5 text-purple-500" /> },

{ id: 'kimi', name: 'Kimi K3', shortName: 'Kimi K3', icon: <div className="text-[12px] font-bold text-zinc-400 font-mono leading-none">K</div> },

];

const NUM_BARS = 60;

export function ChatInput({ className }: { className?: string }) {

const [state, setState] = useState<'idle' | 'mic-voice' | 'mic-progress' | 'blue-voice' | 'blue-progress'>('idle');

const [selectedModel, setSelectedModel] = useState(MODELS[0]);

const [isSelectorOpen, setIsSelectorOpen] = useState(false);

const [progress, setProgress] = useState(0);

const [voiceHeights, setVoiceHeights] = useState<number[]>(Array(NUM_BARS).fill(4));

const selectorRef = useRef<HTMLDivElement>(null);

const TRANSCRIPTION = "Damn, I think Sunflower might just be the greatest component library ever";

const words = TRANSCRIPTION.split(" ");

// Click outside to close selector

useEffect(() => {

const handleClickOutside = (e: MouseEvent) => {

if (selectorRef.current && !selectorRef.current.contains(e.target as Node)) {

setIsSelectorOpen(false);

}

};

if (isSelectorOpen) document.addEventListener('mousedown', handleClickOutside);

return () => document.removeEventListener('mousedown', handleClickOutside);

}, [isSelectorOpen]);

// Voice Waveform Animation Loop (for mic-voice)

useEffect(() => {

if (state !== 'mic-voice') return;

let frame: number;

let lastUpdate = 0;

const animate = (time: number) => {

if (time - lastUpdate > 100) {

setVoiceHeights(prev => prev.map((_, i) => {

const envelope = Math.sin((i / (NUM_BARS - 1)) * Math.PI);

return 4 + Math.random() * 24 * envelope;

}));

lastUpdate = time;

}

frame = requestAnimationFrame(animate);

};

frame = requestAnimationFrame(animate);

return () => cancelAnimationFrame(frame);

}, [state]);

// Progress Animation Loop (for mic-progress and blue-progress)

useEffect(() => {

if (state !== 'mic-progress' && state !== 'blue-progress') {

setProgress(0);

return;

}

let frame: number;

const start = performance.now();

const DURATION = 2000; // 2 seconds processing

const animate = (time: number) => {

const elapsed = time - start;

const p = Math.min(elapsed / DURATION, 1);

setProgress(p);

if (p < 1) {

frame = requestAnimationFrame(animate);

} else {

setTimeout(() => setState('idle'), 400);

}

};

frame = requestAnimationFrame(animate);

return () => cancelAnimationFrame(frame);

}, [state]);

return (

<div className={cn("relative w-full max-w-[600px] flex justify-center", className)}>

{/* Floating Transcription Text (Blue Voice only) */}

<AnimatePresence>

{state === 'blue-voice' && (

<motion.div

initial="hidden"

animate="visible"

exit="hidden"

variants={{

visible: { transition: { staggerChildren: 0.15 } },

hidden: {}

}}

className="absolute bottom-full mb-6 left-0 w-full flex justify-center text-center z-20 pointer-events-none"

>

<div className="text-zinc-800 dark:text-zinc-200 font-medium text-[15px] max-w-[280px] leading-relaxed">

{words.map((word, i) => (

<motion.span

key={i}

variants={{

hidden: { opacity: 0, filter: 'blur(4px)', y: 4 },

visible: { opacity: 1, filter: 'blur(0px)', y: 0 }

}}

transition={{ duration: 0.4 }}

className="inline-block mr-[4px]"

>

{word}

</motion.span>

))}

</div>

</motion.div>

)}

</AnimatePresence>

<div className="flex items-center w-full h-[52px] bg-white dark:bg-[#222222] rounded-full px-2 border border-black/5 dark:border-white/5 shadow-md relative z-10">

{/* Glowing Aura Background (Blue states only) */}

<AnimatePresence>

{(state === 'blue-voice' || state === 'blue-progress') && (

<motion.div

initial={{ opacity: 0 }}

animate={{ opacity: state === 'blue-voice' ? 1 : 0.5 }}

exit={{ opacity: 0 }}

transition={{ duration: 0.5 }}

className="absolute inset-0 overflow-hidden rounded-full pointer-events-none z-0 bg-purple-50/50 dark:bg-purple-900/10"

>

<motion.div

animate={{ backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"] }}

transition={{ duration: 6, repeat: Infinity, ease: "linear" }}

className="absolute -bottom-[4px] left-0 w-[200%] h-[20px] bg-gradient-to-r from-emerald-400/30 via-purple-500/40 to-orange-400/30 blur-[10px]"

style={{ backgroundSize: "200% 100%" }}

/>

<motion.div

animate={{ backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"] }}

transition={{ duration: 6, repeat: Infinity, ease: "linear" }}

className="absolute -bottom-[2px] left-0 w-[200%] h-[4px] bg-gradient-to-r from-emerald-400/60 via-purple-500/70 to-orange-400/60 dark:from-emerald-300/80 dark:via-purple-400/90 dark:to-orange-300/80 blur-[2px]"

style={{ backgroundSize: "200% 100%" }}

/>

</motion.div>

)}

</AnimatePresence>

<div className="flex items-center justify-center w-10 shrink-0 h-full relative z-10">

<button className="text-zinc-400 dark:text-zinc-500 hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors">

<Plus className="w-5 h-5" />

</button>

</div>

<div className="flex-1 relative h-full flex items-center justify-between z-10">

<AnimatePresence mode="wait">

{/* IDLE & BLUE FLOW */}

{(state === 'idle' || state.startsWith('blue')) && (

<motion.div

key="input-view"

initial={{ opacity: 0, y: 10 }}

animate={{ opacity: 1, y: 0 }}

exit={{ opacity: 0, y: -10 }}

transition={{ duration: 0.2 }}

className="absolute inset-0 flex items-center justify-between"

>

<input

placeholder="Ask anything"

className="flex-1 h-full bg-transparent outline-none text-[15px] text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 px-1"

/>

<div className="flex items-center gap-2.5 shrink-0 pr-1">

<div className="relative" ref={selectorRef}>

<button

onClick={() => setIsSelectorOpen(!isSelectorOpen)}

className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-transparent hover:bg-black/5 dark:hover:bg-white/5 transition-colors text-[13px] font-medium text-zinc-700 dark:text-zinc-300"

>

{selectedModel.shortName}

<ChevronDown className="w-3.5 h-3.5 text-zinc-500" />

</button>

<AnimatePresence>

{isSelectorOpen && (

<motion.div

initial={{ opacity: 0, scale: 0.95, y: 5 }}

animate={{ opacity: 1, scale: 1, y: 0 }}

exit={{ opacity: 0, scale: 0.95, y: 5 }}

transition={{ duration: 0.15 }}

className="absolute top-full right-0 mt-3 w-[220px] bg-white dark:bg-[#1C1C1C] border border-black/5 dark:border-white/10 rounded-xl p-1.5 shadow-2xl flex flex-col z-50 overflow-hidden"

>

{MODELS.map(m => (

<button

key={m.id}

onClick={() => {

setSelectedModel(m);

setIsSelectorOpen(false);

}}

className="flex items-center justify-between w-full px-3 py-2.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg text-[13px] text-zinc-700 dark:text-zinc-200 transition-colors"

>

<div className="flex items-center gap-3">

{m.icon}

<span>{m.name}</span>

</div>

{selectedModel.id === m.id && <Check className="w-3.5 h-3.5 text-zinc-900 dark:text-zinc-400" />}

</button>

))}

</motion.div>

)}

</AnimatePresence>

</div>

<button

onClick={() => setState('mic-voice')}

className="p-1.5 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200 transition-colors rounded-full"

>

<Mic className="w-4 h-4" />

</button>

<button

onClick={() => {

if (state === 'idle') setState('blue-voice');

else if (state === 'blue-voice') setState('blue-progress');

}}

className="relative flex items-center justify-center w-[34px] h-[34px] rounded-full bg-[#1A85FF] hover:bg-blue-500 transition-colors shadow-sm"

>

<AnimatePresence mode="wait">

{state === 'idle' && (

<motion.div key="wave" initial={{ opacity: 0, scale: 0.8 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.8 }} transition={{ duration: 0.15 }}>

<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.5" strokeLinecap="round">

<path d="M12 4v16M8 9v6M16 9v6M4 11v2M20 11v2" />

</svg>

</motion.div>

)}

{state === 'blue-voice' && (

<motion.div key="stop" initial={{ opacity: 0, scale: 0.8 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.8 }} transition={{ duration: 0.15 }}>

<div className="w-2.5 h-2.5 bg-white rounded-[2px]" />

</motion.div>

)}

{state === 'blue-progress' && (

<motion.div key="spinner" initial={{ opacity: 0, scale: 0.8 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.8 }} transition={{ duration: 0.15 }}>

<div className="w-[14px] h-[14px] border-[2px] border-white/30 border-t-white rounded-full animate-spin" />

</motion.div>

)}

</AnimatePresence>

</button>

</div>

</motion.div>

)}

{/* MIC FLOW (60 Bars) */}

{(state.startsWith('mic')) && (

<motion.div

key="mic-view"

initial={{ opacity: 0, scale: 0.95 }}

animate={{ opacity: 1, scale: 1 }}

exit={{ opacity: 0, scale: 0.95 }}

transition={{ duration: 0.2 }}

className="absolute inset-0 flex items-center justify-between"

>

<div className="flex-1 flex items-center justify-center gap-[2px] px-4 h-full">

{Array.from({ length: NUM_BARS }).map((_, i) => {

const isProgress = state === 'mic-progress';

const isFilled = isProgress && (i / NUM_BARS) < progress;

const height = state === 'mic-voice' ? voiceHeights[i] : 4;

return (

<motion.div

key={i}

animate={{ height }}

transition={{ duration: state === 'mic-voice' ? 0.15 : 0.3 }}

className={cn(

"w-[2px] rounded-full",

isProgress

? (isFilled ? "bg-zinc-800 dark:bg-zinc-200" : "bg-zinc-200 dark:bg-zinc-700")

: "bg-zinc-800 dark:bg-zinc-300"

)}

/>

);

})}

</div>

<div className="flex items-center gap-2 shrink-0 pr-2">

{state === 'mic-voice' ? (

<button

onClick={() => setState('mic-progress')}

className="flex items-center justify-center w-7 h-7 text-zinc-400 dark:text-zinc-500 hover:text-emerald-500 dark:hover:text-emerald-400 hover:bg-black/5 dark:hover:bg-white/10 transition-colors rounded-full"

>

<Check className="w-4 h-4" />

</button>

) : (

<div className="flex items-center justify-center w-7 h-7">

<div className="w-[16px] h-[16px] rounded-full border-[2px] border-zinc-200 dark:border-zinc-600 border-t-zinc-800 dark:border-t-zinc-300 animate-spin" />

</div>

)}

<button

onClick={() => setState('idle')}

className="flex items-center justify-center w-7 h-7 text-zinc-400 dark:text-zinc-500 hover:text-zinc-600 dark:hover:text-zinc-300 hover:bg-black/5 dark:hover:bg-white/10 transition-colors rounded-full"

>

<X className="w-4 h-4" />

</button>

</div>

</motion.div>

)}

</AnimatePresence>

</div>

</div>

</div>

);

}