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, CheckCircle2, HelpCircle, Minus } from 'lucide-react';
import { useState } from 'react';

const PLANS = [
    {
        name: 'Starter',
        monthly: { KES: '2,500', UGX: '92,000', TZS: '65,000' },
        desc: 'For single-location businesses getting started with POS and inventory.',
        features: [
            '1 location',
            '2 cashier accounts',
            'Up to 500 products',
            'Core POS + cash payments',
            'M-Pesa & Airtel Money',
            'Basic inventory management',
            'Low-stock alerts',
            'Daily & weekly sales reports',
            'Thermal receipt printing',
            'Email support',
        ],
        unavailable: [
            'Tax compliance (eTIMS/EFD)',
            'Purchase orders',
            'Customer credit & loyalty',
            'Multi-location management',
            'Advanced analytics',
            'Excel & PDF export',
        ],
        cta: 'Start Free Trial',
        highlight: false,
    },
    {
        name: 'Business',
        monthly: { KES: '6,500', UGX: '240,000', TZS: '170,000' },
        desc: 'For growing businesses with multiple locations or compliance requirements.',
        features: [
            'Up to 5 locations',
            'Up to 10 user accounts',
            'Unlimited products',
            'Full POS + all payment methods',
            'Tax compliance (eTIMS / EFD / EFRIS / EBM)',
            'Suppliers & purchase orders',
            'Customer credit & loyalty programme',
            'Stock transfers between locations',
            'Advanced analytics & dashboards',
            'Excel & PDF export for all reports',
            'Priority support',
        ],
        unavailable: [
            'Unlimited locations',
            'Public REST API + webhooks',
            'White-label branding',
        ],
        cta: 'Start Free Trial',
        highlight: true,
    },
    {
        name: 'Enterprise',
        monthly: null,
        desc: 'Unlimited scale, white-label, API access, and dedicated partnership for large operators.',
        features: [
            'Unlimited locations & users',
            'All compliance integrations',
            'Public REST API + webhooks',
            'White-label (custom domain & branding)',
            'Asset tracking & warehouse management',
            'Custom report builder',
            'E-commerce sync (WooCommerce, Shopify)',
            'Accounting exports (QuickBooks / Xero)',
            'Custom onboarding & training',
            'Dedicated account manager',
            'SLA-backed uptime guarantee',
        ],
        unavailable: [],
        cta: 'Contact Sales',
        highlight: false,
    },
];

const FAQS = [
    {
        q: 'Is there a free trial?',
        a: 'Yes — all plans include a 30-day free trial with full access. No credit card required to start.',
    },
    {
        q: 'Can I switch plans later?',
        a: 'Absolutely. You can upgrade or downgrade at any time. Upgrades are prorated immediately; downgrades take effect at the end of the current billing cycle.',
    },
    {
        q: 'What currencies do you bill in?',
        a: 'We bill in KES, TZS, and UGX depending on your registered country. Enterprise contracts can be billed in USD.',
    },
    {
        q: 'How does the offline mode work?',
        a: 'Upepo stores all transactions locally on your device first. When your internet connection returns, everything syncs automatically — no manual intervention needed.',
    },
    {
        q: 'Is my data secure and private?',
        a: 'Each business account runs in its own isolated database (multi-tenant). Your data is never shared with or visible to other Upepo customers.',
    },
    {
        q: 'Do you support multi-business accounts?',
        a: 'Yes. One login can manage multiple business accounts. Switch between your pharmacy and retail store without logging out.',
    },
    {
        q: 'What hardware do I need?',
        a: 'Upepo runs in any modern browser on a tablet, laptop, or desktop. For receipt printing you need a Bluetooth or USB thermal printer. A barcode scanner is optional.',
    },
    {
        q: 'What support do you offer?',
        a: 'Starter plans get email support. Business plans get priority support with faster response times. Enterprise plans get a dedicated account manager and onboarding sessions.',
    },
];

const CURRENCIES = ['KES', 'UGX', 'TZS'];

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 },
    };
}

