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,
    BookOpen,
    CheckCircle2,
    ChevronRight,
    CircleDollarSign,
    ClipboardCheck,
    Clock,
    FileText,
    Mail,
    PackageCheck,
    PackageOpen,
    RefreshCw,
    Star,
    Users,
    Wallet,
} 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 PO_CREATION_FEATURES = [
    'Draft POs with multi-line items and quantities',
    'Select from supplier directory with pre-filled terms',
    'Set expected delivery date and reference numbers',
    'Add notes and internal approval comments',
    'Duplicate existing POs for repeat orders',
    'Print or email PDF purchase order to supplier',
    'PO status tracking: Draft → Approved → Sent → Received',
    'Role-based approval — manager sign-off before sending',
];

const RECEIVING_FEATURES = [
    'Full or partial receipt against an open PO',
    'Scan or manually confirm quantities on delivery',
    'Flag short deliveries and over-deliveries instantly',
    'Discrepancy notes attached to the receipt record',
    'Stock levels updated automatically on receipt confirmation',
    'Back-order management for outstanding quantities',
    'Landed cost allocation across received line items',
    'Goods received note (GRN) generated and printable',
];

const WORKFLOW_STEPS = [
    {
        n: '01',
        title: 'Create PO',
        icon: ClipboardCheck,
        desc: 'Select supplier, add line items with quantities and costs, set expected delivery date. The PO is drafted instantly and queued for approval.',
    },
    {
        n: '02',
        title: 'Send to supplier',
        icon: Mail,
        desc: 'Print or email the purchase order PDF directly from Upepo. Supplier gets all the detail they need — no manual re-keying.',
    },
    {
        n: '03',
        title: 'Receive goods',
        icon: PackageCheck,
        desc: 'Confirm quantities on delivery, flag discrepancies against the original PO. Partial receipts fully supported with back-order carry-forward.',
    },
    {
        n: '04',
        title: 'Auto-update stock',
        icon: RefreshCw,
        desc: 'Stock levels update the moment you confirm receipt. Payables are logged per supplier. Nothing falls through the cracks.',
    },
];

const SUPPLIER_FEATURES = [
    { icon: BookOpen,          label: 'Supplier directory',   desc: 'Centralised list with contact details, KRA PIN, bank info, and trading terms' },
    { icon: FileText,          label: 'Payment terms',        desc: 'Record Net-30, Net-60, or custom terms per supplier; auto-flag overdue invoices' },
    { icon: PackageOpen,       label: 'Purchase history',     desc: 'Full history of every PO raised per supplier — quantity, cost, and delivery performance' },
    { icon: Star,              label: 'Supplier performance', desc: 'Track on-time delivery rate and discrepancy frequency per supplier' },
];

