import { useState } from 'react'
import type { Question } from '../types/quiz'
import { ProgressBar } from './ProgressBar'

interface QuestionScreenProps {
  question: Question
  current: number
  total: number
  onAnswer: (answer: string | string[]) => void
}

export function QuestionScreen({ question, current, total, onAnswer }: QuestionScreenProps) {
  const [selected, setSelected] = useState<string[]>([])
  const [textValue, setTextValue] = useState('')

  const handleSingleSelect = (optionId: string) => {
    setSelected([optionId])
    setTimeout(() => onAnswer(optionId), 400)
  }

  const handleMultiToggle = (optionId: string) => {
    setSelected(prev =>
      prev.includes(optionId)
        ? prev.filter(id => id !== optionId)
        : [...prev, optionId]
    )
  }

  const handleMultiSubmit = () => {
    if (selected.length > 0) onAnswer(selected)
  }

  const handleTextSubmit = () => {
    if (textValue.trim()) onAnswer(textValue.trim())
  }

  return (
    <div key={question.id} className="animate-fade-in flex flex-col min-h-screen px-5 pt-14 pb-8">
      <ProgressBar current={current} total={total} />

      <h2 className="text-[22px] font-bold leading-snug tracking-tight text-(--color-text-primary) mb-7">
        {question.text}
      </h2>

      {/* Single choice */}
      {question.type === 'single' && (
        <div className="flex flex-col gap-2">
          {question.options.map(opt => (
            <button
              key={opt.id}
              onClick={() => handleSingleSelect(opt.id)}
              className={`flex items-center gap-3.5 px-4 py-3.5 bg-(--color-bg-card) border rounded-xl cursor-pointer transition-all duration-200 shadow-sm text-left
                ${selected.includes(opt.id) ? 'border-(--color-border-selected) bg-(--color-bg-selected)' : 'border-(--color-border) hover:bg-(--color-bg-hover) hover:border-(--color-border-hover)'}`}
            >
              {opt.emoji && <span className="text-[22px] w-8 text-center shrink-0">{opt.emoji}</span>}
              <span className="text-[15px] font-medium text-(--color-text-primary) flex-1">{opt.text}</span>
              <span className={`w-5 h-5 rounded-full border-2 shrink-0 relative transition-all duration-200
                ${selected.includes(opt.id) ? 'border-(--color-accent) bg-(--color-accent)' : 'border-(--color-border)'}`}>
                {selected.includes(opt.id) && (
                  <span className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-(--color-accent-text)" />
                )}
              </span>
            </button>
          ))}
        </div>
      )}

      {/* Multi choice */}
      {question.type === 'multi' && (
        <>
          <div className="flex flex-col gap-2">
            {question.options.map(opt => (
              <button
                key={opt.id}
                onClick={() => handleMultiToggle(opt.id)}
                className={`flex items-center gap-3.5 px-4 py-3.5 bg-(--color-bg-card) border rounded-xl cursor-pointer transition-all duration-200 shadow-sm text-left
                  ${selected.includes(opt.id) ? 'border-(--color-border-selected) bg-(--color-bg-selected)' : 'border-(--color-border) hover:bg-(--color-bg-hover) hover:border-(--color-border-hover)'}`}
              >
                {opt.emoji && <span className="text-[22px] w-8 text-center shrink-0">{opt.emoji}</span>}
                <span className="text-[15px] font-medium text-(--color-text-primary) flex-1">{opt.text}</span>
                <span className={`w-5 h-5 rounded shrink-0 border-2 flex items-center justify-center transition-all duration-200
                  ${selected.includes(opt.id) ? 'border-(--color-accent) bg-(--color-accent)' : 'border-(--color-border)'}`}>
                  {selected.includes(opt.id) && (
                    <svg className="w-3 h-3 text-(--color-accent-text)" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
                      <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                    </svg>
                  )}
                </span>
              </button>
            ))}
          </div>
          <div className="flex-1" />
          <button
            onClick={handleMultiSubmit}
            disabled={selected.length === 0}
            className="w-full py-3.5 bg-(--color-accent) text-(--color-accent-text) rounded-xl text-[15px] font-semibold tracking-tight transition-all disabled:opacity-30 mt-6"
          >
            Continue
          </button>
        </>
      )}

      {/* Image cards */}
      {question.type === 'image_cards' && (
        <div className="grid grid-cols-2 gap-2">
          {question.options.map(opt => (
            <button
              key={opt.id}
              onClick={() => handleSingleSelect(opt.id)}
              className={`flex flex-col items-center p-3 bg-(--color-bg-card) border rounded-xl cursor-pointer transition-all duration-200 shadow-sm
                ${selected.includes(opt.id) ? 'border-(--color-border-selected) bg-(--color-bg-selected)' : 'border-(--color-border) hover:bg-(--color-bg-hover)'}`}
            >
              {opt.image_url ? (
                <img src={opt.image_url} alt={opt.text} className="w-full aspect-square object-cover rounded-lg mb-2" />
              ) : (
                <div className="w-full aspect-square bg-(--color-bg-hover) rounded-lg mb-2 flex items-center justify-center text-3xl">
                  {opt.emoji || '📷'}
                </div>
              )}
              <span className="text-[13px] font-medium text-(--color-text-primary) text-center">{opt.text}</span>
            </button>
          ))}
        </div>
      )}

      {/* Text input */}
      {question.type === 'text_input' && (
        <>
          <input
            type="text"
            value={textValue}
            onChange={e => setTextValue(e.target.value)}
            onKeyDown={e => e.key === 'Enter' && handleTextSubmit()}
            placeholder={question.placeholder || ''}
            className="w-full px-3.5 py-3 text-[15px] bg-(--color-bg-card) border border-(--color-border) rounded-lg text-(--color-text-primary) outline-none transition-colors focus:border-(--color-accent) placeholder:text-(--color-text-tertiary)"
            autoFocus
          />
          <div className="flex-1" />
          <button
            onClick={handleTextSubmit}
            disabled={!textValue.trim()}
            className="w-full py-3.5 bg-(--color-accent) text-(--color-accent-text) rounded-xl text-[15px] font-semibold tracking-tight transition-all disabled:opacity-30 mt-6"
          >
            Continue
          </button>
        </>
      )}
    </div>
  )
}