'use client'
import React, { useState } from 'react'
import { Button } from '@/components/ui/Button'

interface QuizOption {
  label: string
  text: string
  correct: boolean
  explanation: string
}

interface ScenarioQuizContent {
  type: 'scenario_quiz'
  scenario: string
  options: QuizOption[]
}

interface Props {
  content: ScenarioQuizContent
  onComplete: () => void
}

export function ScenarioQuiz({ content, onComplete }: Props) {
  const [selected, setSelected] = useState<number | null>(null)
  const [revealed, setRevealed] = useState(false)

  function handleSelect(idx: number) {
    if (revealed) return
    setSelected(idx)
    setRevealed(true)
  }

  const isCorrect = selected !== null && content.options[selected]?.correct

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-4)' }}>
      <div
        style={{
          background: 'var(--bg-warm)',
          borderRadius: 'var(--r-md)',
          padding: 'var(--s-4)',
          fontSize: 'var(--t-body)',
          lineHeight: 1.65,
          color: 'var(--fg)',
        }}
      >
        {content.scenario}
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-2)' }}>
        {content.options.map((opt, idx) => {
          let bg = 'var(--bg-warm)'
          let border = '1.5px solid var(--cream)'
          let color = 'var(--fg)'

          if (revealed && selected === idx) {
            if (opt.correct) {
              bg = 'var(--success)'
              border = '1.5px solid var(--teal-700)'
              color = 'var(--teal-900)'
            } else {
              bg = '#f8d7da'
              border = '1.5px solid #f5c6cb'
              color = '#c0392b'
            }
          } else if (revealed && opt.correct) {
            bg = 'var(--success)'
            border = '1.5px solid var(--teal-700)'
            color = 'var(--teal-900)'
          }

          return (
            <div key={idx} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-2)' }}>
              <button
                onClick={() => handleSelect(idx)}
                disabled={revealed}
                style={{
                  background: bg,
                  border,
                  borderRadius: 'var(--r-sm)',
                  padding: 'var(--s-3) var(--s-4)',
                  fontSize: 'var(--t-body)',
                  color,
                  textAlign: 'left',
                  cursor: revealed ? 'default' : 'pointer',
                  minHeight: '44px',
                  transition: 'background 200ms, border-color 200ms',
                  display: 'flex',
                  gap: 'var(--s-3)',
                  alignItems: 'flex-start',
                  fontFamily: 'var(--font-sans)',
                }}
              >
                <span
                  style={{
                    fontSize: 'var(--t-label)',
                    fontFamily: 'var(--font-mono)',
                    fontWeight: 700,
                    textTransform: 'uppercase',
                    flexShrink: 0,
                    paddingTop: '2px',
                  }}
                >
                  {opt.label}
                </span>
                <span>{opt.text}</span>
              </button>
              {revealed && selected === idx && (
                <div
                  style={{
                    fontSize: 'var(--t-small)',
                    color: 'var(--fg-muted)',
                    padding: '0 var(--s-4)',
                    lineHeight: 1.5,
                  }}
                >
                  {opt.explanation}
                </div>
              )}
            </div>
          )
        })}
      </div>

      {revealed && (
        <div
          style={{
            padding: 'var(--s-3) var(--s-4)',
            borderRadius: 'var(--r-sm)',
            background: isCorrect ? 'var(--success)' : '#f8d7da',
            color: isCorrect ? 'var(--teal-900)' : '#c0392b',
            fontSize: 'var(--t-body)',
            fontWeight: 500,
          }}
        >
          {isCorrect ? 'Correct!' : 'Not quite — see the highlighted answer above.'}
        </div>
      )}

      {revealed && (
        <Button variant="primary" onClick={onComplete} style={{ alignSelf: 'flex-end' }}>
          Continue
        </Button>
      )}
    </div>
  )
}
