import {ImageResponse} from 'next/og';
import type {NextRequest} from 'next/server';

import {getBricolageFont} from '../../lib/og-font';

export const config = {runtime: 'edge'};

const PLUNK_P_PATH =
  'M955 296.539C955 357.181 939.314 412.83 907.942 463.484C876.57 514.138 830.938 555.517 771.046 587.622C711.155 619.727 639.855 638.633 557.147 644.34L511.158 902.248C493.333 1001.42 444.849 1051 365.707 1051C322.214 1051 281.929 1038.16 244.853 1012.47C208.49 986.791 179.257 947.551 157.154 894.757C135.051 841.963 124 777.04 124 699.988C124 555.161 147.172 432.449 193.517 331.854C240.575 230.546 303.319 154.922 381.749 104.981C460.892 54.327 547.878 29 642.707 29C709.728 29 766.412 40.7717 812.757 64.3152C859.815 87.8586 895.108 119.963 918.637 160.629C942.879 200.582 955 245.885 955 296.539ZM576.398 534.114C722.562 515.565 795.645 439.584 795.645 306.171C795.645 259.084 779.959 220.915 748.587 191.664C717.928 161.699 670.157 146.717 605.274 146.717C531.835 146.717 467.665 169.904 412.764 216.278C358.577 262.651 316.51 327.217 286.564 409.976C257.331 492.021 242.714 585.838 242.714 691.427C242.714 735.66 246.992 774.9 255.548 809.145C264.817 843.39 276.225 870.143 289.772 889.406C304.032 907.956 317.579 917.23 330.413 917.23C348.238 917.23 361.785 892.617 371.054 843.39L406.347 641.13L405.633 646.299L411.708 611.502L416.534 583.854L420.128 561.451L424.529 534.114C433.798 478.466 446.988 403.912 464.1 310.451C468.378 286.194 478.004 269.072 492.977 259.084C508.663 248.382 526.844 243.031 547.521 243.031C571.05 243.031 587.806 247.669 597.788 256.943C608.483 265.505 613.83 279.417 613.83 298.68C613.83 310.095 613.117 319.369 611.691 326.504C597.908 407.581 590.181 453.037 576.398 534.114Z';

export default function handler(req: NextRequest) {
  const {searchParams} = new URL(req.url);
  const title = searchParams.get('title') || 'Email Platform Dashboard';
  const description = searchParams.get('description') || '';

  const fontData = getBricolageFont();

  const titleLength = title.length;
  const fontSize = titleLength < 35 ? 72 : titleLength < 55 ? 60 : titleLength < 75 ? 50 : 42;

  return new ImageResponse(
    (
      <div
        style={{
          width: '1200px',
          height: '630px',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'space-between',
          padding: '64px 72px',
          backgroundColor: '#ffffff',
          fontFamily: '"Bricolage Grotesque"',
          position: 'relative',
          overflow: 'hidden',
        }}
      >
        {/* Ghost P watermark */}
        <div
          style={{
            position: 'absolute',
            bottom: '-60px',
            right: '-30px',
            opacity: 0.035,
            display: 'flex',
          }}
        >
          <svg width="480" height="480" viewBox="0 0 1080 1080" fill="none">
            <path d={PLUNK_P_PATH} fill="#000000" />
          </svg>
        </div>

        {/* Top row: logo + URL */}
        <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
          <div style={{display: 'flex', alignItems: 'center', gap: '10px'}}>
            <svg width="30" height="30" viewBox="0 0 1080 1080" fill="none">
              <path d={PLUNK_P_PATH} fill="#171717" />
            </svg>
            <span
              style={{
                fontSize: '22px',
                fontWeight: 800,
                color: '#171717',
                letterSpacing: '-0.03em',
              }}
            >
              Plunk
            </span>
          </div>
          <span style={{fontSize: '15px', color: '#a3a3a3', letterSpacing: '0.01em'}}>
            next-app.useplunk.com
          </span>
        </div>

        {/* Main content */}
        <div style={{display: 'flex', flexDirection: 'column', gap: '18px', maxWidth: '920px'}}>
          <div
            style={{
              fontSize: `${fontSize}px`,
              fontWeight: 800,
              color: '#0a0a0a',
              lineHeight: 1.08,
              letterSpacing: '-0.04em',
            }}
          >
            {title}
          </div>
          {description ? (
            <div
              style={{
                fontSize: '22px',
                color: '#737373',
                lineHeight: 1.5,
                fontWeight: 400,
                letterSpacing: '-0.01em',
              }}
            >
              {description}
            </div>
          ) : null}
        </div>

        {/* Bottom spacer */}
        <div style={{display: 'flex'}} />
      </div>
    ),
    {
      width: 1200,
      height: 630,
      fonts: [
        {
          name: 'Bricolage Grotesque',
          data: fontData,
          style: 'normal',
          weight: 800,
        },
      ],
    },
  );
}
