import Link from "next/link";
import Image from "next/image";
import { db } from "@/lib/db";
import { getSettings } from "@/lib/settings";
import { listProducts } from "@/lib/catalog";
import FooterShop from "./FooterShop";
import FooterNewsletter from "./FooterNewsletter";
import { cardData } from "./ProductCard";

export default async function Footer({ showNewsletter = true }: { showNewsletter?: boolean }) {
  const [settings, menus, categories, products] = await Promise.all([
    getSettings(),
    db.menuItem.findMany({ where: { location: { in: ["FOOTER_SHOP", "FOOTER_INFO", "FOOTER_CONTACT"] } }, orderBy: { sortOrder: "asc" } }),
    db.category.findMany({ where: { visible: true }, orderBy: { sortOrder: "asc" } }),
    listProducts({ take: 24 }),
  ]);
  const col = (loc: string) => menus.filter((m) => m.location === loc);
  const social = Object.entries(settings.social).filter(([, v]) => v);
  return (
    <footer className="border-t border-sand mt-24">
      <div className="wrap pt-14">
        <FooterShop
          tabs={[{ slug: "all", name: "All" }, ...categories.map((c) => ({ slug: c.slug, name: c.name }))]}
          products={products.map((p) => ({ ...cardData(p), category: p.category.slug }))}
        />
      </div>
      {showNewsletter && (
        <FooterNewsletter />
      )}
      <div className="wrap grid grid-cols-2 md:grid-cols-4 gap-10 py-14 border-t border-sand">
        <FooterCol title="Shop" items={col("FOOTER_SHOP")} />
        <FooterCol title="Info" items={col("FOOTER_INFO")} />
        <FooterCol title="Help" items={col("FOOTER_CONTACT")} />
        <div>
          <h3 className="nav-type mb-4 text-stone">Contact</h3>
          <ul className="space-y-2 text-[14px]">
            {settings.email && <li><a href={`mailto:${settings.email}`} className="hover:text-gilt">{settings.email}</a></li>}
            {settings.phone && <li>{settings.phone}</li>}
            {settings.address && <li className="text-stone">{settings.address}</li>}
            {social.map(([k, v]) => <li key={k}><a href={v as string} rel="noopener noreferrer" target="_blank" className="capitalize hover:text-gilt">{k}</a></li>)}
          </ul>
        </div>
      </div>
      <div className="wrap pb-8">
        <Image src={settings.wordmarkUrl} alt={settings.brandName} width={1000} height={216} className="w-full h-auto opacity-95" />
        <div className="flex flex-col md:flex-row justify-between gap-3 mt-6 text-[12px] text-stone">
          <span>© {new Date().getFullYear()} {settings.brandName}. Prices in BDT (৳).</span>
          <span className="flex gap-5"><Link href="/privacy-policy" className="hover:text-ink">Privacy</Link><Link href="/terms" className="hover:text-ink">Terms</Link></span>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, items }: { title: string; items: { id: string; label: string; href: string }[] }) {
  return (
    <div>
      <h3 className="nav-type mb-4 text-stone">{title}</h3>
      <ul className="space-y-2 text-[14px]">{items.map((i) => <li key={i.id}><Link href={i.href} className="hover:text-gilt">{i.label}</Link></li>)}</ul>
    </div>
  );
}