import { JobOpeningCard } from '@/components/platform/JobOpeningCard';
import Seo from '@/components/Seo';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import PlatformLayout from '@/Layouts/PlatformLayout';
import { cn } from '@/lib/utils';
import type {
    JobOpeningFilters,
    JobOpeningListMeta,
    JobOpeningSummary,
} from '@/types/platform';
import { Link, router } from '@inertiajs/react';
import { motion, useInView } from 'framer-motion';
import {
    ArrowLeft,
    ChevronLeft,
    ChevronRight,
    Search,
    SearchX,
} from 'lucide-react';
import { useEffect, useRef, useState } from 'react';

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

interface Props {
    openings: JobOpeningSummary[];
    meta: JobOpeningListMeta;
    teams: string[];
    types: string[];
    filters: JobOpeningFilters;
}

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: 20 }}
            animate={inView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.5, delay, ease }}
            className={className}
        >
            {children}
        </motion.div>
    );
}

const SORT_OPTIONS = [
    { value: 'newest', label: 'Newest first' },
    { value: 'oldest', label: 'Oldest first' },
    { value: 'title', label: 'Title (A–Z)' },
];

const ALL_VALUE = '__all__';

function visit(params: Record<string, string | number>) {
    router.get('/careers/all', params, {
        preserveState: true,
        preserveScroll: true,
        replace: true,
    });
}

function buildPageList(current: number, last: number): (number | '…')[] {
    const pages: (number | '…')[] = [];
    const spread = 1;
    for (let p = 1; p <= last; p++) {
        if (
            p === 1 ||
            p === last ||
            (p >= current - spread && p <= current + spread)
        ) {
            pages.push(p);
        } else if (pages[pages.length - 1] !== '…') {
            pages.push('…');
        }
    }
    return pages;
}

function Pagination({
    meta,
    onPageChange,
}: {
    meta: JobOpeningListMeta;
    onPageChange: (page: number) => void;
}) {
    if (meta.last_page <= 1) return null;

    return (
        <div className="mt-12 flex items-center justify-center gap-1.5">
            <button
                disabled={meta.current_page <= 1}
                onClick={() => onPageChange(meta.current_page - 1)}
                className="border-border text-muted-foreground hover:bg-muted/60 hover:text-foreground flex h-9 w-9 items-center justify-center rounded-lg border transition-colors disabled:cursor-not-allowed disabled:opacity-40"
                aria-label="Previous page"
            >
                <ChevronLeft className="h-4 w-4" />
            </button>

            {buildPageList(meta.current_page, meta.last_page).map((p, i) =>
                p === '…' ? (
                    <span
                        key={`ellipsis-${i}`}
                        className="text-muted-foreground px-1.5 text-sm"
                    >
                        …
                    </span>
                ) : (
                    <button
                        key={p}
                        onClick={() => onPageChange(p)}
                        className={cn(
                            'flex h-9 w-9 items-center justify-center rounded-lg text-sm font-medium transition-colors',
                            p === meta.current_page
                                ? 'bg-primary text-primary-foreground'
                                : 'text-muted-foreground hover:bg-muted/60 hover:text-foreground',
                        )}
                    >
                        {p}
                    </button>
                ),
            )}

            <button
                disabled={meta.current_page >= meta.last_page}
                onClick={() => onPageChange(meta.current_page + 1)}
                className="border-border text-muted-foreground hover:bg-muted/60 hover:text-foreground flex h-9 w-9 items-center justify-center rounded-lg border transition-colors disabled:cursor-not-allowed disabled:opacity-40"
                aria-label="Next page"
            >
                <ChevronRight className="h-4 w-4" />
            </button>
        </div>
    );
}

