import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { cookies, headers } from 'next/headers';
import { getListingBySlug, DEFAULT_LOCALE } from '../../../lib/listings';
import { resolveLocale, t as translate } from '../../../lib/i18n';

type ListingPageProps = {
  params: { slug: string };
};

export async function generateMetadata({ params }: ListingPageProps): Promise<Metadata> {
  const translation = await getListingBySlug({ slug: params.slug, locale: DEFAULT_LOCALE });

  return {
    title: translation ? `${translation.title} | Lomavuokraus.fi` : `${params.slug} | Lomavuokraus.fi`,
    description: translation?.teaser ?? translation?.description?.slice(0, 140),
  };
}

export default async function ListingPage({ params }: ListingPageProps) {
  const cookieStore = cookies();
  const locale = resolveLocale({ cookieLocale: cookieStore.get('locale')?.value, acceptLanguage: headers().get('accept-language') });
  const t = (key: any, vars?: Record<string, string | number>) => translate(locale, key as any, vars);

  const translation = await getListingBySlug({ slug: params.slug, locale: locale ?? DEFAULT_LOCALE });

  if (!translation) {
    notFound();
  }

  const { listing, title, description, teaser, locale: translationLocale } = translation;

  return (
    <main className="listing-shell">
      <div className="breadcrumb">
        <Link href="/">{t('homeCrumb')}</Link> / <span>{params.slug}</span>
      </div>
      <div className="panel">
        <h1>{title}</h1>
        <p style={{ marginTop: 8 }}>{teaser ?? description}</p>
        <div style={{ marginTop: 12 }}>
          <strong>{t('listingAddress')}:</strong> {listing.streetAddress ? `${listing.streetAddress}, ` : ''}
          {listing.city}, {listing.region}, {listing.country}
        </div>
        {listing.addressNote ? (
          <div style={{ marginTop: 4, color: '#cbd5e1' }}>
            <em>{listing.addressNote}</em>
          </div>
        ) : null}
        <div style={{ marginTop: 12 }}>
          <strong>{t('listingCapacity')}:</strong> {t('capacityGuests', { count: listing.maxGuests })} - {t('capacityBedrooms', { count: listing.bedrooms })} -{' '}
          {t('capacityBeds', { count: listing.beds })} - {t('capacityBathrooms', { count: listing.bathrooms })}
        </div>
        <div style={{ marginTop: 8 }}>
          <strong>{t('listingAmenities')}:</strong>{' '}
          {[
            listing.hasSauna && t('amenitySauna'),
            listing.hasFireplace && t('amenityFireplace'),
            listing.hasWifi && t('amenityWifi'),
            listing.petsAllowed && t('amenityPets'),
            listing.byTheLake && t('amenityLake'),
            listing.hasAirConditioning && t('amenityAirConditioning'),
            listing.evCharging === 'FREE' && t('amenityEvFree'),
            listing.evCharging === 'PAID' && t('amenityEvPaid'),
          ]
            .filter(Boolean)
            .join(', ') || '-'}
        </div>
        <div style={{ marginTop: 8 }}>
          <strong>{t('listingContact')}:</strong> {listing.contactName} - {listing.contactEmail}
          {listing.contactPhone ? ` - ${listing.contactPhone}` : ''}
          {listing.externalUrl ? (
            <>
              {' - '}
              <a href={listing.externalUrl} target="_blank" rel="noreferrer">
                {t('listingMoreInfo')}
              </a>
            </>
          ) : null}
        </div>
        {listing.images.length > 0 ? (
          <div style={{ marginTop: 16, display: 'grid', gap: 8, gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))' }}>
            {listing.images.map((img) => (
              <figure key={img.id} style={{ border: '1px solid #ddd', borderRadius: 8, overflow: 'hidden', background: '#fafafa' }}>
                <img src={img.url} alt={img.altText ?? title} style={{ width: '100%', height: '180px', objectFit: 'cover' }} />
                {img.altText ? (
                  <figcaption style={{ padding: '8px 12px', fontSize: 14, color: '#444' }}>{img.altText}</figcaption>
                ) : null}
              </figure>
            ))}
          </div>
        ) : null}
        <div style={{ marginTop: 16, fontSize: 14, color: '#666' }}>
          {t('localeLabel')}: <code>{translationLocale}</code>
        </div>
      </div>
    </main>
  );
}