import { useState, useCallback } from 'react'
export default function AskModal({ questions, onSubmit }) {
const [currentIdx, setCurrentIdx] = useState(0)
const [answers, setAnswers] = useState({})
const [selected, setSelected] = useState([])
const [freeText, setFreeText] = useState('')
const [mode, setMode] = useState('select')
if (!questions || questions.length === 0) return null
const q = questions[currentIdx]
const total = questions.length
const toggleOption = (i) => {
if (q.multi_select) {
setSelected(prev => {
const next = [...prev]
next[i] = !next[i]
return next
})
} else {
const newAnswers = { ...answers, [q.question]: q.options[i].label }
if (currentIdx + 1 < total) {
setAnswers(newAnswers)
setCurrentIdx(currentIdx + 1)
setSelected([])
setFreeText('')
setMode('select')
} else {
onSubmit(newAnswers)
}
}
}
const submitMulti = () => {
const labels = q.options
.filter((_, i) => selected[i])
.map(o => o.label)
.join(', ')
if (!labels) return
const newAnswers = { ...answers, [q.question]: labels }
advance(newAnswers)
}
const submitFreeText = () => {
const text = freeText.trim()
if (!text) return
const newAnswers = { ...answers, [q.question]: text }
advance(newAnswers)
}
const advance = (newAnswers) => {
if (currentIdx + 1 < total) {
setAnswers(newAnswers)
setCurrentIdx(currentIdx + 1)
setSelected([])
setFreeText('')
setMode('select')
} else {
onSubmit(newAnswers)
}
}
return (
<div className="fixed inset-0 bg-black/65 backdrop-blur-sm flex items-center justify-center z-100 p-[calc(env(safe-area-inset-top)+8px)_calc(env(safe-area-inset-right)+8px)_calc(env(safe-area-inset-bottom)+8px)_calc(env(safe-area-inset-left)+8px)]">
<div className="bg-[#1a1e2e] border border-[#3060a0] rounded-[20px] p-5.5 w-[92%] max-w-[420px] shadow-[0_20px_60px_rgba(0,0,0,0.5)]">
{}
<div className="flex items-center gap-2 text-base font-bold mb-4">
<span className="text-xl">❓</span>
<span className="text-accent">
{q.header || '请回答'}
</span>
{total > 1 && (
<span className="ml-auto text-[11px] font-medium bg-accent/20 text-accent px-2 py-0.5 rounded-[10px]">
{currentIdx + 1} / {total}
</span>
)}
</div>
{}
<div className="text-[14px] text-fg leading-relaxed mb-4">{q.question}</div>
{mode === 'select' ? (
<>
{}
<div className="flex flex-col gap-2 mb-3">
{q.options.map((opt, i) => (
<button
key={i}
className={`flex items-start gap-2.5 px-4 py-3 border rounded-xl bg-transparent text-sm cursor-pointer transition-all duration-150 text-left active:scale-[0.98] ${
selected[i]
? 'border-accent text-accent bg-accent/10'
: 'border-border text-fg hover:bg-accent/5'
}`}
onClick={() => toggleOption(i)}
>
{q.multi_select && (
<span className="text-base w-5 text-center shrink-0 mt-px">
{selected[i] ? '☑' : '☐'}
</span>
)}
<div>
<div className="font-medium">{opt.label}</div>
{opt.description && (
<div className="text-fg2 text-xs mt-0.5">{opt.description}</div>
)}
</div>
</button>
))}
</div>
{}
<div className="flex gap-2 justify-between items-center">
<button
className="px-4 py-2 border-none rounded-[10px] text-[13px] font-medium cursor-pointer bg-bg3 text-fg2 hover:text-fg"
onClick={() => { setMode('input'); setFreeText('') }}
>
✎ 自由输入
</button>
{q.multi_select && (
<button
className="px-5 py-2 border-none rounded-[10px] text-[13px] font-semibold cursor-pointer bg-accent text-[#111] disabled:opacity-30"
onClick={submitMulti}
disabled={!selected.some(Boolean)}
>
确认
</button>
)}
</div>
</>
) : (
/* Free text input mode */
<div className="flex flex-col gap-2.5">
<input
type="text"
className="w-full px-4 py-3 border border-accent/30 rounded-xl bg-bg text-fg text-sm outline-none font-[inherit] focus:border-accent"
placeholder="输入你的回答..."
value={freeText}
onChange={e => setFreeText(e.target.value)}
onKeyDown={e => {
if (e.key === 'Enter') submitFreeText()
if (e.key === 'Escape') setMode('select')
}}
autoFocus
/>
<div className="flex gap-2 justify-end">
<button
className="px-4.5 py-2 border-none rounded-[10px] text-[13px] font-semibold cursor-pointer bg-bg3 text-fg2"
onClick={() => setMode('select')}
>
返回
</button>
<button
className="px-4.5 py-2 border-none rounded-[10px] text-[13px] font-semibold cursor-pointer bg-accent text-[#111] disabled:opacity-30"
onClick={submitFreeText}
disabled={!freeText.trim()}
>
提交
</button>
</div>
</div>
)}
</div>
</div>
)
}