"use client";

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

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

import { Command, CornerDownLeft, MessageSquare } from 'lucide-react';

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

const QUESTIONS = [

{

title: "Which store should the sessions live in?",

subtitle: "Every request reads the session, so this is the hot path.",

options: [

"Postgres — alongside the app",

"Redis — expiring keys",

"SQLite — one file on the box",

"Signed cookies — no store at all"

],

allowCustom: true

},

{

title: "Keep the existing tokens working?",

subtitle: "People signed in today hold tokens in the old format until they expire.",

options: [

"Yes — accept both for a while",

"No — invalidate on deploy"

],

allowCustom: true

},

{

title: "Ship behind a feature flag?",

subtitle: "A flag lets it reach some of the traffic before all of it.",

options: [

"Yes — gradual rollout",

"No — full release",

"Staff accounts first"

],

allowCustom: true

}

];

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

const [currentIndex, setCurrentIndex] = useState(0);

const [answers, setAnswers] = useState<Record<number, string | null>>({});

const [isCustomEditing, setIsCustomEditing] = useState(false);

const [customText, setCustomText] = useState("");

const currentQuestion = QUESTIONS[currentIndex];

const progress = (currentIndex + 1) / QUESTIONS.length;

const currentAnswer = answers[currentIndex];

// Next is disabled if there's no answer, or if the answer is just whitespace (e.g. empty custom input)

const isNextDisabled = !currentAnswer || currentAnswer.trim() === "";

const handleOptionClick = (option: string) => {

setAnswers(prev => ({ ...prev, [currentIndex]: option }));

setIsCustomEditing(false);

};

const handleCustomClick = () => {

setIsCustomEditing(true);

// Don't auto-enable next. Just set to current custom text or empty string

if (!answers[currentIndex] || currentQuestion.options.includes(answers[currentIndex] as string)) {

setAnswers(prev => ({ ...prev, [currentIndex]: customText || "" }));

}

};

const handleCustomChange = (e: React.ChangeEvent<HTMLInputElement>) => {

const val = e.target.value;

setCustomText(val);

setAnswers(prev => ({ ...prev, [currentIndex]: val }));

};

const handleNext = () => {

if (isNextDisabled) return;

if (currentIndex < QUESTIONS.length - 1) {

setCurrentIndex(prev => prev + 1);

setIsCustomEditing(false);

setCustomText("");

}

};

const handlePrev = () => {

if (currentIndex > 0) {

setCurrentIndex(prev => prev - 1);

setIsCustomEditing(false);

// Reset custom text if going back

const prevAnswer = answers[currentIndex - 1];

if (prevAnswer && !QUESTIONS[currentIndex - 1].options.includes(prevAnswer)) {

setCustomText(prevAnswer);

setIsCustomEditing(true);

} else {

setCustomText("");

}

}

};

const handleSkip = () => {

if (currentIndex < QUESTIONS.length - 1) {

setCurrentIndex(prev => prev + 1);

setIsCustomEditing(false);

setCustomText("");

}

};

// Keyboard shortcut listener for CMD+Enter

useEffect(() => {

const handleKeyDown = (e: KeyboardEvent) => {

if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {

handleNext();

}

};

window.addEventListener('keydown', handleKeyDown);

return () => window.removeEventListener('keydown', handleKeyDown);

}, [currentIndex, isNextDisabled]);

const allOptions = [...currentQuestion.options];

if (currentQuestion.allowCustom) {

allOptions.push("Something else...");

}

const getLetter = (index: number) => String.fromCharCode(65 + index);

