import AltivateLayout from '@/Layouts/AltivateLayout';
import { Link } from '@inertiajs/react';
import { ArrowRight, Download, Package } from "lucide-react";
import { useState } from 'react';

interface Product {
    id: number;
    name: string;
    slug: string;
    description: string;
    price: number;
    currency: string;
    type: string;
    media?: {
        url: string;
    };
}

export default function StoreIndex({ products }: { products: Product[] }) {
    const [activeFilter, setActiveFilter] = useState('All');
    const filters = [
        { name: 'All', label: 'All Items' },
        { name: 'Course', label: 'Courses' },
        { name: 'Resource', label: 'Resources' },
    ];

    const filteredProducts = activeFilter === 'All' 
        ? products 
        : products.filter(p => p.type === activeFilter);

    return (
        <AltivateLayout 
            title="Digital Store"
            description="Premium digital tools, templates, and playbooks designed to accelerate growth for African SMEs."
        >
            <div className="min-h-screen">
                <section className="container-x pt-32 pb-12 md:pt-40 md:pb-16">
                    <p className="eyebrow">Digital Store</p>
                    <h1 className="font-display mt-6 max-w-4xl text-[clamp(2.5rem,6vw,5rem)] leading-[0.95]">
                        Battle-tested tools to <span className="italic">systematise</span> your growth.
                    </h1>
                    
                    {/* Filters */}
                    <div className="mt-12 flex items-center gap-3 overflow-x-auto pb-4 no-scrollbar">
                        <div className="flex items-center gap-2 flex-shrink-0">
                            {filters.map((f) => (
                                <button
                                    key={f.name}
                                    onClick={() => setActiveFilter(f.name)}
                                    className={`h-11 px-6 rounded-full text-[13px] font-bold transition-all whitespace-nowrap ${
                                        activeFilter === f.name 
                                            ? 'bg-primary text-primary-foreground' 
                                            : 'bg-secondary text-muted-foreground hover:bg-secondary/80'
                                    }`}
                                >
                                    {f.label}
                                </button>
                            ))}
                        </div>
                        <div className="ml-auto text-[11px] font-bold text-[#8C92AC] uppercase tracking-wider hidden md:block whitespace-nowrap">
                            {filteredProducts.length} Results
                        </div>
                    </div>
                </section>

                <section className="container-x pb-12">
                    <div className="grid gap-3 grid-cols-2 lg:grid-cols-3">
                        {filteredProducts.length > 0 ? filteredProducts.map((p) => (
                            <Link
                                key={p.id}
                                href={route('store.show', p.slug)}
                                className="group flex flex-col rounded-2xl border border-border bg-card overflow-hidden transition-all hover:border-accent/30 hover:shadow-2xl hover:shadow-accent/5"
                            >
                                {/* Featured Image */}
                                <div className="aspect-[16/10] w-full bg-secondary relative overflow-hidden">
                                    {p.media?.url ? (
                                        <img 
                                            src={p.media.url} 
                                            alt={p.name}
                                            className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                                        />
                                    ) : (
                                        <div className="w-full h-full flex items-center justify-center text-[#C0BDBA]">
                                            <Package className="h-10 w-10 opacity-20" />
                                        </div>
                                    )}
                                    <div className="absolute top-3 left-3">
                                        <span className="rounded-full bg-white/90 backdrop-blur-md border border-border px-3 py-1 text-[9px] font-bold uppercase tracking-wider text-primary">
                                            {p.type}
                                        </span>
                                    </div>
                                </div>

                                <div className="p-4 flex flex-col flex-1">
                                    <div className="flex-1">
                                        <h3 className="font-display text-base md:text-lg leading-tight transition-colors group-hover:text-accent">
                                            {p.name}
                                        </h3>
                                        <p className="mt-2 line-clamp-2 text-[11px] leading-snug text-muted-foreground hidden sm:block">
                                            {p.description}
                                        </p>
                                    </div>

                                    <div className="mt-4 pt-4 border-t border-border">
                                        <div className="flex items-center justify-between">
                                            <div className="font-display text-base md:text-xl">{p.currency} {parseFloat(p.price.toString()).toLocaleString()}</div>
                                        </div>
                                    </div>
                                </div>
                            </Link>
                        )) : (
                            <div className="col-span-full py-20 text-center">
                                <p className="text-muted-foreground">No products available in the store yet. Check back soon!</p>
                            </div>
                        )}
                    </div>
                </section>

                <section className="border-t border-border bg-secondary/20">
                    <div className="container-x py-10 text-center">
                        <p className="eyebrow">Enterprise Solutions</p>
                        <h2 className="font-display mt-6 text-4xl md:text-5xl">Need custom systems built for your team?</h2>
                        <p className="mx-auto mt-6 max-w-2xl text-muted-foreground">
                            Beyond templates, we build custom Growth Operating Systems for established SMEs. Let's talk about building a bespoke engine for your business.
                        </p>
                        <div className="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
                            <button className="inline-flex h-12 items-center gap-2 rounded-full bg-primary px-8 text-sm font-medium text-primary-foreground transition-transform hover:-translate-y-0.5">
                                Book a Strategy Call <ArrowRight className="h-4 w-4" />
                            </button>
                            <button className="inline-flex h-12 items-center gap-2 rounded-full border border-border bg-background px-8 text-sm font-medium transition-colors hover:bg-secondary">
                                View Case Studies
                            </button>
                        </div>
                    </div>
                </section>
            </div>
        </AltivateLayout>
    );
}