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

interface GlossaryAnchorContent {
  type: 'glossary_anchor'
  term: string
  definition: string
  correct_use: string
  misuse: string
}

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

export function GlossaryAnchor({ content, onComplete }: Props) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-4)' }}>
      <div
        style={{
          background: 'var(--bg-dark)',
          color: 'var(--paper)',
          borderRadius: 'var(--r-lg)',
          padding: 'var(--s-5)',
          textAlign: 'center',
        }}
      >
        <p
          style={{
            margin: '0 0 var(--s-2)',
            fontSize: 'var(--t-label)',
            fontFamily: 'var(--font-mono)',
            textTransform: 'uppercase',
            letterSpacing: 'var(--label-ls)',
            opacity: 0.65,
          }}
        >
          Term
        </p>
        <h2
          style={{
            margin: '0 0 var(--s-4)',
            fontSize: 'var(--t-h3)',
            fontWeight: 700,
            fontFamily: 'var(--font-sans)',
          }}
        >
          {content.term}
        </h2>
        <p style={{ margin: 0, fontSize: 'var(--t-body)', lineHeight: 1.65, opacity: 0.9 }}>
          {content.definition}
        </p>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-3)' }}>
        <Section
          label="Correct use"
          text={content.correct_use}
          borderColor="var(--success)"
          labelColor="var(--teal-700)"
        />
        <Section
          label="Common misuse"
          text={content.misuse}
          borderColor="#f5c6cb"
          labelColor="#c0392b"
        />
      </div>

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

function Section({
  label,
  text,
  borderColor,
  labelColor,
}: {
  label: string
  text: string
  borderColor: string
  labelColor: string
}) {
  return (
    <div
      style={{
        borderLeft: `4px solid ${borderColor}`,
        background: 'var(--bg-warm)',
        borderRadius: 'var(--r-sm)',
        padding: 'var(--s-4)',
      }}
    >
      <p
        style={{
          margin: '0 0 var(--s-2)',
          fontSize: 'var(--t-label)',
          fontFamily: 'var(--font-mono)',
          textTransform: 'uppercase',
          letterSpacing: 'var(--label-ls)',
          color: labelColor,
        }}
      >
        {label}
      </p>
      <p style={{ margin: 0, fontSize: 'var(--t-body)', lineHeight: 1.6, color: 'var(--fg)' }}>
        {text}
      </p>
    </div>
  )
}
