// modules/admin/pages/advertisements/AdvertisementList.jsx

import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { House, Plus, Search, Megaphone, MousePointerClick, Edit, Trash2, Archive } from "lucide-react";

import { useAdvertisements } from "@/contexts/AdminAdvertisementContext";
import { resolveAssetSrc } from "@/utils/media.util";
import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
import { useDateFormat } from "@/hooks/useDateFormat";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Spinner } from "@/components/ui/spinner";
import {
    AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
    AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger,
} from "@/components/ui/alert-dialog";

import { ADVERTISEMENT_TYPES, ADVERTISEMENT_TYPE_MAP, ADVERTISEMENT_FILTERABLE_STATUSES, ADVERTISEMENT_STATUS_MAP } from "@/data/advertisement.data";
import { PLACEMENT_MAP } from "@/data/placement.data";
import { TablePagination } from "@/components/generic/Table/TablePagination";

const DEFAULT_PAGE_SIZE = 10;

export default function AdvertisementList() {
    const navigate = useNavigate();
    const { advertisements, pagination, loading, fetchAdvertisements, archiveAdvertisement } = useAdvertisements();

    const [typeFilter, setTypeFilter] = useState("all");
    const [statusFilter, setStatusFilter] = useState("all");
    const [searchInput, setSearchInput] = useState("");
    const [search, setSearch] = useState("");
    const [page, setPage] = useState(1);
    const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);

    const buildFilters = () => {
        const filters = [];
        if (typeFilter !== "all")   filters.push({ id: "type",     value: typeFilter });
        if (statusFilter !== "all") filters.push({ id: "status",   value: statusFilter });
        if (search.trim())         filters.push({ id: "headline", value: search.trim() });
        return filters;
    };

    // Single source of truth for fetching — filter setters below always pair
    // their state update with setPage(1) in the same handler so this only
    // ever fires once per change (no separate "reset page" effect racing it).
    useEffect(() => {
        fetchAdvertisements({ page, limit: pageSize, filters: buildFilters() });
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [typeFilter, statusFilter, search, page, pageSize]);

    const handleTypeFilter = (v) => { setTypeFilter(v); setPage(1); };
    const handleStatusFilter = (v) => { setStatusFilter(v); setPage(1); };
    const runSearch = () => { setSearch(searchInput); setPage(1); };
    const handlePageSizeChange = (size) => { setPageSize(size); setPage(1); };

    const items = [
        { label: "Home", icon: <House className="size-4" />, to: "/admin" },
        { label: "Advertisements" },
    ];

    const total       = pagination?.totalRecords ?? advertisements.length;
    const activeCount = advertisements.filter((a) => a.status === "active").length;
    const scheduledCount = advertisements.filter((a) => a.status === "scheduled").length;

    async function handleArchive(advertisementId) {
        await archiveAdvertisement(advertisementId);
    }

    return (
        <section className="bg-muted h-full">
            <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
                <div className="flex flex-col gap-2 my-6 w-full">
                    <AppBreadcrumb items={items} />
                </div>

                <div className="w-full flex flex-col gap-6 pb-10">

                    {/* ── Header ─────────────────────────────────────────────────── */}
                    <div className="flex items-center justify-between flex-wrap gap-3">
                        <div>
                            <h1 className="text-2xl font-semibold tracking-tight">Advertisements</h1>
                            <p className="text-sm text-muted-foreground">Manage public-facing hero and banner placements</p>
                        </div>
                        <div className="flex items-center gap-2">
                            <Button variant="outline" onClick={() => navigate("/admin/advertisements/archived")}>
                                <Archive className="size-4" />
                                Archived
                            </Button>
                            <Button onClick={() => navigate("/admin/advertisements/add")}>
                                <Plus className="size-4" />
                                New advertisement
                            </Button>
                        </div>
                    </div>

                    {/* ── Stat cards ─────────────────────────────────────────────── */}
                    <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
                        <StatCard label="Total ads"  value={total} />
                        <StatCard label="Active"     value={activeCount}    tone="success" />
                        <StatCard label="Scheduled"  value={scheduledCount} tone="info" />
                    </div>

                    {/* ── Filters ────────────────────────────────────────────────── */}
                    <div className="flex items-center gap-2 flex-wrap">
                        <Select value={typeFilter} onValueChange={handleTypeFilter}>
                            <SelectTrigger className="w-[150px] bg-background">
                                <SelectValue placeholder="All types" />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem value="all">All types</SelectItem>
                                {ADVERTISEMENT_TYPES.map((t) => (
                                    <SelectItem key={t.value} value={t.value}>{t.label}</SelectItem>
                                ))}
                            </SelectContent>
                        </Select>

                        <Select value={statusFilter} onValueChange={handleStatusFilter}>
                            <SelectTrigger className="w-[150px] bg-background">
                                <SelectValue placeholder="All statuses" />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem value="all">All statuses</SelectItem>
                                {ADVERTISEMENT_FILTERABLE_STATUSES.map((s) => (
                                    <SelectItem key={s.value} value={s.value}>{s.label}</SelectItem>
                                ))}
                            </SelectContent>
                        </Select>

                        <div className="flex items-center gap-2 flex-1 min-w-[160px]">
                            <div className="relative w-64">
                                <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
                                <Input
                                    placeholder="Search advertisements..."
                                    className="pl-8 bg-background"
                                    value={searchInput}
                                    onChange={(e) => setSearchInput(e.target.value)}
                                    onKeyDown={(e) => { if (e.key === "Enter") runSearch(); }}
                                />
                            </div>
                            <Button variant="outline" size="icon" className="shrink-0 bg-background" onClick={runSearch} aria-label="Search">
                                <Search className="size-4" />
                            </Button>
                        </div>
                    </div>

                    {/* ── Grid ───────────────────────────────────────────────────── */}
                    {loading ? (
                        <div className="flex items-center justify-center py-20">
                            <Spinner className="size-6" />
                        </div>
                    ) : advertisements.length === 0 ? (
                        <EmptyState onCreate={() => navigate("/admin/advertisements/add")} />
                    ) : (
                        <>
                            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                                {advertisements.map((ad) => (
                                    <AdvertisementCard
                                        key={ad.advertisement_id}
                                        ad={ad}
                                        onView={() => navigate(`/admin/advertisements/${ad.advertisement_id}/view`)}
                                        onEdit={() => navigate(`/admin/advertisements/${ad.advertisement_id}/edit`)}
                                        onArchive={() => handleArchive(ad.advertisement_id)}
                                    />
                                ))}
                            </div>

                            <div className="bg-background rounded-lg border">
                                <TablePagination
                                    pagination={pagination}
                                    onPageChange={setPage}
                                    onPageSizeChange={handlePageSizeChange}
                                    rowCount={advertisements.length}
                                    recordLabel="advertisement"
                                />
                            </div>
                        </>
                    )}
                </div>
            </div>
        </section>
    );
}