const PAYABLE_METRICS = [
    { icon: CircleDollarSign, label: 'Outstanding balance',   desc: 'Total amount owed to each supplier at any point in time' },
    { icon: Wallet,           label: 'Payment recording',     desc: 'Log partial or full payments against specific invoices' },
    { icon: FileText,         label: 'Supplier statements',   desc: 'Generate statements showing all invoices and payments for a period' },
    { icon: Clock,            label: 'Overdue alerts',        desc: 'Automatic notification when a payable exceeds agreed payment terms' },
];

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

    return (
        <WebLayout>
            <Head title="Purchase Orders — 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"
                    >
                        Purchase Orders · Supplier 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]"
                >
                    Order smart.{' '}
                    <span className="text-primary">Receive fast.</span>{' '}
                    Pay on time.
                </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"
                >
                    Close the full procurement loop — from raising the first
                    purchase order to stocked shelves and settled invoices.
                    Built for African SMEs who need tight supplier control
                    without a finance team.
                </motion.p>

                <motion.div
                    {...rv(0.19)}
                    className="mt-8 flex flex-wrap justify-center gap-3"
                >
                    {[
                        'Supplier directory',
                        'Approval workflow',
                        'Auto stock update',
                        'Payables tracking',
                    ].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>

            {/* ── PO CREATION ──────────────────────────── */}
            <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">
                                        <ClipboardCheck size={18} className="text-primary" />
                                        <Badge
                                            variant="brand"
                                            className="rounded-full px-3 py-0.5 text-[11px] tracking-[0.12em] uppercase"
                                        >
                                            PO creation
                                        </Badge>
                                    </div>
                                    <h2 className="uf-display text-xl font-bold text-foreground sm:text-2xl">
                                        Create a purchase order in seconds.
                                    </h2>
                                    <p className="mt-4 text-sm leading-relaxed text-muted-foreground">
                                        Select a supplier, add line items, and
                                        set the delivery date. Upepo generates
                                        a professional PDF purchase order ready
                                        to email or print — no spreadsheets,
                                        no manual templates.
                                    </p>
                                    <ul className="mt-6 space-y-3">
                                        {PO_CREATION_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>

                                {/* Mock PO line items */}
                                <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">
                                            PO-2025-0042
                                        </p>
                                        <span className="rounded-md border border-accent/30 bg-accent/10 px-2 py-0.5 text-xs font-semibold text-foreground">
                                            Draft
                                        </span>
                                    </div>
                                    <div className="mb-3 text-sm font-medium text-foreground">
                                        Supplier: Unilever Kenya Ltd
                                    </div>
                                    <table className="w-full text-xs">
                                        <thead>
                                            <tr className="border-b border-border/30 text-muted-foreground">
                                                <th className="pb-2 text-left font-medium">Item</th>
                                                <th className="pb-2 text-right font-medium">Qty</th>
                                                <th className="pb-2 text-right font-medium">Total</th>
                                            </tr>
                                        </thead>
                                        <tbody className="divide-y divide-border/20">
                                            {[
                                                { item: 'Omo 1kg', qty: 50, total: 'KES 7,500' },
                                                { item: 'Sunlight 800g', qty: 30, total: 'KES 3,600' },
                                                { item: 'Jik 750ml', qty: 24, total: 'KES 2,880' },
                                            ].map(({ item, qty, total }) => (
                                                <tr key={item} className="text-foreground/80">
                                                    <td className="py-2">{item}</td>
                                                    <td className="py-2 text-right">{qty}</td>
                                                    <td className="py-2 text-right">{total}</td>
                                                </tr>
                                            ))}
                                        </tbody>
                                        <tfoot>
                                            <tr className="border-t border-border/40">
                                                <td colSpan={2} className="pt-2 text-right font-semibold text-foreground">
                                                    Total
                                                </td>
                                                <td className="pt-2 text-right font-bold text-primary">
                                                    KES 13,980
                                                </td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                    <div className="mt-4 flex gap-2">
                                        <span className={`${GS} rounded-lg px-3 py-1.5 text-xs font-medium text-foreground`}>
                                            Expected: 15 Jan
                                        </span>
                                        <span className={`${GS} rounded-lg px-3 py-1.5 text-xs font-medium text-foreground`}>
                                            Net 30
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                </motion.div>
            </section>

            {/* ── RECEIVING GOODS ──────────────────────── */}
            <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">
                                <PackageOpen size={18} className="text-primary" />
                                <Badge
                                    variant="lime"
                                    className="rounded-full px-3 py-0.5 text-[11px] tracking-[0.12em] uppercase"
                                >
                                    Receiving goods
                                </Badge>
                            </div>
                            <h2 className="uf-display text-xl font-bold text-foreground sm:text-2xl">
                                Receive against the PO. Stock updates itself.
                            </h2>
                            <p className="mt-4 max-w-xl text-sm leading-relaxed text-muted-foreground">
                                When goods arrive, open the PO, confirm what
                                was delivered, flag any discrepancies, and
                                confirm receipt. Upepo updates inventory
                                immediately — no manual stock entry required.
                            </p>
                            <ul className="mt-6 grid gap-3 sm:grid-cols-2">
                                {RECEIVING_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>
                        </CardContent>
                    </Card>
                </motion.div>
            </section>

            {/* ── WORKFLOW STEPS ───────────────────────── */}
            <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"
                    >
                        Procurement workflow
                    </Badge>
                    <h2 className="uf-display mt-4 text-2xl font-extrabold tracking-tight text-foreground sm:text-3xl">
                        Four steps from order to stocked shelf.
                    </h2>
                </motion.div>

                <div className="flex flex-col gap-4 lg:flex-row lg:items-stretch">
                    {WORKFLOW_STEPS.map(({ n, title, icon: Icon, desc }, i) => (
                        <div
                            key={n}
                            className="flex flex-1 flex-col gap-4 lg:flex-row lg:items-center"
                        >
                            <motion.div {...rv(i * 0.09)} className="flex-1">
                                <Card className={`${G} h-full rounded-2xl`}>
                                    <CardContent className="p-7">
                                        <span className="uf-display text-3xl font-extrabold text-primary/30">
                                            {n}
                                        </span>
                                        <div className="mt-3 flex items-center gap-2">
                                            <Icon size={17} className="text-primary" />
                                            <h3 className="font-semibold text-foreground">
                                                {title}
                                            </h3>
                                        </div>
                                        <p className="mt-2.5 text-sm leading-relaxed text-muted-foreground">
                                            {desc}
                                        </p>
                                    </CardContent>
                                </Card>
                            </motion.div>

                            {i < WORKFLOW_STEPS.length - 1 && (
                                <motion.div
                                    {...rv(i * 0.09 + 0.05)}
                                    className="hidden shrink-0 lg:flex lg:items-center"
                                >
                                    <ChevronRight size={22} className="text-muted-foreground/40" />
                                </motion.div>
                            )}
                        </div>
                    ))}
                </div>
            </section>

            {/* ── SUPPLIER MANAGEMENT ──────────────────── */}
            <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"
                    >
                        Supplier management
                    </Badge>
                    <h2 className="uf-display mt-4 text-2xl font-extrabold tracking-tight text-foreground sm:text-3xl">
                        Your supplier directory, always up to date.
                    </h2>
                    <p className="mx-auto mt-3 max-w-lg text-sm leading-relaxed text-muted-foreground">
                        Store every supplier's contact details, payment terms,
                        and purchase history in one place — and track their
                        delivery performance over time.
                    </p>
                </motion.div>

                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                    {SUPPLIER_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-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>

            {/* ── PAYABLES TRACKING ────────────────────── */}
            <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">
                                <Users size={18} className="text-primary" />
                                <Badge
                                    variant="brand"
                                    className="rounded-full px-3 py-0.5 text-[11px] tracking-[0.12em] uppercase"
                                >
                                    Accounts payable
                                </Badge>
                            </div>
                            <h2 className="uf-display text-xl font-bold text-foreground sm:text-2xl">
                                Know what you owe. Pay on time. Every time.
                            </h2>
                            <p className="mt-4 max-w-xl text-sm leading-relaxed text-muted-foreground">
                                Upepo tracks your outstanding balance with every
                                supplier — logging each payment against the
                                correct invoice and alerting you when terms are
                                about to expire. No separate accounting tool
                                needed for payables management.
                            </p>
                            <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                                {PAYABLE_METRICS.map(({ icon: Icon, label, desc }, i) => (
                                    <motion.div key={label} {...rv(i * 0.07)}>
                                        <div className={`${GS} rounded-xl p-5`}>
                                            <Icon size={20} className="text-primary" />
                                            <p className="mt-3 text-sm font-semibold text-foreground">
                                                {label}
                                            </p>
                                            <p className="mt-1 text-xs text-muted-foreground">
                                                {desc}
                                            </p>
                                        </div>
                                    </motion.div>
                                ))}
                            </div>
                        </CardContent>
                    </Card>
                </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">
                        <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">
                            Streamline procurement from day one.
                        </h2>
                        <p className="mx-auto mt-4 max-w-lg text-base text-white/45">
                            Raise POs, receive stock, and track what you owe —
                            without juggling spreadsheets or separate tools.
                        </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/inventory"
                                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"
                            >
                                Inventory control <ChevronRight size={15} />
                            </Link>
                        </div>
                    </div>
                </motion.div>
            </section>
        </WebLayout>
    );
}