import { ImageResponse } from 'next/og';
import { getRegisters } from '@/services/register.service';
import { buildRegisterSummaryLines } from '@/utils/register_helpers';

export const runtime = 'nodejs';

export const size = {
  width: 1200,
  height: 630,
};

export const contentType = 'image/png';

const splitLongWord = (word: string, maxLineLength: number) => {
  if (word.length <= maxLineLength) return [word];
  const chunks: string[] = [];
  for (let idx = 0; idx < word.length; idx += maxLineLength - 1) {
    chunks.push(`${word.slice(idx, idx + maxLineLength - 1)}-`);
  }
  const last = chunks[chunks.length - 1];
  chunks[chunks.length - 1] = last.endsWith('-') ? last.slice(0, -1) : last;
  return chunks;
};

const wrapText = (text: string, maxLineLength: number) => {
  const words = text
    .split(/\s+/)
    .filter(Boolean)
    .flatMap(word => splitLongWord(word, maxLineLength));
  const lines: string[] = [];
  let current = '';

  for (const word of words) {
    const next = current ? `${current} ${word}` : word;
    if (next.length > maxLineLength && current) {
      lines.push(current);
      current = word;
    } else {
      current = next;
    }
  }

  if (current) {
    lines.push(current);
  }

  return lines;
};

const wrapTextLines = (sourceLines: string[], maxLineLength: number, maxLines: number) => {
  const output: string[] = [];
  for (const line of sourceLines) {
    if (output.length >= maxLines) break;
    if (!line) {
      if (output.length > 0 && output[output.length - 1] !== '') {
        output.push('');
      }
      continue;
    }
    const wrapped = wrapText(line, maxLineLength);
    for (const wrappedLine of wrapped) {
      if (output.length >= maxLines) break;
      output.push(wrappedLine);
    }
  }
  return output.slice(0, maxLines);
};

export default async function Image({ params }: { params: Promise<{ hex: string }> }) {
  const { hex } = await params;
  const targetHex = decodeURIComponent(hex).toLowerCase();
  const registers = await getRegisters();
  const register = registers.find(r => r.hex_address.toLowerCase() === targetHex);

  const title = register ? `${register.hex_address} ${register.name}` : 'Spectrum Next Register';
  const summaryLinesSource = register
    ? buildRegisterSummaryLines(register)
    : ['Register details not found.'];
  const decAddress = register ? `Dec ${register.dec_address}` : '';
  const titleLines = wrapTextLines([title], 32, 2);
  const summaryLines = wrapTextLines(summaryLinesSource, 54, 6);

  return new ImageResponse(
    (
      <div
        style={{
          width: '1200px',
          height: '630px',
          display: 'flex',
          background: 'linear-gradient(135deg, #3f1f6e 0%, #593196 55%, #7a4cc4 100%)',
          color: '#f3f2ed',
          fontFamily: 'Arial, sans-serif',
          padding: '64px',
          boxSizing: 'border-box',
        }}
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', width: '100%' }}>
          <div style={{ fontSize: '28px', letterSpacing: '2px', textTransform: 'uppercase', color: '#e8dcff' }}>
            Spectrum Next Explorer
          </div>
          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              gap: '6px',
              fontSize: '68px',
              fontWeight: 700,
              lineHeight: 1.05,
            }}
          >
            {titleLines.map((line, idx) => (
              <div key={idx}>{line}</div>
            ))}
          </div>
          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              gap: '6px',
              fontSize: '32px',
              lineHeight: 1.35,
              color: '#f7f1ff',
            }}
          >
            {summaryLines.map((line, idx) => (
              <div key={idx}>{line}</div>
            ))}
          </div>
          <div style={{ marginTop: 'auto', fontSize: '26px', color: '#dacbff' }}>
            {decAddress}
          </div>
        </div>
      </div>
    ),
    {
      width: size.width,
      height: size.height,
    }
  );
}
