import { ImageResponse } from 'next/og';

// Dynamic gradient banner used as the link-preview image (og:image / twitter
// image) when a JD is shared to LinkedIn, WhatsApp, X, etc. Next wires the
// og:image meta automatically from this file.
export const runtime = 'nodejs';
export const alt = 'We are hiring';
export const size = { width: 1200, height: 630 };
export const contentType = 'image/png';

const CAREERS_API = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000/api/v1';

export default async function Image({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  let job: any = null;
  try {
    const res = await fetch(`${CAREERS_API}/public/jobs/${id}/`, { cache: 'no-store' });
    if (res.ok) {
      const body = await res.json();
      job = body?.data ?? body ?? null;
    }
  } catch {
    /* fall through to defaults */
  }

  const title = job?.title || 'We are hiring';
  const client = job?.client_name || 'Indovision Services';
  const location = job?.location || '';
  const exp = job?.experience_band || '';
  const skills: string[] = String(job?.must_have_skills || '')
    .split(',')
    .map((s) => s.trim())
    .filter(Boolean)
    .slice(0, 6);

  return new ImageResponse(
    (
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'space-between',
          padding: '64px 72px',
          background: 'linear-gradient(135deg, #1e293b 0%, #405189 55%, #0ab39c 100%)',
          color: 'white',
          fontFamily: 'sans-serif',
        }}
      >
        {/* Top: brand + hiring pill */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ display: 'flex', alignItems: 'center', fontSize: 30, fontWeight: 800, letterSpacing: -0.5 }}>
            {client}
          </div>
          <div
            style={{
              display: 'flex',
              padding: '10px 24px',
              background: 'rgba(255,255,255,0.15)',
              borderRadius: 999,
              fontSize: 24,
              fontWeight: 700,
            }}
          >
            🚀 We&apos;re hiring
          </div>
        </div>

        {/* Middle: role title + meta */}
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <div style={{ display: 'flex', fontSize: 74, fontWeight: 800, lineHeight: 1.05, letterSpacing: -1 }}>
            {title}
          </div>
          <div style={{ display: 'flex', gap: 28, marginTop: 24, fontSize: 30, color: 'rgba(255,255,255,0.9)' }}>
            {location ? <span style={{ display: 'flex' }}>📍 {location}</span> : null}
            {exp ? <span style={{ display: 'flex' }}>💼 {exp}</span> : null}
          </div>
        </div>

        {/* Bottom: skill chips + CTA */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14 }}>
            {skills.map((s) => (
              <div
                key={s}
                style={{
                  display: 'flex',
                  padding: '10px 20px',
                  background: 'rgba(255,255,255,0.16)',
                  border: '1px solid rgba(255,255,255,0.35)',
                  borderRadius: 10,
                  fontSize: 24,
                  fontWeight: 600,
                }}
              >
                {s}
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', fontSize: 26, fontWeight: 700, color: '#e2e8f0' }}>
            Apply now →
          </div>
        </div>
      </div>
    ),
    { ...size },
  );
}