// ─── Stat card ──────────────────────────────────────────────────────────────

function StatCard({ label, value, tone = "default" }) {
    const toneClass = {
        default: "text-foreground",
        success: "text-green-600 dark:text-green-400",
        info:    "text-blue-600 dark:text-blue-400",
        muted:   "text-muted-foreground",
    }[tone];

    return (
        <div className="bg-background rounded-lg border p-4">
            <p className="text-sm text-muted-foreground mb-1">{label}</p>
            <p className={`text-2xl font-semibold ${toneClass}`}>{value}</p>
        </div>
    );
}

// ─── Advertisement card ─────────────────────────────────────────────────────

function AdvertisementCard({ ad, onView, onEdit, onArchive }) {
    const { fmtDateTime } = useDateFormat();
    const typeMeta      = ADVERTISEMENT_TYPE_MAP[ad.type] ?? {};
    const statusMeta    = ADVERTISEMENT_STATUS_MAP[ad.status] ?? {};
    const placementMeta = PLACEMENT_MAP[ad.placement] ?? null;
    const TypeIcon       = typeMeta.icon ?? Megaphone;

    const previewSrc = resolveAssetSrc(ad.image) || ad.image_url || null;
    const isDimmed   = ad.status === "expired" || ad.status === "archived";

    const dateRange = formatDateRange(ad.start_date, ad.end_date, fmtDateTime);

    return (
        <div className={`bg-background rounded-lg border overflow-hidden flex flex-col ${isDimmed ? "opacity-70" : ""}`}>
            <button
                type="button"
                onClick={onView}
                className="h-32 bg-muted dark:bg-purple-950 relative flex items-center justify-center w-full text-left cursor-pointer"
                aria-label="View advertisement details"
            >
                {previewSrc ? (
                    <img src={previewSrc} alt={ad.headline || ad.type} className="w-full h-full object-cover" />
                ) : (
                    <Megaphone className="size-7" />
                )}

                <span className={`absolute top-2 left-2 text-xs font-medium px-2 py-0.5 rounded-md ${statusMeta.badgeClass ?? "bg-muted text-muted-foreground"}`}>
                    {statusMeta.label ?? ad.status}
                </span>
                <span className="absolute top-2 right-2 flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-md bg-black/55 text-white">
                    <TypeIcon className="size-3" />
                    {typeMeta.label ?? ad.type}
                </span>
            </button>

            <div className="p-3 flex flex-col gap-2 flex-1">
                <button type="button" onClick={onView} className="text-left">
                    <p className="text-sm font-medium leading-snug truncate hover:underline">{ad.headline || ad.badge_label || "Untitled advertisement"}</p>
                    {placementMeta ? (
                        <p className="text-xs text-muted-foreground mt-0.5 truncate">{placementMeta.pageLabel} — {placementMeta.slotLabel}</p>
                    ) : (
                        <p className="text-xs text-amber-600 dark:text-amber-400 mt-0.5">Unassigned placement</p>
                    )}
                    {dateRange && <p className="text-xs text-muted-foreground mt-0.5">{dateRange}</p>}
                </button>

                <div className="mt-auto flex items-center justify-between text-xs text-muted-foreground pt-2">
                    <span className="flex items-center gap-1">
                        <MousePointerClick className="size-3.5" />
                        {ad.click_count ?? 0} clicks
                    </span>
                    <div className="flex gap-1">
                        <Button variant="ghost" size="icon" className="size-7" onClick={onEdit} aria-label="Edit">
                            <Edit className="size-3.5" />
                        </Button>
                        <AlertDialog>
                            <AlertDialogTrigger asChild>
                                <Button variant="ghost" size="icon" className="size-7" aria-label="Delete">
                                    <Trash2 className="size-3.5" />
                                </Button>
                            </AlertDialogTrigger>
                            <AlertDialogContent>
                                <AlertDialogHeader>
                                    <AlertDialogTitle>Archive this advertisement?</AlertDialogTitle>
                                    <AlertDialogDescription>
                                        "{ad.headline || ad.badge_label || "This advertisement"}" will be moved to archived advertisements. You can restore it later.
                                    </AlertDialogDescription>
                                </AlertDialogHeader>
                                <AlertDialogFooter>
                                    <AlertDialogCancel>Cancel</AlertDialogCancel>
                                    <AlertDialogAction onClick={onArchive}>Archive</AlertDialogAction>
                                </AlertDialogFooter>
                            </AlertDialogContent>
                        </AlertDialog>
                    </div>
                </div>
            </div>
        </div>
    );
}

// ─── Empty state ────────────────────────────────────────────────────────────

function EmptyState({ onCreate }) {
    return (
        <div className="flex flex-col items-center justify-center gap-3 py-20 text-center border rounded-lg bg-background">
            <Megaphone className="size-8 text-muted-foreground" />
            <div>
                <p className="font-medium">No advertisements yet</p>
                <p className="text-sm text-muted-foreground">Create your first hero or banner placement.</p>
            </div>
            <Button onClick={onCreate}>
                <Plus className="size-4" />
                New advertisement
            </Button>
        </div>
    );
}

// ─── Helpers ────────────────────────────────────────────────────────────────

function formatDateRange(start, end, fmtDate) {
    if (!start && !end) return null;
    if (start && end) return `${fmtDate(start)} - ${fmtDate(end)}`;
    if (start)         return `Starts ${fmtDate(start)}`;
    if (end)            return `Ends ${fmtDate(end)}`;
    return null;
}