function FaqItem({ q, a }) {
    const [open, setOpen] = useState(false);
    return (
        <div className="border-b border-border/40 last:border-0">
            <button
                onClick={() => setOpen((o) => !o)}
                className="flex w-full items-start justify-between gap-4 py-5 text-left"
            >
                <span className="font-semibold text-foreground">{q}</span>
                <HelpCircle
                    size={16}
                    className={`mt-0.5 shrink-0 transition-colors ${open ? 'text-primary' : 'text-muted-foreground'}`}
                />
            </button>
            {open && (
                <p className="pb-5 text-sm leading-relaxed text-muted-foreground">
                    {a}
                </p>
            )}
        </div>
    );
}

export default function Pricing() {
    const reduced = useReducedMotion();
    const rv = (d = 0) => reveal(d, !!reduced);
    const [currency, setCurrency] = useState('KES');

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

            {/* ── HERO ─────────────────────────────────────── */}
            <section className="mx-auto max-w-7xl px-4 pt-36 pb-12 text-center sm:px-6 lg:pt-48">
                <motion.div {...rv(0)}>
                    <Badge
                        variant="brand"
                        className="rounded-full px-3.5 py-1.5 text-[11px] tracking-[0.14em] uppercase"
                    >
                        Simple pricing
                    </Badge>
                    <h1 className="uf-display mx-auto mt-6 max-w-2xl text-4xl font-extrabold tracking-tight text-foreground sm:text-5xl lg:text-6xl">
                        Plans that grow{' '}
                        <span className="text-primary">with you.</span>
                    </h1>
                    <p className="mx-auto mt-5 max-w-xl text-lg text-muted-foreground">
                        Start free. No credit card required. Upgrade when you
                        are ready — cancel any time.
                    </p>
                </motion.div>

                {/* currency toggle */}
                <motion.div
                    {...rv(0.08)}
                    className="mt-8 inline-flex items-center gap-1 rounded-xl border border-border bg-muted/40 p-1"
                >
                    {CURRENCIES.map((c) => (
                        <button
                            key={c}
                            onClick={() => setCurrency(c)}
                            className={`rounded-lg px-4 py-1.5 text-sm font-semibold transition ${
                                currency === c
                                    ? 'bg-primary text-white shadow-sm'
                                    : 'text-muted-foreground hover:text-foreground'
                            }`}
                        >
                            {c}
                        </button>
                    ))}
                </motion.div>
            </section>

            {/* ── PLANS ────────────────────────────────────── */}
            <section className="mx-auto max-w-7xl px-4 pb-20 sm:px-6">
                <div className="grid gap-4 md:grid-cols-3">
                    {PLANS.map(
                        (
                            {
                                name,
                                monthly,
                                desc,
                                features,
                                unavailable,
                                cta,
                                highlight,
                            },
                            i,
                        ) => (
                            <motion.div key={name} {...rv(i * 0.07)}>
                                <Card
                                    className={`relative flex h-full flex-col ${
                                        highlight
                                            ? 'border-primary/25 bg-panel shadow-2xl shadow-primary/10 dark:bg-panel'
                                            : 'border-white/20 bg-white/[0.07] backdrop-blur-xl dark:border-white/[0.07] dark:bg-white/[0.04]'
                                    }`}
                                >
                                    {highlight && (
                                        <div className="absolute -top-3.5 left-1/2 -translate-x-1/2">
                                            <Badge className="shadow-primary/35 rounded-full px-4 text-[11px] shadow-lg">
                                                Most Popular
                                            </Badge>
                                        </div>
                                    )}
                                    <CardContent className="flex flex-1 flex-col p-6">
                                        <div>
                                            <p
                                                className={`text-xs font-bold tracking-wider uppercase ${highlight ? 'text-primary' : 'text-muted-foreground'}`}
                                            >
                                                {name}
                                            </p>

                                            <div className="mt-3">
                                                {monthly ? (
                                                    <div className="flex items-baseline gap-1">
                                                        <span
                                                            className={`text-sm font-semibold ${highlight ? 'text-white/60' : 'text-muted-foreground'}`}
                                                        >
                                                            {currency}
                                                        </span>
                                                        <span
                                                            className={`uf-display text-4xl font-black ${highlight ? 'text-white' : 'text-foreground'}`}
                                                        >
                                                            {monthly[currency]}
                                                        </span>
                                                        <span
                                                            className={`text-sm ${highlight ? 'text-white/45' : 'text-muted-foreground'}`}
                                                        >
                                                            /mo
                                                        </span>
                                                    </div>
                                                ) : (
                                                    <p
                                                        className={`uf-display text-4xl font-black ${highlight ? 'text-white' : 'text-foreground'}`}
                                                    >
                                                        Custom
                                                    </p>
                                                )}
                                            </div>

                                            <p
                                                className={`mt-3 text-sm ${highlight ? 'text-white/55' : 'text-muted-foreground'}`}
                                            >
                                                {desc}
                                            </p>
                                        </div>

                                        <ul className="mt-6 flex-1 space-y-2">
                                            {features.map((f) => (
                                                <li
                                                    key={f}
                                                    className="flex items-start gap-2 text-sm"
                                                >
                                                    <CheckCircle2
                                                        size={14}
                                                        className={`mt-0.5 shrink-0 ${highlight ? 'text-accent' : 'text-primary'}`}
                                                    />
                                                    <span
                                                        className={
                                                            highlight
                                                                ? 'text-white/75'
                                                                : 'text-foreground/80'
                                                        }
                                                    >
                                                        {f}
                                                    </span>
                                                </li>
                                            ))}
                                            {unavailable.map((f) => (
                                                <li
                                                    key={f}
                                                    className="flex items-start gap-2 text-sm opacity-35"
                                                >
                                                    <Minus
                                                        size={14}
                                                        className="mt-0.5 shrink-0"
                                                    />
                                                    <span>{f}</span>
                                                </li>
                                            ))}
                                        </ul>

                                        <Button
                                            asChild
                                            variant={
                                                highlight ? 'default' : 'outline'
                                            }
                                            className={`mt-8 w-full ${highlight ? 'shadow-primary/30 shadow-lg' : 'border-white/20 dark:border-white/[0.07]'}`}
                                        >
                                            <Link href="/contact">
                                                {cta}{' '}
                                                {!highlight && (
                                                    <ArrowRight size={13} />
                                                )}
                                            </Link>
                                        </Button>
                                    </CardContent>
                                </Card>
                            </motion.div>
                        ),
                    )}
                </div>

                <motion.p
                    {...rv(0.2)}
                    className="mt-8 text-center text-sm text-muted-foreground"
                >
                    All prices are per business account, billed monthly. Annual
                    plans available — contact us for a discount.
                </motion.p>
            </section>

            {/* ── FAQ ──────────────────────────────────────── */}
            <section className="mx-auto max-w-3xl px-4 py-20 sm:px-6">
                <motion.div {...rv()} className="mb-10 text-center">
                    <Badge
                        variant="lime"
                        className="rounded-full px-3.5 py-1.5 text-[11px] tracking-[0.14em] uppercase"
                    >
                        Common questions
                    </Badge>
                    <h2 className="uf-display mt-4 text-3xl font-extrabold tracking-tight text-foreground">
                        Frequently asked questions
                    </h2>
                </motion.div>

                <motion.div
                    {...rv(0.06)}
                    className="divide-y divide-border/40 rounded-2xl border border-border/40 px-6"
                >
                    {FAQS.map(({ q, a }) => (
                        <FaqItem key={q} q={q} a={a} />
                    ))}
                </motion.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">
                        <h2 className="uf-display mx-auto max-w-xl text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
                            Still have questions?
                        </h2>
                        <p className="mx-auto mt-4 max-w-lg text-white/50">
                            Our team is happy to walk you through the right plan
                            for your business.
                        </p>
                        <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
                            <Link
                                href="/contact"
                                className="inline-flex items-center gap-2 rounded-xl bg-primary px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-primary/30 transition hover:brightness-95"
                            >
                                Talk to us <ArrowRight size={14} />
                            </Link>
                            <Link
                                href="/support"
                                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"
                            >
                                Visit support centre
                            </Link>
                        </div>
                    </div>
                </motion.div>
            </section>
        </WebLayout>
    );
}