export default function CareersIndex({
    openings,
    meta,
    teams,
    types,
    filters,
}: Props) {
    const [search, setSearch] = useState(filters.search);
    const isFirstRender = useRef(true);

    useEffect(() => {
        if (isFirstRender.current) {
            isFirstRender.current = false;
            return;
        }
        const timeout = setTimeout(() => {
            visit({
                search,
                team: filters.team,
                type: filters.type,
                sort: filters.sort,
                page: 1,
            });
        }, 400);
        return () => clearTimeout(timeout);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [search]);

    const hasActiveFilters =
        filters.search !== '' || filters.team !== '' || filters.type !== '';

    const clearFilters = () => {
        setSearch('');
        visit({ search: '', team: '', type: '', sort: 'newest', page: 1 });
    };

    return (
        <PlatformLayout>
            <Seo
                title="All Open Roles — Careers"
                description="Browse every open role at Upepo Finance. Filter by team, location, and employment type to find your next role."
            />

            <section className="pf-container pt-32 pb-24">
                <Link
                    href="/careers"
                    className="text-muted-foreground hover:text-foreground mb-8 inline-flex items-center gap-2 text-sm transition-colors"
                >
                    <ArrowLeft className="h-3.5 w-3.5" />
                    Back to careers
                </Link>

                <FadeUp className="mb-10">
                    <h1 className="pf-display text-foreground mb-2 text-3xl font-bold md:text-4xl">
                        All open roles
                    </h1>
                    <p className="text-muted-foreground text-sm">
                        {meta.total} {meta.total === 1 ? 'role' : 'roles'}{' '}
                        across every team.
                    </p>
                </FadeUp>

                {/* Filter bar */}
                <FadeUp
                    delay={0.05}
                    className="pf-card mb-10 flex flex-col gap-3 p-4 md:flex-row md:items-center"
                >
                    <div className="relative flex-1">
                        <Search className="text-muted-foreground/50 absolute top-1/2 left-3.5 h-4 w-4 -translate-y-1/2" />
                        <input
                            type="text"
                            value={search}
                            onChange={(e) => setSearch(e.target.value)}
                            placeholder="Search roles, teams, locations…"
                            className="border-border bg-card focus:border-primary/40 focus:ring-primary/20 w-full rounded-lg border py-2.5 pr-4 pl-10 text-sm outline-none focus:ring-2"
                        />
                    </div>

                    <div className="flex flex-wrap gap-3">
                        <Select
                            value={filters.team || ALL_VALUE}
                            onValueChange={(v) =>
                                visit({
                                    search,
                                    team: v === ALL_VALUE ? '' : v,
                                    type: filters.type,
                                    sort: filters.sort,
                                    page: 1,
                                })
                            }
                        >
                            <SelectTrigger className="w-full md:w-[160px]">
                                <SelectValue placeholder="All teams" />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem value={ALL_VALUE}>
                                    All teams
                                </SelectItem>
                                {teams.map((t) => (
                                    <SelectItem key={t} value={t}>
                                        {t}
                                    </SelectItem>
                                ))}
                            </SelectContent>
                        </Select>

                        <Select
                            value={filters.type || ALL_VALUE}
                            onValueChange={(v) =>
                                visit({
                                    search,
                                    team: filters.team,
                                    type: v === ALL_VALUE ? '' : v,
                                    sort: filters.sort,
                                    page: 1,
                                })
                            }
                        >
                            <SelectTrigger className="w-full md:w-[160px]">
                                <SelectValue placeholder="All types" />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem value={ALL_VALUE}>
                                    All types
                                </SelectItem>
                                {types.map((t) => (
                                    <SelectItem key={t} value={t}>
                                        {t}
                                    </SelectItem>
                                ))}
                            </SelectContent>
                        </Select>

                        <Select
                            value={filters.sort}
                            onValueChange={(v) =>
                                visit({
                                    search,
                                    team: filters.team,
                                    type: filters.type,
                                    sort: v,
                                    page: 1,
                                })
                            }
                        >
                            <SelectTrigger className="w-full md:w-[160px]">
                                <SelectValue placeholder="Sort" />
                            </SelectTrigger>
                            <SelectContent>
                                {SORT_OPTIONS.map((o) => (
                                    <SelectItem key={o.value} value={o.value}>
                                        {o.label}
                                    </SelectItem>
                                ))}
                            </SelectContent>
                        </Select>
                    </div>
                </FadeUp>

                {/* Results */}
                {openings.length === 0 ? (
                    <div className="py-16 text-center">
                        <SearchX className="text-muted-foreground/30 mx-auto mb-4 h-12 w-12" />
                        <p className="text-foreground mb-2 font-semibold">
                            No roles match your filters
                        </p>
                        <p className="text-muted-foreground mb-6 text-sm">
                            Try a different search term or clear your filters.
                        </p>
                        {hasActiveFilters && (
                            <button
                                onClick={clearFilters}
                                className="pf-btn-ghost inline-flex items-center gap-2 px-6 py-2.5 text-sm"
                            >
                                Clear filters
                            </button>
                        )}
                    </div>
                ) : (
                    <div className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3">
                        {openings.map((role, i) => (
                            <FadeUp key={role.id} delay={i * 0.04}>
                                <JobOpeningCard role={role} />
                            </FadeUp>
                        ))}
                    </div>
                )}

                <Pagination
                    meta={meta}
                    onPageChange={(page) =>
                        visit({
                            search,
                            team: filters.team,
                            type: filters.type,
                            sort: filters.sort,
                            page,
                        })
                    }
                />
            </section>
        </PlatformLayout>
    );
}