import type { ReactNode } from 'react'
import type { LegalBlock, LegalDoc as LegalDocData, LegalListItem } from '../model/types'
import styles from './LegalDoc.module.css'

/** «Жирный зачин + остаток» либо простая строка. Разделитель (—, :) пишется в text. */
function renderItem(item: LegalListItem): ReactNode {
  if (typeof item === 'string') return item
  return (
    <>
      <strong>{item.strong}</strong>
      {item.text ? ` ${item.text}` : null}
    </>
  )
}

function Block({ block }: { block: LegalBlock }) {
  switch (block.kind) {
    case 'text':
      return (
        <p className={block.variant ? `${styles.text} ${styles[block.variant]}` : styles.text}>
          {block.text}
        </p>
      )
    case 'subheading':
      return <h4 className={styles.subheading}>{block.text}</h4>
    case 'list':
      return (
        <ul className={styles.list}>
          {block.items.map((item, i) => (
            <li key={i}>{renderItem(item)}</li>
          ))}
        </ul>
      )
    case 'definitions':
      return (
        <div className={styles.definitions}>
          {block.items.map((d, i) => (
            <div key={i} className={styles.definition}>
              <strong>{d.term}</strong> {d.text}
            </div>
          ))}
        </div>
      )
    case 'goals':
      return (
        <div className={styles.goals}>
          {block.items.map((g, i) => (
            <div key={i} className={styles.goal}>
              <strong>{g.title}</strong>
              <ul>
                {g.items.map((t, j) => (
                  <li key={j}>{t}</li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      )
    case 'infoBox':
      return (
        <div className={styles.infoBox}>
          {block.lines.map((line, i) => (
            <p key={i}>{renderItem(line)}</p>
          ))}
        </div>
      )
    case 'link':
      return (
        <div className={styles.linkBlock}>
          <a href={block.href} target="_blank" rel="noopener noreferrer" className={styles.button}>
            {block.text}
          </a>
        </div>
      )
  }
}

/**
 * Единый шаблон юридической страницы. Получает данные документа (`LegalDoc`) и
 * рендерит `main → container → title/subtitle → sections → blocks`.
 * Header/Footer добавляет страница-обёртка, не этот компонент (entities < widgets).
 */
export function LegalDoc({ doc }: { doc: LegalDocData }) {
  return (
    <main className={styles.main}>
      <div className={styles.container}>
        <h1 className={styles.title}>{doc.title}</h1>
        {doc.subtitle && <h2 className={styles.subtitle}>{doc.subtitle}</h2>}

        {doc.sections.map((section, i) => (
          <section key={i} className={styles.section}>
            {section.title && <h3 className={styles.sectionTitle}>{section.title}</h3>}
            {section.blocks.map((block, j) => (
              <Block key={j} block={block} />
            ))}
          </section>
        ))}
      </div>
    </main>
  )
}