return (

<div className={cn("w-full max-w-[calc(100vw-32px)] md:max-w-[560px] bg-gradient-to-b from-white from-30% to-[#EBE9EB] dark:from-[#1C1C1E] dark:to-[#0A0A0C] rounded-2xl border border-solid border-black/5 dark:border-white/5 hover:border-[#D6E4FF] dark:hover:border-white/20 shadow-[0_4px_24px_rgba(0,0,0,0.04)] dark:shadow-[0_4px_24px_rgba(0,0,0,0.4)] hover:shadow-[0_12px_40px_rgba(0,0,0,0.08)] dark:hover:shadow-[0_12px_40px_rgba(0,0,0,0.6)] p-4 sm:p-5 md:p-6 font-matter transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)]", className)}>

{/* Header */}

<div className="flex items-center justify-between mb-5 sm:mb-6 md:mb-8">

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

<div className="w-7 h-7 sm:w-8 sm:h-8 rounded-lg bg-blue-500/10 border border-blue-500/20 flex items-center justify-center shrink-0">

<div className="relative flex items-center justify-center">

<MessageSquare className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-blue-500" />

<div className="absolute inset-0 flex items-center justify-center pointer-events-none">

<span className="text-[9px] sm:text-[10px] font-bold text-blue-500 mt-[-2px]">?</span>

</div>

</div>

</div>

<h2 className="text-neutral-900 dark:text-[#F5F5F7] font-medium text-[17px] sm:text-[18px] md:text-[20px] leading-snug tracking-normal font-matter">Questions</h2>

</div>

{/* Progress Ring */}

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

<svg className="w-5 h-5 transform -rotate-90" viewBox="0 0 20 20">

<circle

cx="10"

cy="10"

r="8"

fill="none"

className="stroke-zinc-200 dark:stroke-[#333]"

strokeWidth="2"

/>

<motion.circle

cx="10"

cy="10"

r="8"

fill="none"

className="stroke-zinc-400 dark:stroke-white"

strokeWidth="2"

strokeDasharray="50.26"

strokeDashoffset={50.26 * (1 - progress)}

strokeLinecap="round"

animate={{ strokeDashoffset: 50.26 * (1 - progress) }}

transition={{ duration: 0.5, ease: "easeInOut" }}

/>

</svg>

</div>

</div>

<AnimatePresence mode="wait">

<motion.div

key={currentIndex}

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

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

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

transition={{ duration: 0.2 }}

>

{/* Question Text */}

<div className="mb-4 sm:mb-5 md:mb-6">

<h3 className="text-[15.5px] sm:text-[17px] font-medium text-zinc-900 dark:text-[#F5F5F7] mb-1 font-matter leading-snug">{currentQuestion.title}</h3>

<p className="text-[13px] sm:text-[14px] text-zinc-500 dark:text-[#86868B] leading-relaxed">{currentQuestion.subtitle}</p>

</div>

{/* Options */}

<div className="flex flex-col gap-1 sm:gap-1.5 mb-5 sm:mb-6 md:mb-8">

{allOptions.map((option, idx) => {

const isCustomOption = idx === currentQuestion.options.length;

// Determine if this specific option is active

let isActive = false;

if (isCustomOption) {

isActive = isCustomEditing;

} else {

isActive = currentAnswer === option && !isCustomEditing;

}

return (

<div

key={idx}

onClick={() => isCustomOption ? handleCustomClick() : handleOptionClick(option)}

className={cn(

"flex items-center gap-2.5 sm:gap-3.5 p-2 rounded-xl cursor-pointer transition-all duration-300 border min-w-0",

isActive

? "bg-black/[0.04] dark:bg-white/[0.08] border-black/10 dark:border-white/20 shadow-sm"

: "bg-transparent border-transparent hover:bg-black/[0.02] dark:hover:bg-white/[0.03]"

)}

>

<div

className={cn(

"w-6 h-6 sm:w-7 sm:h-7 rounded-lg flex items-center justify-center text-[11px] sm:text-[12px] font-medium transition-colors shrink-0",

isActive

? "bg-white dark:bg-gradient-to-b dark:from-[#F5F5F7] dark:to-[#D1D1D6] text-zinc-900 dark:text-[#111111] font-semibold shadow-sm"

: "bg-black/5 dark:bg-white/5 text-zinc-500 dark:text-[#86868B]"

)}

>

{getLetter(idx)}

</div>

{isCustomOption && isActive ? (

<input

autoFocus

type="text"

value={customText}

onChange={handleCustomChange}

placeholder="Type your answer..."

className="flex-1 min-w-0 bg-transparent text-[13px] sm:text-[14px] text-zinc-900 dark:text-[#F5F5F7] outline-none placeholder:text-zinc-400 dark:placeholder:text-[#86868B]/60"

/>

) : (

<span className={cn(

"text-[13px] sm:text-[14px] transition-colors min-w-0 flex-1 leading-snug",

isActive ? "text-zinc-900 dark:text-[#F5F5F7] font-medium" : "text-zinc-600 dark:text-[#86868B]"

)}>

{option}

</span>

)}

</div>

);

})}

</div>

</motion.div>

</AnimatePresence>

{/* Footer Controls */}

<div className="flex items-center justify-between pt-2 gap-2">

<div>

{currentIndex > 0 && (

<button

onClick={handlePrev}

className="px-3 sm:px-3.5 py-1.5 rounded-full bg-gradient-to-b from-white from-30% to-[#EBE9EB] dark:from-[#2C2C2E] dark:to-[#1C1C1E] border border-black/5 dark:border-white/10 hover:from-black hover:to-black hover:text-white hover:border-black dark:hover:from-white dark:hover:to-white text-zinc-700 dark:text-[#F5F5F7] dark:hover:text-black text-[12px] sm:text-[13px] font-medium transition-all duration-300 shadow-sm whitespace-nowrap"

>

Previous

</button>

)}

</div>

<div className="flex items-center gap-2 sm:gap-2.5">

<button

onClick={handleSkip}

className="px-3 sm:px-3.5 py-1.5 rounded-full bg-gradient-to-b from-white from-30% to-[#EBE9EB] dark:from-[#2C2C2E] dark:to-[#1C1C1E] border border-black/5 dark:border-white/10 hover:from-black hover:to-black hover:text-white hover:border-black dark:hover:from-white dark:hover:to-white text-zinc-700 dark:text-[#F5F5F7] dark:hover:text-black text-[12px] sm:text-[13px] font-medium transition-all duration-300 shadow-sm whitespace-nowrap"

>

Skip

</button>

<button

onClick={handleNext}

disabled={isNextDisabled}

className={cn(

"flex items-center gap-1.5 sm:gap-2 px-3.5 sm:px-4 py-1.5 rounded-full text-[12px] sm:text-[13px] font-medium transition-all duration-300 shadow-sm whitespace-nowrap shrink-0",

"bg-gradient-to-b from-[#2A2C33] to-[#111111] text-white border border-white/10 dark:from-[#F5F5F7] dark:to-[#D1D1D6] dark:text-[#111111] dark:border dark:border-white/20 dark:shadow-[0_2px_12px_rgba(255,255,255,0.12)]",

isNextDisabled

? "opacity-40 cursor-not-allowed pointer-events-none"

: "hover:opacity-90 dark:hover:from-white dark:hover:to-[#E5E5EA]"

)}

>

{currentIndex === QUESTIONS.length - 1 ? 'Continue' : 'Next'}

<div className="flex items-center gap-0.5 sm:gap-1 shrink-0">

<div className="flex items-center justify-center w-4 h-4 rounded bg-white/20 dark:bg-black/10">

<Command className="w-2.5 h-2.5 text-white/80 dark:text-black/70" />

</div>

<div className="flex items-center justify-center w-4 h-4 rounded bg-white/20 dark:bg-black/10">

<CornerDownLeft className="w-2.5 h-2.5 text-white/80 dark:text-black/70" />

</div>

</div>

</button>

</div>

</div>

</div>

);

}