"use client";

import React, { useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { 
  Boxes, 
  Terminal, 
  Monitor, 
  ShieldCheck, 
  ExternalLink, 
  Globe, 
  ArrowRight,
  Sparkles,
  CheckCircle2,
  Cpu,
  Layers,
  Maximize2
} from "lucide-react";
import { SectionCorners } from "@/components/ui/SectionCorner";
import { DemoModal } from "@/components/ui/DemoModal";
import { BlinkingSquares } from "@/components/ui/BlinkingSquares";
import { useAppStore, INITIAL_PRODUCTS } from "@/lib/store";
import { SaaSProduct } from "@/types";

export default function SaaSProductsPage() {
  const { products, formatPrice, t } = useAppStore();
  
  const [selectedProduct, setSelectedProduct] = useState<SaaSProduct | null>(null);
  const [isDemoModalOpen, setIsDemoModalOpen] = useState(false);
  const [activeFilter, setActiveFilter] = useState<string>("all");

  const openDemo = (product: SaaSProduct) => {
    setSelectedProduct(product);
    setIsDemoModalOpen(true);
  };

  const filteredProducts = activeFilter === "all"
    ? products
    : products.filter((p) => (activeFilter === "desktop" ? p.desktop_supported : p.fbr_compliant));

  return (
    <div className="mx-auto flex min-h-screen w-[calc(100%-1.5rem)] max-w-[1440px] flex-col border-x border-border sm:w-[calc(100%-2.5rem)] lg:w-[calc(100%-3rem)] bg-background text-foreground">
      {/* Header Banner */}
      <section className="relative border-b border-border p-6 sm:p-12 lg:p-16 overflow-hidden">
        <SectionCorners />
        <BlinkingSquares
          squareSize={20}
          gap={8}
          color="#024d37"
          maxOpacity={0.35}
          minOpacity={0.03}
          blinkProbability={0.02}
          className="opacity-50"
        />

        <div className="relative z-10 max-w-3xl space-y-4">
          <div className="inline-flex items-center gap-2 rounded-full border border-border bg-muted px-4 py-1.5 text-xs font-mono text-foreground">
            <span className="h-2 w-2 rounded-full bg-[#024d37] animate-pulse" />
            {t("saas.badge")}
          </div>

          <h1 className="text-4xl font-semibold tracking-tight text-foreground sm:text-5xl lg:text-6xl">
            {t("saas.title")}
          </h1>

          <p className="text-base text-muted-foreground leading-relaxed max-w-2xl">
            {t("saas.desc")}
          </p>
        </div>
      </section>

      {/* Filter Tabs */}
      <section className="relative border-b border-border px-6 py-4 bg-muted/40 font-mono text-xs flex gap-2 overflow-x-auto">
        <button
          onClick={() => setActiveFilter("all")}
          className={`rounded-full px-4 py-1.5 transition-all cursor-pointer ${
            activeFilter === "all"
              ? "bg-[#024d37] text-white font-bold shadow-sm"
              : "border border-border bg-card text-muted-foreground hover:text-foreground"
          }`}
        >
          {t("saas.all_products")} ({products.length})
        </button>
        <button
          onClick={() => setActiveFilter("desktop")}
          className={`rounded-full px-4 py-1.5 transition-all cursor-pointer ${
            activeFilter === "desktop"
              ? "bg-[#024d37] text-white font-bold shadow-sm"
              : "border border-border bg-card text-muted-foreground hover:text-foreground"
          }`}
        >
          {t("saas.desktop_pos")}
        </button>
        <button
          onClick={() => setActiveFilter("fbr")}
          className={`rounded-full px-4 py-1.5 transition-all cursor-pointer ${
            activeFilter === "fbr"
              ? "bg-[#024d37] text-white font-bold shadow-sm"
              : "border border-border bg-card text-muted-foreground hover:text-foreground"
          }`}
        >
          {t("saas.fbr_tax")}
        </button>
      </section>

      {/* Products Grid with Logos & Visual Interface Mockups */}
      <section className="relative border-b border-border p-6 sm:p-12 lg:p-16 space-y-12">
        <SectionCorners />

        <div className="grid grid-cols-1 gap-12">
          {filteredProducts.map((prod, idx) => (
            <article
              key={prod.id || `prod-${idx}`}
              id={prod.slug}
              className="rounded-3xl border border-border bg-card p-6 sm:p-10 transition-all hover:border-[#024d37]/50 shadow-sm space-y-8"
            >
              {/* Product Header: Logo + Badges + Metadata */}
              <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-6 pb-6 border-b border-border">
                <div className="flex items-center gap-4 sm:gap-5">
                  <div className="relative h-16 w-16 sm:h-20 sm:w-20 shrink-0 overflow-hidden rounded-2xl border border-border bg-muted/60 p-2 flex items-center justify-center shadow-xs">
                    <Image
                      src={prod.logo_url || "/assets/logo/logo.png"}
                      alt={`${prod.name} Logo`}
                      width={64}
                      height={64}
                      className="object-contain"
                    />
                  </div>

                  <div className="space-y-1">
                    <div className="flex flex-wrap items-center gap-2 font-mono text-xs">
                      <span className="text-[#024d37] font-semibold">// PROD_0{idx + 1}</span>
                      <span className="rounded-full border border-border bg-muted px-2.5 py-0.5 text-[10px] text-foreground uppercase">
                        v{prod.version || "1.0.0"}
                      </span>
                      <span className="rounded-full border border-[#024d37]/30 bg-[#024d37]/10 px-2.5 py-0.5 text-[10px] text-[#024d37] uppercase font-bold">
                        {prod.type}
                      </span>
                    </div>

                    <h2 className="text-2xl sm:text-3xl font-bold text-foreground">
                      {prod.name}
                    </h2>
                    <p className="text-xs font-mono text-[#024d37]">{prod.tagline}</p>
                  </div>
                </div>

                <div className="flex flex-wrap items-center gap-2">
                  <button
                    onClick={() => openDemo(prod)}
                    className="inline-flex items-center gap-2 rounded-full bg-[#024d37] px-5 py-2.5 text-xs font-mono font-bold uppercase tracking-[0.12em] text-white shadow-md shadow-[#024d37]/20 hover:bg-[#036549] transition-all cursor-pointer"
                  >
                    <Terminal className="h-3.5 w-3.5" />
                    Launch Live Simulator
                  </button>
                  {prod.dedicated_website_url && (
                    <a
                      href={prod.dedicated_website_url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-4 py-2.5 text-xs font-mono text-foreground hover:border-[#024d37] hover:text-[#024d37] transition-all"
                    >
                      <Globe className="h-3.5 w-3.5 text-[#024d37]" />
                      Visit Site <ExternalLink className="h-3 w-3" />
                    </a>
                  )}
                </div>
              </div>

              {/* Main Content: Software Screenshot Interface + Capabilities */}
              <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
                {/* Left Column: Rich UI Screenshot Preview */}
                <div className="lg:col-span-7 space-y-3">
                  <span className="font-mono text-[11px] text-muted-foreground uppercase tracking-wider block">
                    // LIVE PRODUCTION INTERFACE PREVIEW:
                  </span>

                  <div 
                    onClick={() => openDemo(prod)}
                    className="group relative h-64 sm:h-80 md:h-96 w-full overflow-hidden rounded-2xl border border-border bg-muted cursor-pointer shadow-md"
                  >
                    <Image
                      src={prod.preview_image || "/assets/saas/pharmacore_preview.jpg"}
                      alt={`${prod.name} Software Interface Screenshot`}
                      fill
                      className="object-cover object-top group-hover:scale-105 transition-transform duration-500"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-4">
                      <span className="inline-flex items-center gap-1.5 rounded-full bg-white/20 backdrop-blur-md px-3 py-1 text-xs text-white font-mono font-semibold">
                        <Maximize2 className="h-3.5 w-3.5" /> Click to Test Interactive Simulator
                      </span>
                    </div>
                  </div>
                </div>

                {/* Right Column: Specs & Architectural Features */}
                <div className="lg:col-span-5 space-y-6">
                  <div>
                    <span className="font-mono text-[11px] text-muted-foreground uppercase tracking-wider block mb-1">
                      // SYSTEM DESCRIPTION:
                    </span>
                    <p className="text-xs sm:text-sm text-muted-foreground leading-relaxed">
                      {prod.description}
                    </p>
                  </div>

                  <div className="space-y-2 pt-2 border-t border-border">
                    <span className="font-mono text-[11px] text-muted-foreground uppercase tracking-wider block mb-1">
                      // CORE ARCHITECTURAL CAPABILITIES:
                    </span>
                    <div className="space-y-1.5 font-mono text-xs">
                      {(prod.features || []).map((feat, i) => (
                        <div key={i} className="flex items-start gap-2 text-foreground/90 text-[11px]">
                          <span className="text-[#024d37] font-bold">✓</span>
                          <span>{feat}</span>
                        </div>
                      ))}
                    </div>
                  </div>

                  <div className="rounded-xl border border-border bg-muted/60 p-4 font-mono text-xs space-y-2">
                    <div className="flex justify-between items-center">
                      <span className="text-muted-foreground text-[11px]">LICENSING:</span>
                      <span className="font-bold text-foreground font-sans">{formatPrice(prod.pricing_model)}</span>
                    </div>
                    <div className="flex justify-between items-center">
                      <span className="text-muted-foreground text-[11px]">TARGET AUDIENCE:</span>
                      <span className="text-foreground text-[11px] truncate max-w-[200px]">{prod.target_audience}</span>
                    </div>
                    <div className="flex justify-between items-center pt-2 border-t border-border">
                      <span className="text-muted-foreground text-[11px]">TECH RUNTIME:</span>
                      <span className="text-[#024d37] text-[11px] font-semibold">{prod.tech_stack.join(", ")}</span>
                    </div>
                  </div>
                </div>
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* Simulator Modal */}
      {selectedProduct && (
        <DemoModal
          product={selectedProduct}
          isOpen={isDemoModalOpen}
          onClose={() => setIsDemoModalOpen(false)}
        />
      )}
    </div>
  );
}