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

interface MisconceptionItem {
  misconception: string
  correction: string
}

interface MisconceptionsContent {
  type: 'misconceptions'
  items: MisconceptionItem[]
}

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

export function Misconceptions({ content, onComplete }: Props) {
  const [expanded, setExpanded] = useState<Set<number>>(new Set())

  function toggle(idx: number) {
    setExpanded((prev) => {
      const next = new Set(prev)
      if (next.has(idx)) {
        next.delete(idx)
      } else {
        next.add(idx)
      }
      return next
    })
  }

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-4)' }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-2)' }}>
        {content.items.map((item, idx) => {
          const open = expanded.has(idx)
          return (
            <div
              key={idx}
              style={{
                border: '1.5px solid var(--cream)',
                borderRadius: 'var(--r-sm)',
                overflow: 'hidden',
              }}
            >
              <button
                onClick={() => toggle(idx)}
                style={{
                  width: '100%',
                  background: open ? 'var(--bg-warm)' : 'var(--bg)',
                  border: 'none',
                  padding: 'var(--s-3) var(--s-4)',
                  textAlign: 'left',
                  fontSize: 'var(--t-body)',
                  color: 'var(--fg)',
                  fontFamily: 'var(--font-sans)',
                  cursor: 'pointer',
                  minHeight: '44px',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                  gap: 'var(--s-3)',
                  fontWeight: 500,
                }}
                aria-expanded={open}
              >
                <span>
                  <span
                    style={{
                      fontSize: 'var(--t-label)',
                      fontFamily: 'var(--font-mono)',
                      textTransform: 'uppercase',
                      letterSpacing: 'var(--label-ls)',
                      color: '#c0392b',
                      marginRight: 'var(--s-2)',
                    }}
                  >
                    Myth
                  </span>
                  {item.misconception}
                </span>
                <span style={{ flexShrink: 0, fontSize: '18px', color: 'var(--fg-muted)' }}>
                  {open ? '−' : '+'}
                </span>
              </button>
              {open && (
                <div
                  style={{
                    padding: 'var(--s-3) var(--s-4)',
                    background: 'var(--bg)',
                    borderTop: '1px solid var(--cream)',
                    fontSize: 'var(--t-body)',
                    lineHeight: 1.6,
                    color: 'var(--fg)',
                  }}
                >
                  <span
                    style={{
                      fontSize: 'var(--t-label)',
                      fontFamily: 'var(--font-mono)',
                      textTransform: 'uppercase',
                      letterSpacing: 'var(--label-ls)',
                      color: 'var(--teal-700)',
                      marginRight: 'var(--s-2)',
                    }}
                  >
                    Correction
                  </span>
                  {item.correction}
                </div>
              )}
            </div>
          )
        })}
      </div>

      <Button variant="primary" onClick={onComplete} style={{ alignSelf: 'flex-end' }}>
        Mark complete
      </Button>
    </div>
  )
}
