import { Metadata } from 'next';
import { notFound } from 'next/navigation';
import Image from 'next/image';
import Link from 'next/link';
import { Phone, ArrowLeft, ShoppingBag } from 'lucide-react';
import { getProductBySlug, getProducts } from '@/content/products';
import { CtaBanner } from '@/components/sections/CtaBanner';
import { companyDetails } from '@/content/company';

interface Props {
  params: Promise<{ slug: string }>;
}

export async function generateStaticParams() {
  return getProducts().map(p => ({ slug: p.slug }));
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const product = getProductBySlug(slug);
  if (!product) return { title: 'Produkt nie znaleziony' };
  return {
    title: `${product.brand} ${product.name} | Sklep ThermCool`,
    description: product.shortDescription || `Klimatyzator ${product.name} — sprawdź specyfikację i cenę. Profesjonalny montaż na Dolnym Śląsku.`,
    alternates: { canonical: `/sklep/${product.slug}` },
  };
}

export default async function ProductPage({ params }: Props) {
  const { slug } = await params;
  const product = getProductBySlug(slug);
  if (!product) notFound();

  return (
    <main className="bg-slate-50 min-h-screen">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

        {/* Breadcrumb */}
        <Link href="/sklep" className="inline-flex items-center gap-2 text-sm text-text-muted hover:text-accent transition-colors mb-6">
          <ArrowLeft className="size-4" />
          Wróć do sklepu
        </Link>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">

          {/* Zdjęcie */}
          <div className="relative aspect-square bg-white rounded-2xl border border-border overflow-hidden">
            <Image
              src={product.image}
              alt={product.name}
              fill
              className="object-contain p-8"
              priority
              unoptimized={product.image.startsWith('http')}
            />
          </div>

          {/* Info */}
          <div className="flex flex-col gap-6">
            <div>
              <span className="text-sm font-semibold text-accent uppercase tracking-wider">{product.brand}</span>
              <h1 className="text-2xl md:text-3xl font-bold text-primary font-heading mt-1 leading-tight">
                {product.name}
              </h1>
              <p className="text-xs text-text-muted mt-1">SKU: {product.sku}</p>
            </div>

            {product.shortDescription && (
              <p className="text-text-muted leading-relaxed">{product.shortDescription}</p>
            )}

            {/* Cena / CTA */}
            <div className="p-5 rounded-xl bg-white border border-border">
              {product.price !== null ? (
                <div>
                  <p className="text-3xl font-bold text-primary font-heading">
                    {product.price.toLocaleString('pl-PL')} zł
                  </p>
                  <p className="text-sm text-text-muted mt-1">cena urządzenia brutto (23% VAT)</p>
                  <p className="text-xs text-text-muted mt-1">Montaż wyceniamy indywidualnie — zadzwoń lub napisz</p>
                  <div className="flex flex-col sm:flex-row gap-3 mt-4">
                    <a href={`tel:${companyDetails.phoneRaw}`} className="btn btn-primary font-bold text-white flex items-center gap-2 justify-center">
                      <Phone className="size-4" />
                      Zadzwoń i zamów
                    </a>
                    <Link href="/kontakt" className="btn btn-outline btn-primary bg-white font-bold flex items-center gap-2 justify-center">
                      <ShoppingBag className="size-4" />
                      Zapytaj o montaż
                    </Link>
                  </div>
                </div>
              ) : (
                <div>
                  <p className="text-lg font-semibold text-primary font-heading">Cena na zapytanie</p>
                  <p className="text-sm text-text-muted mt-1">Multisplit — cena zależy od wybranych jednostek wewnętrznych i konfiguracji instalacji.</p>
                  <a href={`tel:${companyDetails.phoneRaw}`} className="btn btn-primary font-bold text-white flex items-center gap-2 mt-4">
                    <Phone className="size-4" />
                    Zapytaj o wycenę
                  </a>
                </div>
              )}
            </div>

            {/* Specyfikacja */}
            {Object.keys(product.specs).length > 0 && (
              <div>
                <h2 className="text-base font-bold text-primary font-heading mb-3">Specyfikacja</h2>
                <div className="rounded-xl border border-border overflow-hidden">
                  <table className="w-full text-sm">
                    <tbody>
                      {Object.entries(product.specs).map(([key, val], idx) => (
                        <tr key={key} className={idx % 2 === 0 ? 'bg-white' : 'bg-slate-50'}>
                          <td className="px-4 py-2.5 text-text-muted font-medium w-1/2">{key}</td>
                          <td className="px-4 py-2.5 text-primary">{val}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>

      <CtaBanner
        title="Potrzebujesz montażu?"
        subtitle="Sprzedajemy z montażem na terenie Dolnego Śląska. Zadzwoń i ustal termin."
        ctaText="Umów montaż"
        ctaLink="/kontakt"
      />
    </main>
  );
}