import { ImageResponse } from 'next/og';
import { serverFetch } from '@/lib/server-api';
import { buildJobSharePayload, buildWorkerSharePayload } from '@/lib/share';

export const runtime = 'edge';

function BrandMark({ logoSrc }: { logoSrc: string }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img src={logoSrc} width={56} height={56} alt="" style={{ objectFit: 'contain' }} />
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        <span style={{ fontSize: 28, fontWeight: 800, color: '#ffffff' }}>
          <span style={{ color: '#d97706' }}>e</span>
          HandyHire
        </span>
        <span style={{ fontSize: 18, color: '#cbd5e1' }}>Philippines workers directory</span>
      </div>
    </div>
  );
}

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const type = searchParams.get('type');
  const id = searchParams.get('id');
  const origin = new URL(request.url).origin;
  const logoSrc = `${origin}/brand/logo-house.png`;

  if (!id || (type !== 'job' && type !== 'worker')) {
    return new Response('Invalid request', { status: 400 });
  }

  try {
    const payload =
      type === 'job'
        ? buildJobSharePayload(await serverFetch<Record<string, unknown>>(`/jobs/${id}`, 300))
        : buildWorkerSharePayload(await serverFetch<Record<string, unknown>>(`/workers/${id}`, 300));

    return new ImageResponse(
      (
        <div
          style={{
            width: '100%',
            height: '100%',
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'space-between',
            background: 'linear-gradient(160deg, #0c1929 0%, #16324f 60%, #0a1522 100%)',
            color: '#ffffff',
            padding: '56px',
            fontFamily: 'system-ui, sans-serif',
          }}
        >
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <BrandMark logoSrc={logoSrc} />
            <span style={{ fontSize: 18, color: '#fbbf24', marginLeft: 72 }}>
              {type === 'job' ? 'Open job in the Philippines' : 'Verified worker profile'}
            </span>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 18, maxWidth: 1000 }}>
            <span
              style={{
                fontSize: 22,
                fontWeight: 700,
                color: '#fbbf24',
                textTransform: 'uppercase',
                letterSpacing: 2,
              }}
            >
              {type === 'job' ? 'Job opportunity' : 'Hire with confidence'}
            </span>
            <span
              style={{
                fontSize: 58,
                fontWeight: 800,
                lineHeight: 1.1,
                letterSpacing: -1,
              }}
            >
              {payload.title.length > 72 ? `${payload.title.slice(0, 72)}…` : payload.title}
            </span>
            <span style={{ fontSize: 28, color: '#e2e8f0', lineHeight: 1.35 }}>
              {payload.description.length > 140
                ? `${payload.description.slice(0, 140)}…`
                : payload.description}
            </span>
          </div>

          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
              fontSize: 22,
              color: '#cbd5e1',
            }}
          >
            <span>ehandyhire.com</span>
            <span>{type === 'job' ? 'Apply or share' : 'View profile'}</span>
          </div>
        </div>
      ),
      {
        width: 1200,
        height: 630,
      }
    );
  } catch {
    return new ImageResponse(
      (
        <div
          style={{
            width: '100%',
            height: '100%',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            gap: 24,
            background: 'linear-gradient(160deg, #0c1929 0%, #16324f 100%)',
            color: 'white',
            fontFamily: 'system-ui, sans-serif',
          }}
        >
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img src={logoSrc} width={80} height={80} alt="" style={{ objectFit: 'contain' }} />
          <span style={{ fontSize: 48, fontWeight: 700 }}>
            <span style={{ color: '#d97706' }}>e</span>
            HandyHire
          </span>
        </div>
      ),
      { width: 1200, height: 630 }
    );
  }
}