import Image from 'next/image';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import type { Metadata } from 'next';
import { getVendorStorefront, getVendorProductsPage } from '@/lib/catalog';
import { getCurrentAccount } from '@/lib/account';
import { ROUTES, vendorStorefrontRoute } from '@/lib/routes';
import { ProductCard } from '@/components/shop/product-card';
import { StartConversationForm } from '@/components/messages/start-conversation-form';
import { getSiteSettings } from '@/lib/site-settings';

const DAY_ORDER = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
const SOCIAL_LABELS: Record<string, string> = {
  facebook: 'Facebook',
  instagram: 'Instagram',
  whatsapp: 'WhatsApp',
  tiktok: 'TikTok',
  youtube: 'YouTube',
  pinterest: 'Pinterest',
  twitter: 'Twitter',
  website: 'Website',
};

export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> {
  const detail = await getVendorStorefront(params.slug);
  if (!detail) return { title: 'Vendor Not Found' };
  return { title: detail.vendor.storeName };
}

export default async function VendorStorefrontPage({
  params,
  searchParams,
}: {
  params: { slug: string };
  searchParams?: { page?: string };
}) {
  const detail = await getVendorStorefront(params.slug);
  if (!detail) {
    notFound();
  }

  const { vendor } = detail;
  const page = Math.max(1, Number(searchParams?.page ?? '1') || 1);
  const { products, meta } = page > 1 ? await getVendorProductsPage(vendor.id, page) : { products: detail.products, meta: detail.productsMeta };

  const [account, settings] = await Promise.all([getCurrentAccount(), getSiteSettings()]);
  const isSelf = account?.vendor_profile?.store_slug === vendor.storeSlug;

  const hoursEntries = Object.entries(vendor.businessHours).sort(
    ([a], [b]) => DAY_ORDER.indexOf(a.toLowerCase()) - DAY_ORDER.indexOf(b.toLowerCase())
  );

  return (
    <>
      <section className="border-b border-navy-100 bg-beige py-10">
        <div className="container-page flex flex-wrap items-center gap-6">
          {vendor.logoUrl ? (
            <Image
              src={vendor.logoUrl}
              alt={vendor.storeName}
              width={96}
              height={96}
              className="h-24 w-24 rounded-full border border-navy-100 bg-white object-cover"
            />
          ) : (
            <div className="flex h-24 w-24 items-center justify-center rounded-full border border-navy-100 bg-white text-2xl font-bold text-navy-800">
              {vendor.storeName.slice(0, 1).toUpperCase()}
            </div>
          )}
          <div>
            <h1 className="font-serif text-2xl font-bold text-navy-800">{vendor.storeName}</h1>
            <p className="mt-1 text-sm text-navy-600">
              {vendor.productCount} product{vendor.productCount === 1 ? '' : 's'}
              {vendor.memberSince ? ` · Member since ${new Date(vendor.memberSince).getFullYear()}` : ''}
            </p>
          </div>
        </div>
      </section>

      <section className="py-10">
        <div className="container-page grid gap-8 lg:grid-cols-[1fr_320px]">
          <div>
            {vendor.about && <p className="text-sm leading-relaxed text-navy-600">{vendor.about}</p>}

            <h2 className="mt-8 font-serif text-xl font-bold text-navy-800">Products</h2>
            {products.length === 0 ? (
              <p className="mt-4 text-sm text-navy-600">No products listed yet.</p>
            ) : (
              <div className="mt-4 grid grid-cols-2 gap-6 sm:grid-cols-3">
                {products.map((p) => (
                  <ProductCard key={p.slug} product={p} currency={settings.currency} />
                ))}
              </div>
            )}

            {meta.last_page > 1 && (
              <div className="mt-6 flex items-center justify-center gap-4 text-sm font-semibold">
                {page > 1 && (
                  <Link href={`${vendorStorefrontRoute(vendor.storeSlug)}?page=${page - 1}`} className="text-gold-600 hover:text-gold-700">
                    &larr; Previous
                  </Link>
                )}
                <span className="text-navy-500">
                  Page {meta.current_page} of {meta.last_page}
                </span>
                {page < meta.last_page && (
                  <Link href={`${vendorStorefrontRoute(vendor.storeSlug)}?page=${page + 1}`} className="text-gold-600 hover:text-gold-700">
                    Next &rarr;
                  </Link>
                )}
              </div>
            )}
          </div>

          <aside className="space-y-6">
            <div className="card p-5">
              <h3 className="font-serif text-base font-bold text-navy-800">Contact</h3>
              <ul className="mt-3 space-y-2 text-sm text-navy-600">
                {vendor.address && <li>{vendor.address}</li>}
                {vendor.contactNumber && <li>{vendor.contactNumber}</li>}
                {vendor.whatsappNumber && <li>WhatsApp: {vendor.whatsappNumber}</li>}
                {vendor.email && <li>{vendor.email}</li>}
              </ul>
              {Object.keys(vendor.socialLinks).length > 0 && (
                <div className="mt-3 flex flex-wrap gap-3 text-xs">
                  {Object.entries(vendor.socialLinks).map(([key, url]) => (
                    <a
                      key={key}
                      href={url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="font-semibold text-gold-600 hover:text-gold-700"
                    >
                      {SOCIAL_LABELS[key] ?? key}
                    </a>
                  ))}
                </div>
              )}
            </div>

            {hoursEntries.length > 0 && (
              <div className="card p-5">
                <h3 className="font-serif text-base font-bold text-navy-800">Business Hours</h3>
                <dl className="mt-3 space-y-1 text-xs text-navy-600">
                  {hoursEntries.map(([day, hours]) => (
                    <div key={day} className="flex justify-between capitalize">
                      <dt>{day}</dt>
                      <dd>{hours}</dd>
                    </div>
                  ))}
                </dl>
              </div>
            )}

            {!isSelf && (
              <div className="card p-5">
                <h3 className="font-serif text-base font-bold text-navy-800">Message This Seller</h3>
                {account ? (
                  <div className="mt-3">
                    <StartConversationForm vendorId={vendor.id} redirectTo={vendorStorefrontRoute(vendor.storeSlug)} />
                  </div>
                ) : (
                  <p className="mt-3 text-sm text-navy-600">
                    <Link
                      href={`${ROUTES.login}?redirect=${encodeURIComponent(vendorStorefrontRoute(vendor.storeSlug))}`}
                      className="font-semibold text-gold-600 hover:text-gold-700"
                    >
                      Sign in
                    </Link>{' '}
                    to message this seller.
                  </p>
                )}
              </div>
            )}
          </aside>
        </div>
      </section>
    </>
  );
}