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 {
    ArrowRight,
    BarChart3,
    BarChart4,
    Bell,
    CalendarDays,
    CheckCircle2,
    ChevronRight,
    Clock,
    CreditCard,
    DatabaseZap,
    Download,
    FileSpreadsheet,
    FileText,
    Mail,
    Package,
    Printer,
    Star,
    TrendingUp,
    Users,
} 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 SALES_FEATURES = [
    'Daily, weekly, and monthly revenue dashboards',
    'Top-selling products by quantity and revenue',
    'Peak trading hours heatmap per branch',
    'Cashier performance — transactions and revenue per shift',
    'Sales by payment method: cash, M-Pesa, card, credit',
    'Gross profit and margin by product and category',
    'Discount and promotion impact analysis',
    'Year-on-year and period comparison views',
];

const INVENTORY_REPORT_FEATURES = [
    'Stock valuation report at cost and selling price',
    'Slow-moving items — products with no sales in N days',
    'Shrinkage and write-off tracking by reason',
    'Inventory turnover rate per product and category',
    'Stock movement history per SKU with full audit trail',
    'Reorder suggestions based on velocity and current stock',
    'Expiry tracking report for perishable goods',
    'Multi-location stock comparison — spot imbalances fast',
];

const CUSTOMER_FEATURES = [
    { icon: Star,         label: 'Top customers',       desc: 'Rank customers by revenue and transaction frequency over any period' },
    { icon: CalendarDays, label: 'Purchase frequency',  desc: 'See how often each customer buys and identify churn risk early' },
    { icon: CreditCard,   label: 'Credit utilisation',  desc: 'Track outstanding balances, credit limits, and payment history per customer' },
    { icon: TrendingUp,   label: 'Loyalty trends',      desc: 'Identify your most loyal customers and reward them with targeted offers' },
];

const EXPORT_OPTIONS = [
    {
        icon: FileSpreadsheet,
        label: 'Excel export',
        desc: 'Every report exports to .xlsx with one click — ready for your accountant or spreadsheet workflow',
    },
    {
        icon: FileText,
        label: 'PDF reports',
        desc: 'Branded PDF reports for sharing with management, investors, or tax authorities',
    },
    {
        icon: Mail,
        label: 'Scheduled email',
        desc: 'Schedule daily, weekly, or monthly report delivery to any email address automatically',
    },
    {
        icon: Printer,
        label: 'Print-ready',
        desc: 'Every report has a print-optimised layout — clean margins, no excess UI chrome',
    },
];

const REPORT_MODULES = [
    { icon: BarChart3,    label: 'Sales analytics' },
    { icon: Package,      label: 'Inventory reports' },
    { icon: Users,        label: 'Customer insights' },
    { icon: CreditCard,   label: 'Payment breakdown' },
    { icon: BarChart4,    label: 'Supplier analysis' },
    { icon: Clock,        label: 'Peak hours heatmap' },
    { icon: Download,     label: 'Excel & PDF export' },
    { icon: Bell,         label: 'Scheduled delivery' },
];

