import { Badge } from '@/Components/ui/badge';
import { Button } from '@/Components/ui/button';
import { Card, CardContent } from '@/Components/ui/card';
import WebLayout from '@/Layouts/Web/WebLayout';
import { Head, Link } from '@inertiajs/react';
import { motion, useReducedMotion } from 'framer-motion';
import { useState } from 'react';
import {
    BookOpen,
    Clock,
    FileSpreadsheet,
    LayoutDashboard,
    MessageCircleQuestion,
    Package,
    PlayCircle,
    Receipt,
    ShoppingCart,
    TrendingUp,
} from 'lucide-react';

// ─── glass shorthand ───────────────────────────────────────────────────────────

const G =
    'border border-white/20 bg-white/[0.07] backdrop-blur-xl dark:border-white/[0.07] dark:bg-white/[0.04]';

// ─── animation helper ──────────────────────────────────────────────────────────

function reveal(delay = 0, reduced = false) {
    return {
        initial: reduced ? {} : { opacity: 0, y: 22 },
        whileInView: { opacity: 1, y: 0 },
        viewport: { once: true, amount: 0.1 },
        transition: { duration: 0.55, ease: [0.25, 0.1, 0.25, 1], delay },
    };
}

// ─── page data ─────────────────────────────────────────────────────────────────

const FILTER_TABS = [
    'All',
    'Getting Started',
    'POS & Sales',
    'Inventory',
    'Compliance',
    'Reports',
];

const TUTORIALS = [
    {
        title: 'Setting up your first products',
        category: 'Getting Started',
        time: '5 min read',
        icon: Package,
        badge: 'brand',
    },
    {
        title: 'Processing your first sale',
        category: 'POS & Sales',
        time: '3 min read',
        icon: ShoppingCart,
        badge: 'lime',
    },
    {
        title: 'Importing products from Excel',
        category: 'Getting Started',
        time: '8 min read',
        icon: FileSpreadsheet,
        badge: 'brand',
    },
    {
        title: 'Configuring eTIMS for KRA',
        category: 'Compliance',
        time: '12 min read',
        icon: Receipt,
        badge: 'lime',
    },
    {
        title: 'Setting up M-Pesa STK Push',
        category: 'POS & Sales',
        time: '6 min read',
        icon: LayoutDashboard,
        badge: 'lime',
    },
    {
        title: 'Running a stock take',
        category: 'Inventory',
        time: '10 min read',
        icon: Package,
        badge: 'brand',
    },
    {
        title: 'Creating purchase orders',
        category: 'Inventory',
        time: '7 min read',
        icon: BookOpen,
        badge: 'brand',
    },
    {
        title: 'Reading your sales reports',
        category: 'Reports',
        time: '5 min read',
        icon: TrendingUp,
        badge: 'lime',
    },
];

// ─── sub-components ────────────────────────────────────────────────────────────

function TutorialCard({ tutorial, delay, rv }) {
    const Icon = tutorial.icon;
    return (
        <motion.div {...rv(delay)}>
            <Card className={`group h-full ${G} border-0`}>
                <CardContent className="flex h-full flex-col gap-4 p-6">
                    {/* icon */}
                    <div className="flex size-11 items-center justify-center rounded-xl bg-primary/10">
                        <Icon size={20} className="text-primary" />
                    </div>

                    {/* meta */}
                    <div className="flex items-center gap-2">
                        <Badge variant={tutorial.badge}>{tutorial.category}</Badge>
                        <span className="flex items-center gap-1 text-xs text-muted-foreground">
                            <Clock size={11} />
                            {tutorial.time}
                        </span>
                    </div>

                    {/* title */}
                    <p className="uf-display flex-1 text-base font-semibold leading-snug text-foreground">
                        {tutorial.title}
                    </p>

                    {/* cta */}
                    <div className="flex items-center gap-2 pt-1">
                        <PlayCircle size={16} className="text-muted-foreground" />
                        <span className="text-sm font-medium text-muted-foreground">
                            Coming soon
                        </span>
                    </div>
                </CardContent>
            </Card>
        </motion.div>
    );
}

// ─── page ──────────────────────────────────────────────────────────────────────

