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

interface CaseStudyContent {
  type: 'case_study'
  scenario: string
  questions: string[]
}

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

export function CaseStudy({ content, onComplete }: Props) {
  const [answers, setAnswers] = useState<Record<number, string>>({})
  const allAnswered = content.questions.every((_, i) => (answers[i] ?? '').trim().length > 10)

  function setAnswer(idx: number, val: string) {
    setAnswers((prev) => ({ ...prev, [idx]: val }))
  }

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-5)' }}>
      <div
        style={{
          background: 'var(--bg-warm)',
          borderRadius: 'var(--r-md)',
          padding: 'var(--s-5)',
          fontSize: 'var(--t-body)',
          lineHeight: 1.7,
          color: 'var(--fg)',
        }}
      >
        <p
          style={{
            margin: '0 0 var(--s-3)',
            fontSize: 'var(--t-label)',
            fontFamily: 'var(--font-mono)',
            textTransform: 'uppercase',
            letterSpacing: 'var(--label-ls)',
            color: 'var(--fg-muted)',
          }}
        >
          Scenario
        </p>
        {content.scenario}
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-4)' }}>
        {content.questions.map((q, idx) => (
          <div key={idx} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-2)' }}>
            <label
              style={{
                fontSize: 'var(--t-body)',
                fontWeight: 600,
                color: 'var(--fg)',
                lineHeight: 1.5,
              }}
            >
              {idx + 1}. {q}
            </label>
            <textarea
              value={answers[idx] ?? ''}
              onChange={(e) => setAnswer(idx, e.target.value)}
              placeholder="Your answer…"
              rows={3}
              style={{
                width: '100%',
                borderRadius: 'var(--r-sm)',
                border: '1.5px solid var(--cream)',
                padding: 'var(--s-3)',
                fontSize: 'var(--t-body)',
                fontFamily: 'var(--font-sans)',
                color: 'var(--fg)',
                background: 'var(--bg)',
                resize: 'vertical',
                outline: 'none',
                lineHeight: 1.5,
              }}
            />
          </div>
        ))}
      </div>

      <Button
        variant="primary"
        onClick={onComplete}
        disabled={!allAnswered}
        style={{ alignSelf: 'flex-end' }}
      >
        Submit reflections
      </Button>
    </div>
  )
}
