import { NextResponse } from 'next/server';
import nodemailer from 'nodemailer';

const transporter = nodemailer.createTransport({
  host: process.env.SMTP_HOST,
  port: Number(process.env.SMTP_PORT) || 587,
  secure: false,
  auth: {
    user: process.env.SMTP_USER,
    pass: process.env.SMTP_PASS,
  },
});

function escapeHtml(str: string): string {
  return str
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;');
}

export async function POST(request: Request) {
  try {
    const body = await request.json();
    const { name, email, service, message } = body;

    if (!name || typeof name !== 'string' || name.trim().length === 0) {
      return NextResponse.json({ error: 'Name is required' }, { status: 400 });
    }
    if (!email || typeof email !== 'string' || !email.includes('@') || !email.includes('.')) {
      return NextResponse.json({ error: 'Valid email is required' }, { status: 400 });
    }
    if (!message || typeof message !== 'string' || message.trim().length === 0) {
      return NextResponse.json({ error: 'Message is required' }, { status: 400 });
    }

    const safeName = escapeHtml(name.trim());
    const safeEmail = escapeHtml(email.trim());
    const safeService = service && typeof service === 'string' ? escapeHtml(service.trim()) : '';
    const safeMessage = escapeHtml(message.trim());

    const serviceSection = safeService
      ? `<div style="margin-bottom: 24px;">
            <p style="font-family: Montserrat, sans-serif; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: #6b6b6b; margin: 0 0 4px 0;">SERVICE</p>
            <p style="font-size: 16px; color: #2d2d2d; margin: 0;">${safeService}</p>
          </div>`
      : '';

    await transporter.sendMail({
      from: `XHIVA Art <${process.env.SMTP_FROM || process.env.SMTP_USER}>`,
      to: 'xhivart@gmail.com',
      replyTo: email.trim(),
      subject: `New message from ${name.trim()} — XHIVA Art`,
      html: `
        <div style="font-family: Georgia, serif; max-width: 600px; margin: 0 auto; padding: 40px 20px;">
          <div style="border-bottom: 2px solid #c9a962; padding-bottom: 20px; margin-bottom: 30px;">
            <h1 style="font-size: 24px; font-weight: 300; letter-spacing: 0.1em; color: #2d2d2d; margin: 0;">
              New Message from XHIVA Art
            </h1>
          </div>
          <div style="margin-bottom: 24px;">
            <p style="font-family: Montserrat, sans-serif; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: #6b6b6b; margin: 0 0 4px 0;">NAME</p>
            <p style="font-size: 16px; color: #2d2d2d; margin: 0;">${safeName}</p>
          </div>
          <div style="margin-bottom: 24px;">
            <p style="font-family: Montserrat, sans-serif; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: #6b6b6b; margin: 0 0 4px 0;">EMAIL</p>
            <p style="font-size: 16px; color: #2d2d2d; margin: 0;">
              <a href="mailto:${safeEmail}" style="color: #c9a962;">${safeEmail}</a>
            </p>
          </div>
          ${serviceSection}
          <div style="margin-bottom: 24px;">
            <p style="font-family: Montserrat, sans-serif; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: #6b6b6b; margin: 0 0 4px 0;">MESSAGE</p>
            <p style="font-size: 16px; color: #2d2d2d; margin: 0; white-space: pre-wrap;">${safeMessage}</p>
          </div>
          <div style="border-top: 1px solid #e5e5e5; padding-top: 20px; margin-top: 30px;">
            <p style="font-family: Montserrat, sans-serif; font-size: 10px; letter-spacing: 0.1em; color: #6b6b6b; margin: 0;">
              Sent from xhiva.art contact form
            </p>
          </div>
        </div>
      `,
    });

    return NextResponse.json({ success: true });
  } catch (err) {
    console.error('Contact API error:', err);
    return NextResponse.json({ error: 'Failed to send message' }, { status: 500 });
  }
}
