/**
 * 视图块渲染 —— 无业务语义的展示原语(编码规范 §2 packages/ui-kit)。
 * DOM 与类名自原型平移(`jc-*`),渲染输出保持 1:1。
 */
import type { ViewBlock } from '@contracts';

export function ViewBlocks({ blocks }: { readonly blocks: readonly ViewBlock[] }) {
  return (
    <>
      {blocks.map((block, i) => (
        <Block key={i} block={block} />
      ))}
    </>
  );
}

function Block({ block }: { block: ViewBlock }) {
  switch (block.t) {
    case 'callout':
      return <p className={'jc-callout tone-' + block.tone}>{block.text}</p>;

    case 'kv':
      return (
        <section className="jc-kv">
          {block.title !== undefined && <h4>{block.title}</h4>}
          <dl>
            {block.items.map((item, i) => (
              <div key={i}>
                <dt>{item.k}</dt>
                <dd>{item.v}</dd>
              </div>
            ))}
          </dl>
        </section>
      );

    case 'badges':
      return (
        <section className="jc-badges">
          {block.title !== undefined && <h4>{block.title}</h4>}
          {block.items.map((item, i) => (
            <span key={i} className={item.on ? 'on' : ''}>
              {item.label}
            </span>
          ))}
        </section>
      );

    case 'table':
      return (
        <section className="jc-table-wrap">
          {block.title !== undefined && <h4>{block.title}</h4>}
          <table className="jc-table">
            <thead>
              <tr>
                {block.cols.map((c, i) => (
                  <th key={i}>{c}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {block.rows.map((row, i) => (
                <tr key={i}>
                  {row.map((cell, j) => (
                    <td key={j}>{cell}</td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </section>
      );

    case 'bars':
      return (
        <section className="jc-bars">
          {block.title !== undefined && <h4>{block.title}</h4>}
          {block.items.map((item, i) => (
            <div key={i} className={'jc-bar tone-' + (item.tone ?? 'brand')}>
              <span className="jc-bar-label">{item.label}</span>
              <span className="jc-bar-track">
                <i style={{ width: `${Math.min((item.value / (block.max ?? 100)) * 100, 100)}%` }} />
              </span>
              <span className="jc-bar-value">{item.text ?? item.value}</span>
            </div>
          ))}
        </section>
      );

    case 'donut':
      return (
        <section className="jc-donut">
          {block.title !== undefined && <h4>{block.title}</h4>}
          <ul>
            {block.items.map((item, i) => (
              <li key={i} className={'tone-' + item.tone}>
                <b>{item.value}</b>
                <span>{item.label}</span>
              </li>
            ))}
          </ul>
        </section>
      );

    case 'cards':
      return (
        <section className="jc-cards">
          {block.title !== undefined && <h4>{block.title}</h4>}
          {block.items.map((item, i) => (
            <article key={i} className={'jc-mini-card tone-' + (item.tone ?? 'brand')}>
              <span className="jc-mini-tag">{item.tag}</span>
              <h5>{item.title}</h5>
              {item.swap !== undefined && (
                <p className="jc-swap">
                  <code>{item.swap.from}</code> → <code>{item.swap.to}</code>
                </p>
              )}
              <b className="jc-mini-big">{item.big}</b>
              {item.bigLabel !== undefined && <em>{item.bigLabel}</em>}
              {item.note !== undefined && <p className="jc-mini-note">{item.note}</p>}
            </article>
          ))}
        </section>
      );

    case 'waiting':
      return (
        <p className="jc-waiting">
          {block.label}
          {block.hint !== undefined && <em>{block.hint}</em>}
        </p>
      );

    case 'mail':
      return (
        <article className={'jc-mail dir-' + block.dir}>
          <header>
            <b>{block.subject}</b>
            <span>
              {block.from} → {block.to}
            </span>
            <time>{block.time}</time>
          </header>
          <pre className="jc-mail-body">{block.body}</pre>
        </article>
      );

    case 'files':
      return (
        <section className="jc-files">
          {block.title !== undefined && <h4>{block.title}</h4>}
          {block.items.map((item, i) => (
            <div key={i} className="jc-file">
              <b>{item.label}</b>
              <span>{item.desc}</span>
            </div>
          ))}
        </section>
      );
  }
}