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 {
    AlertTriangle,
    ArrowRight,
    Barcode,
    Bell,
    CheckCircle2,
    ChevronRight,
    ClipboardList,
    GitMerge,
    Globe,
    Layers,
    Package,
    PackageOpen,
    RefreshCw,
    Repeat2,
    Ruler,
    Tag,
    TrendingDown,
    Warehouse,
} 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]';
const GS =
    'border border-white/80 bg-white/75 backdrop-blur-xl dark:border-white/[0.08] dark:bg-white/[0.05]';

// ─── data ──────────────────────────────────────────────────────────────────────

const CORE_FEATURES = [
    { icon: Package,     label: 'Product catalog',     desc: 'Unlimited SKUs with images, descriptions, cost, and sell prices' },
    { icon: Layers,      label: 'Categories & variants', desc: 'Hierarchical categories and multi-attribute variants (size, colour, pack)' },
    { icon: Barcode,     label: 'Barcode management',  desc: 'Scan via camera or USB scanner; generate and print barcode labels' },
    { icon: TrendingDown,label: 'Stock levels',        desc: 'Real-time quantity on hand, reserved, and available per location' },
    { icon: Ruler,       label: 'Unit of measure',     desc: 'Define UoM per product — pieces, kg, litres, cartons — and conversion rules' },
    { icon: AlertTriangle,label: 'Reorder points',    desc: 'Set minimum stock thresholds per product; automatic reorder suggestions triggered' },
];

const STOCK_OPS = [
    {
        label: 'Stock-in',
        desc: 'Receive goods from a supplier PO or direct entry. Cost price updated automatically.',
        icon: PackageOpen,
        dot: 'bg-accent',
    },
    {
        label: 'Stock-out',
        desc: 'Record non-sale outflows — samples, write-offs, internal use — with reason codes.',
        icon: Package,
        dot: 'bg-primary',
    },
    {
        label: 'Adjustments',
        desc: 'Correct discrepancies found during stock counts with a full audit trail and staff attribution.',
        icon: ClipboardList,
        dot: 'bg-muted-foreground/40',
    },
    {
        label: 'Transfers',
        desc: 'Move stock between branches or warehouses with in-transit tracking and receive confirmation.',
        icon: GitMerge,
        dot: 'bg-muted-foreground/40',
    },
    {
        label: 'Stock take',
        desc: 'Guided count workflow — freeze stock, capture counts by scanner, generate variance report.',
        icon: RefreshCw,
        dot: 'bg-muted-foreground/40',
    },
    {
        label: 'Returns',
        desc: 'Customer returns re-enter stock automatically, linked back to the original sale.',
        icon: Repeat2,
        dot: 'bg-muted-foreground/40',
    },
];

const ALERT_FEATURES = [
    'Per-product minimum stock thresholds',
    'Email and in-app low-stock notifications',
    'Automatic reorder suggestion with supplier pre-filled',
    'Out-of-stock blocking at POS with override option',
    'Expiry-date alerts for perishable products',
    'Configurable alert frequency — daily digest or instant',
];

const LOCATIONS = [
    { label: 'Headquarters', role: 'Admin + stock view', icon: Globe },
    { label: 'Branch A – Nairobi', role: 'POS + local stock', icon: Warehouse },
    { label: 'Branch B – Mombasa', role: 'POS + local stock', icon: Warehouse },
    { label: 'Warehouse', role: 'Goods receipt + transfers', icon: Package },
];

const HOW_IT_WORKS = [
    {
        step: '01',
        title: 'Build your catalog',
        icon: Tag,
        desc: 'Scan barcodes with your phone camera, enter SKUs manually, or bulk-import from Excel. Set categories, variants, opening stock, and reorder points.',
    },
    {
        step: '02',
        title: 'Track every movement',
        icon: ClipboardList,
        desc: 'Every sale, purchase receipt, adjustment, and transfer is recorded with a full audit trail — who did it, when, and why.',
    },
    {
        step: '03',
        title: 'Get alerted early',
        icon: Bell,
        desc: 'Low-stock thresholds trigger alerts before you run out so you can reorder with confidence and never disappoint a customer.',
    },
];

// ─── 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 ─────────────────────────────────────────────────────────────────────