export default function Tutorials() {
    const reduced = useReducedMotion();
    const rv = (d = 0) => reveal(d, !!reduced);
    const [activeTab, setActiveTab] = useState('All');

    const filtered =
        activeTab === 'All'
            ? TUTORIALS
            : TUTORIALS.filter((t) => t.category === activeTab);

    return (
        <WebLayout>
            <Head title="Tutorials & Guides — Upepo POS" />

            {/* ── Hero ─────────────────────────────────────────────────────── */}
            <section className="relative overflow-hidden pb-16 pt-28 md:pb-24 md:pt-36">
                {/* background glow */}
                <div
                    aria-hidden
                    className="pointer-events-none absolute inset-0 -z-10"
                >
                    <div
                        className="absolute left-1/2 top-0 h-[520px] w-[820px] -translate-x-1/2 rounded-full opacity-20 blur-[120px]"
                        style={{ background: '#F26522' }}
                    />
                </div>

                <div className="mx-auto max-w-5xl px-4 text-center sm:px-6">
                    <motion.div {...rv(0)}>
                        <Badge variant="brand" className="mb-4">
                            Learn at your own pace
                        </Badge>
                    </motion.div>

                    <motion.h1
                        {...rv(0.07)}
                        className="uf-display mx-auto max-w-3xl text-4xl font-bold leading-tight text-foreground md:text-5xl lg:text-6xl"
                    >
                        Tutorials &amp;{' '}
                        <span className="text-primary">Guides</span>
                    </motion.h1>

                    <motion.p
                        {...rv(0.14)}
                        className="mx-auto mt-5 max-w-xl text-lg text-muted-foreground"
                    >
                        Learn Upepo POS step by step — from your first product to
                        compliance filing and advanced reporting.
                    </motion.p>
                </div>
            </section>

            {/* ── Filter tabs (visual only) ─────────────────────────────────── */}
            <section className="border-b border-border bg-background/60 backdrop-blur-md">
                <div className="mx-auto max-w-5xl overflow-x-auto px-4 sm:px-6">
                    <div className="flex gap-1 py-3">
                        {FILTER_TABS.map((tab) => (
                            <button
                                key={tab}
                                onClick={() => setActiveTab(tab)}
                                className={`whitespace-nowrap rounded-lg px-4 py-2 text-sm font-medium transition-colors ${
                                    activeTab === tab
                                        ? 'bg-primary text-primary-foreground'
                                        : 'text-muted-foreground hover:bg-primary/10 hover:text-foreground'
                                }`}
                            >
                                {tab}
                            </button>
                        ))}
                    </div>
                </div>
            </section>

            {/* ── Tutorial grid ─────────────────────────────────────────────── */}
            <section className="mx-auto max-w-5xl px-4 py-16 sm:px-6 md:py-24">
                <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
                    {filtered.map((tutorial, i) => (
                        <TutorialCard
                            key={tutorial.title}
                            tutorial={tutorial}
                            delay={0.05 * (i % 4)}
                            rv={rv}
                        />
                    ))}
                </div>

                {/* empty state hint */}
                <motion.p
                    {...rv(0.3)}
                    className="mt-10 text-center text-sm text-muted-foreground"
                >
                    More tutorials are on their way. Subscribe to be notified when
                    new content drops.
                </motion.p>
            </section>

            {/* ── CTA banner ───────────────────────────────────────────────── */}
            <section className="mx-auto max-w-5xl px-4 pb-24 sm:px-6">
                <motion.div
                    {...rv(0.1)}
                    className={`flex flex-col items-center gap-6 rounded-2xl p-10 text-center ${G}`}
                >
                    <div className="flex size-14 items-center justify-center rounded-2xl bg-primary/10">
                        <MessageCircleQuestion size={26} className="text-primary" />
                    </div>

                    <div>
                        <h2 className="uf-display text-2xl font-bold text-foreground md:text-3xl">
                            Can't find what you need?
                        </h2>
                        <p className="mt-2 text-muted-foreground">
                            Our support team is ready to walk you through anything.
                        </p>
                    </div>

                    <Button asChild size="lg">
                        <Link href="/support">Visit Support Centre</Link>
                    </Button>
                </motion.div>
            </section>
        </WebLayout>
    );
}