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

interface Flashcard {
  question: string
  answer: string
}

interface FlashcardSetContent {
  type: 'flashcard_set'
  cards: Flashcard[]
}

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

export function FlashcardSet({ content, onComplete }: Props) {
  const [currentIdx, setCurrentIdx] = useState(0)
  const [flipped, setFlipped] = useState(false)
  const [done, setDone] = useState(false)

  const card = content.cards[currentIdx]
  const isLast = currentIdx === content.cards.length - 1

  function handleNext() {
    if (isLast) {
      setDone(true)
    } else {
      setCurrentIdx((i) => i + 1)
      setFlipped(false)
    }
  }

  function handlePrev() {
    if (currentIdx > 0) {
      setCurrentIdx((i) => i - 1)
      setFlipped(false)
    }
  }

  if (!card) return null

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-4)', alignItems: 'center' }}>
      <div style={{ fontSize: 'var(--t-small)', color: 'var(--fg-muted)', alignSelf: 'flex-end' }}>
        {currentIdx + 1} / {content.cards.length}
      </div>

      <button
        onClick={() => setFlipped((f) => !f)}
        style={{
          width: '100%',
          minHeight: '200px',
          borderRadius: 'var(--r-lg)',
          border: '1.5px solid var(--cream)',
          background: flipped ? 'var(--bg-dark)' : 'var(--bg)',
          color: flipped ? 'var(--paper)' : 'var(--fg)',
          padding: 'var(--s-6)',
          fontSize: 'var(--t-lead)',
          lineHeight: 1.6,
          cursor: 'pointer',
          textAlign: 'center',
          fontFamily: 'var(--font-sans)',
          transition: 'background 250ms, color 250ms',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          gap: 'var(--s-3)',
          boxShadow: 'var(--shadow-soft)',
        }}
        aria-label={flipped ? 'Answer — tap to see question' : 'Question — tap to reveal answer'}
      >
        <span
          style={{
            fontSize: 'var(--t-label)',
            fontFamily: 'var(--font-mono)',
            textTransform: 'uppercase',
            letterSpacing: 'var(--label-ls)',
            opacity: 0.65,
          }}
        >
          {flipped ? 'Answer' : 'Question'}
        </span>
        <span>{flipped ? card.answer : card.question}</span>
        <span style={{ fontSize: 'var(--t-small)', opacity: 0.5, marginTop: 'var(--s-2)' }}>
          Tap to flip
        </span>
      </button>

      <div style={{ display: 'flex', gap: 'var(--s-3)', width: '100%' }}>
        <Button
          variant="secondary"
          onClick={handlePrev}
          disabled={currentIdx === 0}
          style={{ flex: 1 }}
        >
          Previous
        </Button>
        {flipped ? (
          <Button variant="primary" onClick={handleNext} style={{ flex: 1 }}>
            {isLast ? 'Finish' : 'Next'}
          </Button>
        ) : (
          <Button variant="ghost" onClick={() => setFlipped(true)} style={{ flex: 1 }}>
            Reveal
          </Button>
        )}
      </div>

      {done && (
        <Button variant="primary" onClick={onComplete} style={{ width: '100%' }}>
          All cards done — mark complete
        </Button>
      )}
    </div>
  )
}
