import Seo from '@/components/Seo';
import PlatformLayout from '@/Layouts/PlatformLayout';
import { resolveIcon } from '@/lib/icon-map';
import type { ArticleSummary } from '@/types/platform';
import { Link } from '@inertiajs/react';
import { motion, useInView } from 'framer-motion';
import {
    ArrowRight,
    HelpCircle,
    Mail,
    MessageCircle,
    Search,
} from 'lucide-react';
import { useMemo, useRef, useState } from 'react';

const ease = [0.16, 1, 0.3, 1] as const;

function FadeUp({
    children,
    delay = 0,
    className,
}: {
    children: React.ReactNode;
    delay?: number;
    className?: string;
}) {
    const ref = useRef<HTMLDivElement>(null);
    const inView = useInView(ref, { once: true, margin: '-60px' });
    return (
        <motion.div
            ref={ref}
            initial={{ opacity: 0, y: 28 }}
            animate={inView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.65, delay, ease }}
            className={className}
        >
            {children}
        </motion.div>
    );
}

interface HelpCategory {
    title: string;
    icon: string | null | undefined;
    articles: ArticleSummary[];
}

interface Props {
    articles: ArticleSummary[];
}

export default function Help({ articles }: Props) {
    const [query, setQuery] = useState('');

    const categories = useMemo<HelpCategory[]>(() => {
        const groups = new Map<string, ArticleSummary[]>();
        for (const article of articles) {
            const key = article.category ?? 'General';
            if (!groups.has(key)) groups.set(key, []);
            groups.get(key)!.push(article);
        }
        return Array.from(groups.entries()).map(([title, items]) => ({
            title,
            icon: items[0]?.icon,
            articles: items,
        }));
    }, [articles]);

    const totalArticles = articles.length;

    const filtered = query.trim()
        ? categories
              .map((c) => ({
                  ...c,
                  articles: c.articles.filter((a) =>
                      a.title.toLowerCase().includes(query.toLowerCase()),
                  ),
              }))
              .filter(
                  (c) =>
                      c.title.toLowerCase().includes(query.toLowerCase()) ||
                      c.articles.length > 0,
              )
        : categories;

    return (
        <PlatformLayout>
            <Seo
                title="Help Centre"
                description="Find answers, guides, and support resources for using Upepo Finance."
            />

            {/* Hero */}
            <section className="relative overflow-hidden pt-32 pb-20">
                <div className="pointer-events-none absolute inset-0 overflow-hidden">
                    <div
                        className="pf-blob pf-blob-1 absolute -top-20 left-1/4 h-[420px] w-[420px] opacity-20"
                        style={{
                            background:
                                'radial-gradient(circle, hsl(var(--primary) / 0.45), transparent 70%)',
                        }}
                    />
                </div>
                <div className="pf-container relative z-10 mx-auto max-w-2xl text-center">
                    <FadeUp delay={0.1}>
                        <h1 className="pf-display text-foreground mb-6 text-4xl font-bold md:text-5xl">
                            How can we{' '}
                            <span className="pf-gradient-text">help you?</span>
                        </h1>
                    </FadeUp>
                    <FadeUp delay={0.2}>
                        <div className="relative">
                            <Search className="text-muted-foreground/50 absolute top-1/2 left-4 h-5 w-5 -translate-y-1/2" />
                            <input
                                type="text"
                                placeholder="Search articles, tutorials, FAQs…"
                                value={query}
                                onChange={(e) => setQuery(e.target.value)}
                                className="border-border bg-card focus:border-primary/40 focus:ring-primary/20 w-full rounded-2xl border py-4 pr-4 pl-12 text-sm shadow-sm outline-none focus:ring-2"
                            />
                        </div>
                        <p className="text-muted-foreground mt-3 text-sm">
                            {totalArticles} articles across {categories.length}{' '}
                            categories
                        </p>
                    </FadeUp>
                </div>
            </section>

            {/* Categories */}
            <section className="pf-section">
                <div className="pf-container">
                    {filtered.length === 0 ? (
                        <div className="py-16 text-center">
                            <HelpCircle className="text-muted-foreground/30 mx-auto mb-4 h-12 w-12" />
                            <p className="text-foreground mb-2 font-semibold">
                                No articles found for "{query}"
                            </p>
                            <p className="text-muted-foreground text-sm">
                                Try a different search term or{' '}
                                <a
                                    href="mailto:support@upepofinance.com"
                                    className="text-primary underline"
                                >
                                    contact support
                                </a>
                                .
                            </p>
                        </div>
                    ) : (
                        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
                            {filtered.map((cat, i) => {
                                const Icon = resolveIcon(cat.icon);
                                return (
                                    <FadeUp key={cat.title} delay={i * 0.05}>
                                        <motion.div
                                            whileHover={{
                                                y: -4,
                                                scale: 1.01,
                                            }}
                                            transition={{ duration: 0.22 }}
                                            className="pf-card flex h-full flex-col p-6"
                                        >
                                            <div className="mb-4 flex items-center justify-between">
                                                <div className="pf-icon-box h-10 w-10">
                                                    <Icon className="h-5 w-5" />
                                                </div>
                                                <span className="pf-chip text-[9px]">
                                                    {cat.articles.length}{' '}
                                                    articles
                                                </span>
                                            </div>
                                            <h3 className="text-foreground mb-4 font-semibold">
                                                {cat.title}
                                            </h3>
                                            <ul className="flex-1 space-y-2">
                                                {cat.articles.map((article) => (
                                                    <li key={article.slug}>
                                                        <Link
                                                            href={`/help/${article.slug}`}
                                                            className="text-muted-foreground hover:text-primary flex items-start gap-2 text-xs transition-colors"
                                                        >
                                                            <ArrowRight className="mt-0.5 h-3 w-3 shrink-0" />
                                                            {article.title}
                                                        </Link>
                                                    </li>
                                                ))}
                                            </ul>
                                        </motion.div>
                                    </FadeUp>
                                );
                            })}
                        </div>
                    )}
                </div>
            </section>

            {/* Contact strip */}
            <section className="pf-section pf-section-tint">
                <div className="pf-container">
                    <FadeUp className="mb-10 text-center">
                        <h2 className="text-foreground text-2xl font-bold">
                            Still need help?
                        </h2>
                        <p className="text-muted-foreground mt-2 text-sm">
                            Our support team is available Monday–Friday,
                            08:00–18:00 EAT.
                        </p>
                    </FadeUp>
                    <div className="mx-auto grid max-w-2xl grid-cols-1 gap-4 md:grid-cols-2">
                        <FadeUp delay={0.05}>
                            <a
                                href="mailto:support@upepofinance.com"
                                className="pf-card flex items-start gap-4 p-5 transition-all hover:shadow-md"
                            >
                                <div className="pf-icon-box h-10 w-10 shrink-0">
                                    <Mail className="h-5 w-5" />
                                </div>
                                <div>
                                    <p className="text-foreground font-semibold">
                                        Email support
                                    </p>
                                    <p className="text-muted-foreground text-sm">
                                        Response within 4 hours on Pro plans
                                    </p>
                                </div>
                            </a>
                        </FadeUp>
                        <FadeUp delay={0.1}>
                            <Link
                                href="/support"
                                className="pf-card flex items-start gap-4 p-5 transition-all hover:shadow-md"
                            >
                                <div className="pf-icon-box h-10 w-10 shrink-0">
                                    <MessageCircle className="h-5 w-5" />
                                </div>
                                <div>
                                    <p className="text-foreground font-semibold">
                                        Live chat
                                    </p>
                                    <p className="text-muted-foreground text-sm">
                                        Available for Professional &amp;
                                        Enterprise plans
                                    </p>
                                </div>
                            </Link>
                        </FadeUp>
                    </div>
                </div>
            </section>
        </PlatformLayout>
    );
}