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

interface ReflectionPromptContent {
  type: 'reflection_prompt'
  prompt: string
  model_answer: string
}

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

export function ReflectionPrompt({ content, onComplete }: Props) {
  const [answer, setAnswer] = useState('')
  const [showModel, setShowModel] = useState(false)

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-4)' }}>
      <div
        style={{
          background: 'var(--bg-dark)',
          color: 'var(--paper)',
          borderRadius: 'var(--r-md)',
          padding: 'var(--s-5)',
          fontSize: 'var(--t-lead)',
          lineHeight: 1.6,
          fontWeight: 500,
        }}
      >
        {content.prompt}
      </div>

      <textarea
        value={answer}
        onChange={(e) => setAnswer(e.target.value)}
        placeholder="Write your reflection here…"
        rows={5}
        style={{
          width: '100%',
          borderRadius: 'var(--r-sm)',
          border: '1.5px solid var(--cream)',
          padding: 'var(--s-3) var(--s-4)',
          fontSize: 'var(--t-body)',
          fontFamily: 'var(--font-sans)',
          color: 'var(--fg)',
          background: 'var(--bg)',
          resize: 'vertical',
          outline: 'none',
          lineHeight: 1.6,
        }}
      />

      {answer.trim().length > 20 && !showModel && (
        <Button variant="secondary" onClick={() => setShowModel(true)}>
          Show model answer
        </Button>
      )}

      {showModel && (
        <div
          style={{
            background: 'var(--bg-warm)',
            borderRadius: 'var(--r-sm)',
            padding: 'var(--s-4)',
            borderLeft: '4px solid var(--success)',
          }}
        >
          <p
            style={{
              margin: '0 0 var(--s-2)',
              fontSize: 'var(--t-label)',
              fontFamily: 'var(--font-mono)',
              textTransform: 'uppercase',
              letterSpacing: 'var(--label-ls)',
              color: 'var(--teal-700)',
            }}
          >
            Model answer
          </p>
          <p style={{ margin: 0, fontSize: 'var(--t-body)', lineHeight: 1.65 }}>
            {content.model_answer}
          </p>
        </div>
      )}

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