"use client";

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

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

import { ChevronDown, Users, Disc, Loader2 } from "lucide-react";

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

export interface ReasoningStepsProps {

className?: string;

loop?: boolean;

}

const NineDots = ({ className }: { className?: string }) => (

<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" className={className}>

<circle cx="2.5" cy="2.5" r="1.5" />

<circle cx="7" cy="2.5" r="1.5" />

<circle cx="11.5" cy="2.5" r="1.5" />

<circle cx="2.5" cy="7" r="1.5" />

<circle cx="7" cy="7" r="1.5" />

<circle cx="11.5" cy="7" r="1.5" />

<circle cx="2.5" cy="11.5" r="1.5" />

<circle cx="7" cy="11.5" r="1.5" />

<circle cx="11.5" cy="11.5" r="1.5" />

</svg>

);

type RenderItem =

| { type: 'title', id: string, prefix: string, suffix: string, delay: number }

| { type: 'pills', id: string, pills: { icon: React.ElementType, label: string, color: string, bg: string }[], delay: number }

| { type: 'thought', id: string, text: string, delay: number };

const DEMO_ITEMS: RenderItem[] = [

{ type: 'title', id: 't1', prefix: 'Reviewing', suffix: 'the incident call', delay: 300 },

{

type: 'pills', id: 'p1', delay: 400, pills: [

{ icon: Users, label: "Mar 4 incident review", color: "text-blue-500 dark:text-blue-400", bg: "bg-zinc-100 dark:bg-gradient-to-b dark:from-[#2C2C2E] dark:to-[#1C1C1E] border border-zinc-200/80 dark:border-white/10 dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]" },

{ icon: Disc, label: "ENG-2841 rollout policy", color: "text-indigo-500 dark:text-indigo-400", bg: "bg-zinc-100 dark:bg-gradient-to-b dark:from-[#2C2C2E] dark:to-[#1C1C1E] border border-zinc-200/80 dark:border-white/10 dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]" }

]

},

{ type: 'thought', id: 'th1', text: 'anyone thought to revert.', delay: 400 },

{ type: 'title', id: 't2', prefix: 'Drafting', suffix: 'the rollout policy', delay: 400 },

{ type: 'thought', id: 'th2', text: 'Reading the Mar 4 incident review end to end and marking the passages where the rollback comes up.', delay: 600 },

{ type: 'thought', id: 'th3', text: 'Checking the existing deploy policy for a threshold to inherit rather than inventing one here.', delay: 600 },

{ type: 'thought', id: 'th4', text: 'It holds anything above 25% of traffic for a second reviewer, so the fast path needs a ceiling too.', delay: 800 },

];

export function ReasoningSteps({

className,

loop = true

}: ReasoningStepsProps) {

const [visibleIndex, setVisibleIndex] = useState(-1);

const [isCollapsed, setIsCollapsed] = useState(false);

useEffect(() => {

let isMounted = true;

let currentIdx = -1;

let timeoutId: NodeJS.Timeout;

const nextStep = () => {

if (!isMounted) return;

currentIdx++;

if (currentIdx < DEMO_ITEMS.length) {

setVisibleIndex(currentIdx);

timeoutId = setTimeout(nextStep, DEMO_ITEMS[currentIdx].delay);

} else {

timeoutId = setTimeout(() => {

if (!isMounted) return;

setIsCollapsed(true);

if (loop) {

timeoutId = setTimeout(() => {

if (!isMounted) return;

setIsCollapsed(false);

setVisibleIndex(-1);

currentIdx = -1;

timeoutId = setTimeout(nextStep, 300);

}, 2000);

}

}, 800);

}

};

timeoutId = setTimeout(nextStep, 500);

return () => {

isMounted = false;

clearTimeout(timeoutId);

};

}, [loop]);

return (

<div className={cn("flex flex-col items-center justify-center min-h-[300px] w-full font-matter", className)}>

<div className="w-full max-w-[540px] flex flex-col items-start px-4">

<AnimatePresence mode="wait">

{isCollapsed ? (

<motion.div

key="collapsed"

initial={{ opacity: 0, scale: 0.95, y: 10, filter: "blur(4px)" }}

animate={{ opacity: 1, scale: 1, y: 0, filter: "blur(0px)" }}

exit={{ opacity: 0, scale: 0.95, y: -10, filter: "blur(4px)" }}

transition={{ duration: 0.4, ease: [0.23, 1, 0.32, 1] }}

className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full text-[13px] font-matter font-medium bg-black/5 dark:bg-gradient-to-b dark:from-[#2C2C2E] dark:to-[#1C1C1E] border border-black/10 dark:border-white/10 text-zinc-700 dark:text-[#F5F5F7] shadow-sm hover:border-black/20 dark:hover:border-white/20 hover:scale-[1.02] active:scale-[0.98] transition-all cursor-pointer"

>

Thought for 7s <ChevronDown className="w-3.5 h-3.5 ml-0.5 opacity-70" />

</motion.div>

) : (

<motion.div

key="expanded"

initial={{ opacity: 0 }}

animate={{ opacity: 1 }}

exit={{ opacity: 0, filter: "blur(4px)", scale: 0.95 }}

transition={{ duration: 0.5 }}

className="relative w-full h-[150px]"

>

{/* Mask container to fade out items as they scroll up */}

<div

className="absolute inset-0 overflow-hidden"

style={{

maskImage: 'linear-gradient(to bottom, transparent, black 15%, black 100%)',

WebkitMaskImage: 'linear-gradient(to bottom, transparent, black 15%, black 100%)'

}}

>

{/* Stack anchored at the bottom so adding items pushes older ones up */}

<div className="absolute bottom-0 left-0 w-full flex flex-col gap-4 pb-4 px-4">

<AnimatePresence initial={false}>

{DEMO_ITEMS.slice(0, visibleIndex + 1).map((item, i, arr) => (

<motion.div

key={item.id}

layout

initial={{ opacity: 0, y: 20, filter: "blur(4px)" }}

animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}

transition={{ duration: 0.4, ease: [0.23, 1, 0.32, 1] }}

className="w-full"

>

{item.type === 'title' && (

<div className="flex items-start text-[15px] font-medium tracking-tight">

{/* If it's the most recently added item (and is a title), show spinner, else NineDots */}

{i === arr.length - 1 && visibleIndex < DEMO_ITEMS.length - 1 ? (

<Loader2 className="w-4 h-4 animate-spin text-zinc-400 dark:text-zinc-500 mr-3 mt-[2px] flex-shrink-0" />

) : (

<NineDots className="text-zinc-400 dark:text-zinc-500 mr-3 mt-[3px] flex-shrink-0" />

)}

<div>

<span className="text-zinc-900 dark:text-zinc-100">{item.prefix}</span>

<span className="text-zinc-500 dark:text-zinc-400 ml-1.5">{item.suffix}</span>

</div>

</div>

)}

{item.type === 'pills' && (

<div className="flex items-center gap-2 flex-wrap pl-7">

{item.pills.map((p, idx) => (

<div key={idx} className={cn("flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[12.5px] font-medium border", p.bg)}>

<p.icon className={cn("w-3.5 h-3.5", p.color)} />

<span className="text-zinc-700 dark:text-zinc-300">{p.label}</span>

</div>

))}

</div>

)}

{item.type === 'thought' && (

<div className="pl-7 pr-4 text-[14px] text-zinc-600 dark:text-zinc-400/90 leading-[1.6]">

{item.text}

</div>

)}

</motion.div>

))}

</AnimatePresence>

</div>

</div>

</motion.div>

)}

</AnimatePresence>

</div>

</div>

);

}