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

interface MythVsEvidenceContent {
  type: 'myth_vs_evidence'
  myth: string
  evidence: string
  sources: string[]
}

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

export function MythVsEvidence({ content, onComplete }: Props) {
  const [revealed, setRevealed] = useState(false)

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-4)' }}>
      <div
        style={{
          background: '#f8d7da',
          borderRadius: 'var(--r-md)',
          padding: 'var(--s-5)',
        }}
      >
        <p
          style={{
            margin: '0 0 var(--s-2)',
            fontSize: 'var(--t-label)',
            fontFamily: 'var(--font-mono)',
            textTransform: 'uppercase',
            letterSpacing: 'var(--label-ls)',
            color: '#c0392b',
          }}
        >
          Myth
        </p>
        <p style={{ margin: 0, fontSize: 'var(--t-body)', lineHeight: 1.65, color: 'var(--fg)' }}>
          {content.myth}
        </p>
      </div>

      {!revealed ? (
        <Button variant="secondary" onClick={() => setRevealed(true)}>
          Reveal the evidence
        </Button>
      ) : (
        <>
          <div
            style={{
              background: 'var(--bg-warm)',
              borderLeft: '4px solid var(--success)',
              borderRadius: 'var(--r-sm)',
              padding: 'var(--s-5)',
              animation: 'fadeIn 300ms ease',
            }}
          >
            <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)',
              }}
            >
              Evidence
            </p>
            <p style={{ margin: 0, fontSize: 'var(--t-body)', lineHeight: 1.65, color: 'var(--fg)' }}>
              {content.evidence}
            </p>
          </div>

          {content.sources.length > 0 && (
            <div>
              <p
                style={{
                  margin: '0 0 var(--s-2)',
                  fontSize: 'var(--t-label)',
                  fontFamily: 'var(--font-mono)',
                  textTransform: 'uppercase',
                  letterSpacing: 'var(--label-ls)',
                  color: 'var(--fg-subtle)',
                }}
              >
                Sources
              </p>
              <ul style={{ margin: 0, padding: '0 0 0 var(--s-4)' }}>
                {content.sources.map((src, i) => (
                  <li
                    key={i}
                    style={{ fontSize: 'var(--t-small)', color: 'var(--fg-muted)', lineHeight: 1.6 }}
                  >
                    {src}
                  </li>
                ))}
              </ul>
            </div>
          )}

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