export default function InventoryPage() {
    const reduced = useReducedMotion();
    const rv = (d = 0) => reveal(d, !!reduced);

    return (
        <WebLayout>
            <Head title="Inventory Management — Upepo POS" />

            {/* ── HERO ─────────────────────────────────── */}
            <section className="mx-auto max-w-7xl px-4 pt-36 pb-16 sm:px-6 lg:pt-48">
                <motion.div {...rv(0)} className="flex justify-center">
                    <Badge
                        variant="brand"
                        className="rounded-full px-3.5 py-1.5 text-[11px] tracking-[0.14em] uppercase"
                    >
                        Inventory Management
                    </Badge>
                </motion.div>

                <motion.h1
                    {...rv(0.07)}
                    className="uf-display mx-auto mt-6 max-w-3xl text-center text-[2.55rem] leading-[1.07] font-extrabold tracking-tight text-foreground sm:text-5xl lg:text-[3.3rem]"
                >
                    Never run out.{' '}
                    <span className="text-primary">Never overstock.</span>
                </motion.h1>

                <motion.p
                    {...rv(0.13)}
                    className="mx-auto mt-6 max-w-xl text-center text-[1.04rem] leading-relaxed text-muted-foreground dark:text-white/50"
                >
                    Real-time stock levels across every location, automatic
                    updates for every movement, and low-stock alerts before you
                    run out. Built for the pace of African retail — from a
                    single shelf to a multi-branch network.
                </motion.p>

                <motion.div
                    {...rv(0.19)}
                    className="mt-8 flex flex-wrap justify-center gap-3"
                >
                    {[
                        'Real-time stock',
                        'Barcode scanning',
                        'Multi-location',
                        'Bulk import',
                    ].map((chip) => (
                        <span
                            key={chip}
                            className={`${GS} rounded-full px-4 py-1.5 text-sm font-medium text-foreground`}
                        >
                            {chip}
                        </span>
                    ))}
                </motion.div>

                <motion.div
                    {...rv(0.25)}
                    className="mt-10 flex flex-wrap justify-center gap-3"
                >
                    <Button asChild size="xl">
                        <Link href="/pricing">
                            Start free trial <ArrowRight size={16} />
                        </Link>
                    </Button>
                    <Button asChild size="xl" variant="outline">
                        <Link href="/features">
                            All features <ChevronRight size={16} />
                        </Link>
                    </Button>
                </motion.div>
            </section>

            {/* ── CORE INVENTORY FEATURES ──────────────── */}
            <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6">
                <motion.div {...rv(0)} className="mb-10 text-center">
                    <Badge
                        variant="lime"
                        className="rounded-full px-3.5 py-1.5 text-[11px] tracking-[0.14em] uppercase"
                    >
                        Core features
                    </Badge>
                    <h2 className="uf-display mt-4 text-2xl font-extrabold tracking-tight text-foreground sm:text-3xl">
                        Everything your stock needs.
                    </h2>
                    <p className="mx-auto mt-3 max-w-lg text-sm leading-relaxed text-muted-foreground">
                        From a simple product catalog to multi-attribute variants
                        and barcode labels — Upepo covers every corner of
                        inventory setup.
                    </p>
                </motion.div>

                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                    {CORE_FEATURES.map(({ icon: Icon, label, desc }, i) => (
                        <motion.div key={label} {...rv(i * 0.07)}>
                            <Card className={`${G} h-full rounded-2xl`}>
                                <CardContent className="p-6">
                                    <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10">
                                        <Icon
                                            size={20}
                                            className="text-primary"
                                        />
                                    </div>
                                    <h3 className="font-semibold text-foreground">
                                        {label}
                                    </h3>
                                    <p className="mt-1.5 text-sm leading-snug text-muted-foreground">
                                        {desc}
                                    </p>
                                </CardContent>
                            </Card>
                        </motion.div>
                    ))}
                </div>
            </section>

            {/* ── STOCK OPERATIONS ─────────────────────── */}
            <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6">
                <motion.div {...rv(0)} className="mb-10 text-center">
                    <Badge
                        variant="brand"
                        className="rounded-full px-3.5 py-1.5 text-[11px] tracking-[0.14em] uppercase"
                    >
                        Stock operations
                    </Badge>
                    <h2 className="uf-display mt-4 text-2xl font-extrabold tracking-tight text-foreground sm:text-3xl">
                        Six ways stock moves. One system tracks them all.
                    </h2>
                    <p className="mx-auto mt-3 max-w-lg text-sm leading-relaxed text-muted-foreground">
                        Every inbound, outbound, adjustment, and transfer is
                        captured with a reason, a user, and a timestamp — giving
                        you a complete audit trail for every SKU.
                    </p>
                </motion.div>

                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                    {STOCK_OPS.map(({ label, desc, icon: Icon, dot }, i) => (
                        <motion.div key={label} {...rv(i * 0.07)}>
                            <Card className={`${G} h-full rounded-2xl`}>
                                <CardContent className="p-6">
                                    <div className="flex items-center gap-2.5">
                                        <span
                                            className={`h-2.5 w-2.5 rounded-full ${dot}`}
                                        />
                                        <Icon
                                            size={16}
                                            className="text-foreground/60"
                                        />
                                    </div>
                                    <h3 className="mt-4 font-semibold text-foreground">
                                        {label}
                                    </h3>
                                    <p className="mt-1.5 text-sm leading-snug text-muted-foreground">
                                        {desc}
                                    </p>
                                </CardContent>
                            </Card>
                        </motion.div>
                    ))}
                </div>
            </section>

            {/* ── LOW STOCK ALERTS & AUTOMATION ────────── */}
            <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6">
                <motion.div {...rv(0)}>
                    <Card className={`${G} rounded-2xl`}>
                        <CardContent className="p-8 sm:p-12">
                            <div className="grid gap-10 lg:grid-cols-2 lg:items-center">
                                <div>
                                    <div className="mb-3 flex items-center gap-2">
                                        <Bell size={18} className="text-primary" />
                                        <Badge
                                            variant="lime"
                                            className="rounded-full px-3 py-0.5 text-[11px] tracking-[0.12em] uppercase"
                                        >
                                            Alerts & automation
                                        </Badge>
                                    </div>
                                    <h2 className="uf-display text-xl font-bold text-foreground sm:text-2xl">
                                        Know before you run out.
                                    </h2>
                                    <p className="mt-4 text-sm leading-relaxed text-muted-foreground">
                                        Upepo monitors every SKU against the
                                        thresholds you set and fires alerts the
                                        moment stock dips below the reorder
                                        point — so you can act before the shelf
                                        goes empty.
                                    </p>
                                    <ul className="mt-6 space-y-3">
                                        {ALERT_FEATURES.map((item) => (
                                            <li
                                                key={item}
                                                className="flex items-start gap-3 text-sm text-foreground/80"
                                            >
                                                <CheckCircle2
                                                    size={15}
                                                    className="mt-0.5 shrink-0 text-primary"
                                                />
                                                {item}
                                            </li>
                                        ))}
                                    </ul>
                                </div>

                                {/* Visual alert mock */}
                                <div className="flex flex-col gap-3">
                                    {[
                                        { sku: 'Dettol 500ml', qty: '3 units', status: 'Critical', color: 'text-red-500', bg: 'bg-red-500/10 border-red-400/30' },
                                        { sku: 'Panadol 24s',  qty: '8 units', status: 'Low',      color: 'text-primary',  bg: 'bg-primary/10 border-primary/30' },
                                        { sku: 'Sugar 2kg',    qty: '12 units', status: 'Reorder',  color: 'text-accent',   bg: 'bg-accent/10 border-accent/30' },
                                    ].map(({ sku, qty, status, color, bg }) => (
                                        <div
                                            key={sku}
                                            className={`${GS} flex items-center justify-between rounded-xl px-5 py-3.5`}
                                        >
                                            <div>
                                                <p className="text-sm font-medium text-foreground">
                                                    {sku}
                                                </p>
                                                <p className="text-xs text-muted-foreground">
                                                    {qty} remaining
                                                </p>
                                            </div>
                                            <span
                                                className={`rounded-md border px-2.5 py-0.5 text-xs font-semibold ${bg} ${color}`}
                                            >
                                                {status}
                                            </span>
                                        </div>
                                    ))}
                                    <p className="mt-1 text-center text-xs text-muted-foreground">
                                        Live low-stock alert panel
                                    </p>
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                </motion.div>
            </section>

            {/* ── MULTI-LOCATION ───────────────────────── */}
            <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6">
                <motion.div {...rv(0)} className="mb-10 text-center">
                    <Badge
                        variant="brand"
                        className="rounded-full px-3.5 py-1.5 text-[11px] tracking-[0.14em] uppercase"
                    >
                        Multi-location
                    </Badge>
                    <h2 className="uf-display mt-4 text-2xl font-extrabold tracking-tight text-foreground sm:text-3xl">
                        One dashboard. Every branch.
                    </h2>
                    <p className="mx-auto mt-3 max-w-lg text-sm leading-relaxed text-muted-foreground">
                        Whether you run two branches or twenty warehouses, Upepo
                        gives head office a consolidated view of stock across
                        every location — with branch-level drill-down on demand.
                    </p>
                </motion.div>

                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                    {LOCATIONS.map(({ label, role, icon: Icon }, i) => (
                        <motion.div key={label} {...rv(i * 0.08)}>
                            <Card className={`${G} h-full rounded-2xl`}>
                                <CardContent className="p-6">
                                    <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-accent/10">
                                        <Icon
                                            size={20}
                                            style={{ color: '#C5DC1C' }}
                                        />
                                    </div>
                                    <h3 className="font-semibold text-foreground">
                                        {label}
                                    </h3>
                                    <p className="mt-1.5 text-xs text-muted-foreground">
                                        {role}
                                    </p>
                                </CardContent>
                            </Card>
                        </motion.div>
                    ))}
                </div>

                <motion.div {...rv(0.2)} className="mt-8">
                    <Card className={`${G} rounded-2xl`}>
                        <CardContent className="p-8">
                            <div className="grid gap-6 sm:grid-cols-3 text-center">
                                {[
                                    { stat: 'Unlimited', label: 'Locations supported' },
                                    { stat: 'Real-time', label: 'Inter-branch stock sync' },
                                    { stat: 'One login', label: 'Access all branches' },
                                ].map(({ stat, label }) => (
                                    <div key={label}>
                                        <p className="uf-display text-3xl font-extrabold text-primary">
                                            {stat}
                                        </p>
                                        <p className="mt-1 text-sm text-muted-foreground">
                                            {label}
                                        </p>
                                    </div>
                                ))}
                            </div>
                        </CardContent>
                    </Card>
                </motion.div>
            </section>

            {/* ── HOW IT WORKS ─────────────────────────── */}
            <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6">
                <motion.div {...rv(0)} className="mb-10 text-center">
                    <Badge
                        variant="lime"
                        className="rounded-full px-3.5 py-1.5 text-[11px] tracking-[0.14em] uppercase"
                    >
                        How it works
                    </Badge>
                    <h2 className="uf-display mt-4 text-2xl font-extrabold tracking-tight text-foreground sm:text-3xl">
                        From product to shelf to sale.
                    </h2>
                </motion.div>

                <div className="grid gap-6 sm:grid-cols-3">
                    {HOW_IT_WORKS.map(({ step, title, icon: Icon, desc }, i) => (
                        <motion.div key={step} {...rv(i * 0.08)}>
                            <Card className={`${G} h-full rounded-2xl`}>
                                <CardContent className="p-8">
                                    <span className="uf-display text-4xl font-extrabold text-primary/30">
                                        {step}
                                    </span>
                                    <div className="mt-4 flex items-center gap-2">
                                        <Icon size={18} className="text-primary" />
                                        <h3 className="font-semibold text-foreground">
                                            {title}
                                        </h3>
                                    </div>
                                    <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
                                        {desc}
                                    </p>
                                </CardContent>
                            </Card>
                        </motion.div>
                    ))}
                </div>
            </section>

            {/* ── CTA ──────────────────────────────────── */}
            <section className="mx-auto max-w-7xl px-4 pb-24 sm:px-6">
                <motion.div
                    {...rv()}
                    className="relative overflow-hidden rounded-3xl bg-panel p-10 text-center sm:p-16"
                >
                    <div className="pointer-events-none absolute -top-24 -left-24 h-72 w-72 rounded-full bg-primary/20 blur-3xl" />
                    <div className="pointer-events-none absolute -right-24 -bottom-24 h-72 w-72 rounded-full bg-accent/14 blur-3xl" />

                    <div className="relative">
                        <Badge
                            variant="brand"
                            className="rounded-full px-3.5 py-1.5 text-[11px] tracking-[0.14em] uppercase"
                        >
                            30-day free trial · No card required
                        </Badge>
                        <h2 className="uf-display mx-auto mt-5 max-w-2xl text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
                            Take control of your inventory today.
                        </h2>
                        <p className="mx-auto mt-4 max-w-lg text-base text-white/45">
                            Real-time stock, full audit trail, multi-location
                            support — all included from day one.
                        </p>
                        <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
                            <Link
                                href="/pricing"
                                className="inline-flex items-center gap-2 rounded-xl bg-primary px-6 py-3 text-sm font-semibold text-white shadow-xl shadow-primary/30 transition hover:bg-primary/90"
                            >
                                View pricing <ArrowRight size={15} />
                            </Link>
                            <Link
                                href="/features/purchase-orders"
                                className="inline-flex items-center gap-2 rounded-xl border border-white/14 bg-white/[0.07] px-6 py-3 text-sm font-semibold text-white/80 transition hover:bg-white/[0.12] hover:text-white"
                            >
                                Purchase orders <ChevronRight size={15} />
                            </Link>
                        </div>
                    </div>
                </motion.div>
            </section>
        </WebLayout>
    );
}