// ─── 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 AnalyticsPage() {
    const reduced = useReducedMotion();
    const rv = (d = 0) => reveal(d, !!reduced);

    return (
        <WebLayout>
            <Head title="Analytics & Reports — 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"
                    >
                        Analytics &amp; Reporting
                    </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]"
                >
                    Know your numbers.{' '}
                    <span className="text-primary">Grow with confidence.</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 dashboards for sales, inventory, and customers —
                    built for African business owners who need clear numbers
                    without a data analyst. Export to Excel or PDF with one
                    click. Schedule reports to arrive in your inbox daily.
                </motion.p>

                <motion.div
                    {...rv(0.19)}
                    className="mt-8 flex flex-wrap justify-center gap-3"
                >
                    {[
                        'Real-time dashboards',
                        'Excel & PDF export',
                        'Scheduled reports',
                        'Cashier-level detail',
                    ].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>

            {/* ── MODULE GRID ──────────────────────────── */}
            <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"
                    >
                        Report library
                    </Badge>
                    <h2 className="uf-display mt-4 text-2xl font-extrabold tracking-tight text-foreground sm:text-3xl">
                        Eight reporting modules. All included.
                    </h2>
                    <p className="mx-auto mt-3 max-w-lg text-sm leading-relaxed text-muted-foreground">
                        Every Upepo plan includes the full analytics suite —
                        no separate module, no extra cost, no locked reports.
                    </p>
                </motion.div>

                <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
                    {REPORT_MODULES.map(({ icon: Icon, label }, i) => (
                        <motion.div key={label} {...rv(i * 0.06)}>
                            <div
                                className={`${GS} flex items-center gap-3 rounded-xl px-5 py-4`}
                            >
                                <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/10">
                                    <Icon size={17} className="text-primary" />
                                </div>
                                <p className="text-sm font-medium text-foreground">
                                    {label}
                                </p>
                            </div>
                        </motion.div>
                    ))}
                </div>
            </section>

            {/* ── SALES ANALYTICS ──────────────────────── */}
            <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-start">
                                <div>
                                    <div className="mb-3 flex items-center gap-2">
                                        <BarChart3
                                            size={18}
                                            className="text-primary"
                                        />
                                        <Badge
                                            variant="brand"
                                            className="rounded-full px-3 py-0.5 text-[11px] tracking-[0.12em] uppercase"
                                        >
                                            Sales analytics
                                        </Badge>
                                    </div>
                                    <h2 className="uf-display text-xl font-bold text-foreground sm:text-2xl">
                                        See every KES earned, every hour of the day.
                                    </h2>
                                    <p className="mt-4 text-sm leading-relaxed text-muted-foreground">
                                        Upepo's sales dashboard updates in real
                                        time — revenue, top products, and
                                        cashier performance visible the moment
                                        a sale is made. Compare periods, drill
                                        into branches, and spot trends before
                                        they become problems.
                                    </p>
                                    <ul className="mt-6 space-y-3">
                                        {SALES_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>

                                {/* Revenue mini dashboard mock */}
                                <div className="rounded-xl border border-border/40 bg-background/60 p-5">
                                    <div className="mb-4 flex items-center justify-between">
                                        <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                                            Today's revenue
                                        </p>
                                        <Badge
                                            variant="lime"
                                            className="rounded-md text-[11px]"
                                        >
                                            Live
                                        </Badge>
                                    </div>
                                    <p className="uf-display text-3xl font-extrabold text-foreground">
                                        KES 142,880
                                    </p>
                                    <p className="mt-1 text-xs text-muted-foreground">
                                        +18% vs yesterday
                                    </p>

                                    <div className="mt-5 space-y-2.5">
                                        {[
                                            { product: 'Dettol 500ml',   rev: 'KES 28,400', pct: 82 },
                                            { product: 'Omo 1kg',        rev: 'KES 19,200', pct: 56 },
                                            { product: 'Panadol 24s',    rev: 'KES 14,600', pct: 42 },
                                            { product: 'Colgate 75ml',   rev: 'KES 11,000', pct: 32 },
                                        ].map(({ product, rev, pct }) => (
                                            <div key={product}>
                                                <div className="mb-1 flex items-center justify-between">
                                                    <p className="text-xs font-medium text-foreground">
                                                        {product}
                                                    </p>
                                                    <p className="text-xs text-muted-foreground">
                                                        {rev}
                                                    </p>
                                                </div>
                                                <div className="h-1.5 w-full rounded-full bg-muted-foreground/10">
                                                    <div
                                                        className="h-full rounded-full bg-primary"
                                                        style={{ width: `${pct}%` }}
                                                    />
                                                </div>
                                            </div>
                                        ))}
                                    </div>
                                    <p className="mt-3 text-center text-[11px] text-muted-foreground">
                                        Top products by revenue today
                                    </p>
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                </motion.div>
            </section>

            {/* ── INVENTORY REPORTS ────────────────────── */}
            <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="mb-3 flex items-center gap-2">
                                <Package size={18} className="text-primary" />
                                <Badge
                                    variant="lime"
                                    className="rounded-full px-3 py-0.5 text-[11px] tracking-[0.12em] uppercase"
                                >
                                    Inventory reports
                                </Badge>
                            </div>
                            <h2 className="uf-display text-xl font-bold text-foreground sm:text-2xl">
                                Know what your stock is worth. And what is sitting still.
                            </h2>
                            <p className="mt-4 max-w-xl text-sm leading-relaxed text-muted-foreground">
                                Inventory reports give you stock valuation,
                                slow-moving item flags, and shrinkage tracking
                                — the numbers every buyer, owner, and auditor
                                needs without building them from spreadsheets.
                            </p>
                            <ul className="mt-6 grid gap-3 sm:grid-cols-2">
                                {INVENTORY_REPORT_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>

                            {/* Slow-movers mock */}
                            <div className="mt-8 rounded-xl border border-border/40 bg-background/60 p-5">
                                <p className="mb-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                                    Slow-moving items — last 30 days
                                </p>
                                <div className="space-y-2">
                                    {[
                                        { sku: 'Kiwi Shoe Polish 40ml', days: '62 days', qty: 48 },
                                        { sku: 'Vaseline 250ml',        days: '45 days', qty: 22 },
                                        { sku: 'Canola Oil 2L',         days: '38 days', qty: 15 },
                                    ].map(({ sku, days, qty }) => (
                                        <div
                                            key={sku}
                                            className={`${GS} flex items-center justify-between rounded-lg px-4 py-2.5`}
                                        >
                                            <p className="text-xs font-medium text-foreground">
                                                {sku}
                                            </p>
                                            <div className="flex items-center gap-3 text-[11px] text-muted-foreground">
                                                <span>{qty} units</span>
                                                <span className="rounded-md border border-amber-400/30 bg-amber-400/10 px-2 py-0.5 font-semibold text-amber-600 dark:text-amber-400">
                                                    {days} no sale
                                                </span>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                </motion.div>
            </section>

            {/* ── CUSTOMER INSIGHTS ────────────────────── */}
            <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"
                    >
                        Customer insights
                    </Badge>
                    <h2 className="uf-display mt-4 text-2xl font-extrabold tracking-tight text-foreground sm:text-3xl">
                        Understand who drives your revenue.
                    </h2>
                    <p className="mx-auto mt-3 max-w-lg text-sm leading-relaxed text-muted-foreground">
                        Customer reports surface your most valuable accounts,
                        credit exposure, and loyalty patterns — so you can
                        serve them better and catch at-risk customers early.
                    </p>
                </motion.div>

                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                    {CUSTOMER_FEATURES.map(({ icon: Icon, label, desc }, 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-sm leading-snug text-muted-foreground">
                                        {desc}
                                    </p>
                                </CardContent>
                            </Card>
                        </motion.div>
                    ))}
                </div>

                {/* Top customers mock */}
                <motion.div {...rv(0.2)} className="mt-8">
                    <Card className={`${G} rounded-2xl`}>
                        <CardContent className="p-8">
                            <p className="mb-4 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                                Top customers this month
                            </p>
                            <div className="space-y-2">
                                {[
                                    { name: 'Westlands Supermarket',   total: 'KES 284,000', visits: 22, credit: 'KES 0' },
                                    { name: 'Aga Khan Hospital Pharmacy', total: 'KES 196,500', visits: 14, credit: 'KES 45,000' },
                                    { name: 'Nairobi Hardware Ltd',    total: 'KES 142,200', visits: 9,  credit: 'KES 20,000' },
                                ].map(({ name, total, visits, credit }) => (
                                    <div
                                        key={name}
                                        className={`${GS} flex flex-wrap items-center justify-between gap-2 rounded-xl px-5 py-3.5`}
                                    >
                                        <p className="text-sm font-medium text-foreground">
                                            {name}
                                        </p>
                                        <div className="flex items-center gap-4 text-xs text-muted-foreground">
                                            <span>{visits} visits</span>
                                            <span className="font-semibold text-foreground">
                                                {total}
                                            </span>
                                            {credit !== 'KES 0' && (
                                                <span className="rounded-md border border-primary/30 bg-primary/10 px-2 py-0.5 font-semibold text-primary">
                                                    Credit: {credit}
                                                </span>
                                            )}
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </CardContent>
                    </Card>
                </motion.div>
            </section>

            {/* ── EXPORT & PRINT ───────────────────────── */}
            <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"
                    >
                        Export &amp; print
                    </Badge>
                    <h2 className="uf-display mt-4 text-2xl font-extrabold tracking-tight text-foreground sm:text-3xl">
                        Take your numbers anywhere.
                    </h2>
                    <p className="mx-auto mt-3 max-w-lg text-sm leading-relaxed text-muted-foreground">
                        Every report in Upepo can be exported to Excel or PDF
                        or delivered to your inbox on a schedule. Share with
                        your accountant, investor, or board in seconds.
                    </p>
                </motion.div>

                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                    {EXPORT_OPTIONS.map(({ icon: Icon, label, desc }, 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-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>

            {/* ── 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="brand"
                        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 transaction to insight in real time.
                    </h2>
                </motion.div>

                <div className="grid gap-6 sm:grid-cols-3">
                    {[
                        {
                            step: '01',
                            icon: DatabaseZap,
                            title: 'Every transaction captured',
                            desc: 'Each sale, adjustment, and purchase is recorded with full metadata — product, cashier, payment method, and location.',
                        },
                        {
                            step: '02',
                            icon: BarChart3,
                            title: 'Dashboards update live',
                            desc: "Open the analytics dashboard and see today's revenue, top products, and payment breakdown — updated in real time.",
                        },
                        {
                            step: '03',
                            icon: Download,
                            title: 'Export on demand',
                            desc: 'Any report can be downloaded as Excel or PDF. Schedule automated daily or weekly email summaries to any address.',
                        },
                    ].map(({ step, icon: Icon, title, 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">
                            Start making data-driven decisions.
                        </h2>
                        <p className="mx-auto mt-4 max-w-lg text-base text-white/45">
                            Every dashboard and report included from day one —
                            no extra analytics module, no additional cost.
                        </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"
                                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"
                            >
                                All platform features <ChevronRight size={15} />
                            </Link>
                        </div>
                    </div>
                </motion.div>
            </section>
        </WebLayout>
    );
}