import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { ShoppingCart, CheckCircle } from "lucide-react";
import { products, formatPrice } from "@shared/products";
import {
  platformComparisonRows,
  platformFaqs,
  platformProductVideo,
} from "@shared/platformContent";
import { useLocation } from "wouter";
import { PublicHeader } from "@/components/PublicHeader";

const shopStructuredData = {
  "@context": "https://schema.org",
  "@type": "ItemList",
  name: "Modemanagement Webshop",
  itemListElement: products.map((product, index) => ({
    "@type": "ListItem",
    position: index + 1,
    item: {
      "@type": "Product",
      name: product.name,
      description: product.description,
      offers: {
        "@type": "Offer",
        priceCurrency: "EUR",
        price: product.price / 100,
        url: product.externalLink ?? "https://modemanagement.nl/shop",
      },
    },
  })),
};

export default function Shop() {
  const [, navigate] = useLocation();

  const handleAddToCart = (productId: string) => {
    // Store cart in both localStorage (persistent) and sessionStorage (immediate)
    let cartItems = [];
    
    // Try localStorage first (persistent across sessions)
    const storedCart = localStorage.getItem("cart");
    if (storedCart) {
      try {
        cartItems = JSON.parse(storedCart);
      } catch (e) {
        console.error('Failed to parse localStorage cart:', e);
      }
    }
    
    const existing = cartItems.find((item: any) => item.productId === productId);
    
    if (existing) {
      existing.quantity += 1;
    } else {
      cartItems.push({ productId, quantity: 1 });
    }
    
    // Save to both storages for redundancy
    localStorage.setItem("cart", JSON.stringify(cartItems));
    sessionStorage.setItem("pendingCartItems", JSON.stringify(cartItems));
    
    // Navigate to checkout
    navigate("/checkout");
  };

  return (
    <div className="min-h-screen flex flex-col bg-background">
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(shopStructuredData) }} />
      <PublicHeader />

      <div className="flex flex-1 flex-col lg:flex-row">
        {/* Products Grid */}
        <div className="flex-1 container py-12 lg:border-r lg:border-border">
          <div className="space-y-8">
            <div className="text-center space-y-4">
              <h1 className="text-3xl sm:text-4xl lg:text-5xl leading-tight font-bold font-serif text-foreground">
                Modemanagement Webshop
              </h1>
              <p className="text-xl text-muted-foreground">
                Kies het perfecte pakket voor jouw bedrijf
              </p>
            </div>

            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
              {products.map((product) => (
                <Card
                  key={product.id}
                  className={`flex flex-col p-6 transition-all hover:shadow-lg ${
                    product.highlighted ? "border-primary border-2" : ""
                  }`}
                >
                  {product.highlighted && (
                    <div className={`mb-4 inline-block px-3 py-1 rounded-full text-sm font-semibold ${
                      product.highlightedTone === "amber"
                        ? "bg-amber-300 text-amber-950 border border-amber-400"
                        : "bg-primary text-primary-foreground"
                    }`}>
                      {product.highlightedLabel ?? "Populair"}
                    </div>
                  )}

                  <h3 className={`${product.titleLines ? "text-lg lg:text-xl" : "text-xl lg:text-2xl"} leading-tight font-bold font-serif text-foreground mb-2`}>
                    {product.titleLines
                      ? product.titleLines.map(line => <span key={line} className="block">{line}</span>)
                      : product.name}
                  </h3>

                  {product.subtitle && (
                    <p className="text-sm font-semibold text-primary mb-4">
                      {product.subtitle}
                    </p>
                  )}

                  <div className="mb-4">
                    <div className="flex items-baseline gap-2">
                      <span className="text-4xl font-bold text-primary">
                        €{(product.price / 100).toFixed(2)}
                      </span>
                      {product.priceNote && (
                        <span className="text-sm text-muted-foreground">{product.priceNote}</span>
                      )}
                      {product.duration && !product.priceNote && (
                        <span className="text-sm text-muted-foreground">{product.duration}</span>
                      )}
                    </div>
                  </div>

                  <p className="text-foreground/70 mb-6">{product.description}</p>

                  <div className="space-y-3 mb-6 flex-1">
                    {product.features.map((feature, idx) => (
                      <div key={idx} className="flex gap-2">
                        <CheckCircle className="w-5 h-5 text-primary flex-shrink-0 mt-0.5" />
                        <span className="text-sm text-foreground">{feature}</span>
                      </div>
                    ))}
                  </div>

                  <div className="flex gap-2">
                    {product.externalLink ? (
                      <a
                        href={product.externalLink}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="flex-1"
                      >
                        <Button className="w-full bg-primary text-primary-foreground hover:bg-primary/90">
                          {product.externalButtonLabel ?? "Klik hier"}
                        </Button>
                      </a>
                    ) : (
                      <Button
                        onClick={() => handleAddToCart(product.id)}
                        className="flex-1 bg-primary text-primary-foreground hover:bg-primary/90"
                      >
                        <ShoppingCart className="w-4 h-4 mr-2" />
                        In winkelwagen
                      </Button>
                    )}
                  </div>
                </Card>
              ))}
            </div>

            <section className="mt-16 grid gap-8 lg:grid-cols-2 lg:items-center" aria-labelledby="platform-video-heading">
              <div className="rounded-2xl bg-secondary/50 p-6 sm:p-8">
                <p className="mb-3 text-sm font-bold tracking-[0.16em] text-primary">PRODUCTVIDEO</p>
                <h2 id="platform-video-heading" className="font-serif text-3xl font-bold leading-tight text-foreground sm:text-4xl">
                  {platformProductVideo.title}
                </h2>
                <p className="mt-4 max-w-xl text-base leading-relaxed text-foreground/70">
                  {platformProductVideo.description}
                </p>
                <a
                  href="https://modemanagement.zite.so/"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="mt-6 inline-block"
                >
                  <Button className="bg-primary text-primary-foreground hover:bg-primary/90">
                    Bekijk het platform
                  </Button>
                </a>
              </div>
              <div className="overflow-hidden rounded-2xl border border-primary/20 bg-black shadow-lg">
                <video
                  className="aspect-video h-full w-full object-cover"
                  autoPlay
                  muted
                  loop
                  playsInline
                  controls
                  preload="metadata"
                  aria-label="Korte productvideo over het Inkoopplan en Maandanalyse Platform"
                >
                  <source src={platformProductVideo.src} type="video/mp4" />
                  Je browser ondersteunt deze video niet.
                </video>
              </div>
            </section>

            <section className="mt-16" aria-labelledby="platform-comparison-heading">
              <div className="max-w-2xl">
                <p className="text-sm font-bold tracking-[0.16em] text-primary">WELK PAKKET PAST BIJ JOU?</p>
                <h2 id="platform-comparison-heading" className="mt-3 font-serif text-3xl font-bold text-foreground sm:text-4xl">
                  Vergelijk je mogelijkheden
                </h2>
                <p className="mt-4 text-foreground/70">
                  Kies het pakket dat past bij de manier waarop je nu wilt werken: zelf aan de slag, maandelijks sturen of persoonlijk sparren.
                </p>
              </div>
              <div className="mt-8 overflow-x-auto rounded-2xl border border-border bg-card">
                <p className="px-4 pt-3 text-xs font-medium text-muted-foreground md:hidden">
                  Veeg horizontaal om alle pakketten te vergelijken.
                </p>
                <table className="min-w-[720px] w-full border-collapse text-left text-sm">
                  <thead className="bg-secondary/70 text-foreground">
                    <tr>
                      <th className="p-4 font-semibold">Onderdeel</th>
                      <th className="p-4 font-semibold">AI voor Modewinkels</th>
                      <th className="bg-amber-50 p-4 font-semibold text-amber-950">Inkoopplan/Maandanalyse</th>
                      <th className="p-4 font-semibold">Consult</th>
                    </tr>
                  </thead>
                  <tbody>
                    {platformComparisonRows.map((row) => (
                      <tr key={row.label} className="border-t border-border">
                        <th scope="row" className="p-4 font-semibold text-foreground">{row.label}</th>
                        <td className="p-4 text-foreground/70">{row.ai}</td>
                        <td className="bg-amber-50/60 p-4 font-medium text-foreground">{row.platform}</td>
                        <td className="p-4 text-foreground/70">{row.consult}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </section>

            <section className="mt-16" aria-labelledby="platform-faq-heading">
              <div className="max-w-2xl">
                <p className="text-sm font-bold tracking-[0.16em] text-primary">VEELGESTELDE VRAGEN</p>
                <h2 id="platform-faq-heading" className="mt-3 font-serif text-3xl font-bold text-foreground sm:text-4xl">
                  Over het Inkoopplan/Maandanalyse Platform
                </h2>
              </div>
              <div className="mt-8 grid gap-3">
                {platformFaqs.map((faq) => (
                  <details key={faq.question} className="rounded-xl border border-border bg-card px-5 py-4 group">
                    <summary className="cursor-pointer list-none pr-8 font-semibold text-foreground marker:hidden">
                      {faq.question}
                    </summary>
                    <p className="mt-3 leading-relaxed text-foreground/70">{faq.answer}</p>
                  </details>
                ))}
              </div>
            </section>
          </div>
        </div>
      </div>
    </div>
  );
}