'use client';

import Link from 'next/link';
import { Fragment, type ReactNode } from 'react';

/**
 * Tiny dependency-free markdown renderer for assistant answers: paragraphs, headings, bullet and
 * numbered lists, pipe tables, bold/italic/code and links (internal links use next/link).
 * Not a full CommonMark implementation — enough for terminal-style research answers.
 */
export function Markdown({ text }: { text: string }) {
  const blocks = splitBlocks(text);
  return <div className="space-y-2 text-[13px] leading-relaxed">{blocks.map((b, i) => <Fragment key={i}>{renderBlock(b)}</Fragment>)}</div>;
}

function splitBlocks(text: string): string[] {
  return text.replace(/\r\n/g, '\n').split(/\n{2,}/).map((b) => b.trim()).filter(Boolean);
}

function renderBlock(block: string): ReactNode {
  const lines = block.split('\n');
  if (lines.length >= 2 && lines.every((l) => l.trim().startsWith('|'))) return renderTable(lines);
  if (lines.every((l) => /^\s*[-*•]\s+/.test(l))) return <ul className="list-disc space-y-0.5 pl-5">{lines.map((l, i) => <li key={i}>{inline(l.replace(/^\s*[-*•]\s+/, ''))}</li>)}</ul>;
  if (lines.every((l) => /^\s*\d+[.)]\s+/.test(l))) return <ol className="list-decimal space-y-0.5 pl-5">{lines.map((l, i) => <li key={i}>{inline(l.replace(/^\s*\d+[.)]\s+/, ''))}</li>)}</ol>;
  const h = block.match(/^(#{1,4})\s+(.*)$/);
  if (h && lines.length === 1) {
    const level = h[1]!.length;
    const cls = level <= 2 ? 'text-sm font-semibold' : 'text-[13px] font-semibold';
    return <p className={cls}>{inline(h[2]!)}</p>;
  }
  if (block.startsWith('```')) return <pre className="overflow-x-auto rounded-md bg-inset p-2 font-mono text-[11px]">{block.replace(/^```\w*\n?/, '').replace(/```$/, '')}</pre>;
  return <p>{lines.map((l, i) => <Fragment key={i}>{i > 0 ? <br /> : null}{inline(l)}</Fragment>)}</p>;
}

function renderTable(lines: string[]): ReactNode {
  const rows = lines.filter((l) => !/^\s*\|?\s*:?-{2,}/.test(l)).map((l) => l.trim().replace(/^\||\|$/g, '').split('|').map((c) => c.trim()));
  const [head, ...body] = rows;
  if (!head) return null;
  return (
    <div className="overflow-x-auto">
      <table className="w-full border-collapse text-[12px]">
        <thead>
          <tr>{head.map((c, i) => <th key={i} className="border-b border-border px-2 py-1 text-left text-[10px] font-semibold uppercase tracking-wider text-subtle">{inline(c)}</th>)}</tr>
        </thead>
        <tbody>
          {body.map((r, i) => (
            <tr key={i}>{r.map((c, j) => <td key={j} className={`border-b border-border px-2 py-1 ${/^[\s$€£¥+\-−]?[\d.,]+%?$/.test(c) ? 'num text-right' : ''}`}>{inline(c)}</td>)}</tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

const INLINE = /(\*\*[^*]+\*\*|\*[^*]+\*|`[^`]+`|\[[^\]]+\]\([^)]+\))/g;

function inline(s: string): ReactNode {
  const parts = s.split(INLINE).filter((p) => p !== '');
  return parts.map((p, i) => {
    if (p.startsWith('**') && p.endsWith('**')) return <strong key={i}>{p.slice(2, -2)}</strong>;
    if (p.startsWith('*') && p.endsWith('*') && p.length > 2) return <em key={i}>{p.slice(1, -1)}</em>;
    if (p.startsWith('`') && p.endsWith('`')) return <code key={i} className="rounded-sm bg-inset px-1 font-mono text-[11px]">{p.slice(1, -1)}</code>;
    const m = p.match(/^\[([^\]]+)\]\(([^)]+)\)$/);
    if (m) {
      const href = m[2]!;
      const cls = 'font-medium underline decoration-border-strong underline-offset-2 hover:decoration-fg';
      return href.startsWith('/') ? <Link key={i} href={href} className={cls}>{m[1]}</Link> : <a key={i} href={href} target="_blank" rel="noreferrer noopener" className={cls}>{m[1]}</a>;
    }
    return <Fragment key={i}>{p}</Fragment>;
  });
}