"use client";

import { useNewsFilter } from "@/lib/hooks";
import { ChevronDown, X, Search, Calendar } from "lucide-react";

interface NewsFilterBarProps {
    categories: string[];
    total: number;
}

export default function NewsFilterBar({ categories, total }: NewsFilterBarProps) {
    const {
        filters,
        hasActiveFilters,
        isPending,
        showDateFilter,
        setShowDateFilter,
        showCategoryDropdown,
        setShowCategoryDropdown,
        setSearch,
        setCategory,
        setStartDate,
        setEndDate,
        resetAllFilters,
    } = useNewsFilter();

    const allCategories = ["Semua", ...categories];

    return (
        <div className={`mb-12 bg-white rounded-2xl shadow-lg p-6 transition-opacity duration-200 ${isPending ? "opacity-60" : ""}`}>
            <div className="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8">
                <div className="flex-1">
                    <div className="relative">
                        <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
                        <input
                            type="text"
                            placeholder="Cari berita..."
                            defaultValue={filters.search}
                            onChange={(e) => setSearch(e.target.value)}
                            className="w-full pl-12 pr-4 py-3 bg-gray-50 border border-gray-200 rounded-full outline-none focus:border-gray-500 focus:ring-0"
                        />
                    </div>
                </div>

                <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4">
                    <div className="flex items-center gap-2">
                        <span className="text-gray-700 font-medium whitespace-nowrap">Kategori:</span>
                        <div className="relative">
                            <button
                                type="button"
                                onClick={() => setShowCategoryDropdown(!showCategoryDropdown)}
                                className="cursor-pointer flex items-center justify-between gap-3 px-4 py-2 bg-white border border-gray-300 text-gray-700 rounded-full hover:bg-gray-50 focus:outline-none focus:border-gray-500 transition-all duration-200 w-[220px]"
                            >
                                <span className="truncate">
                                    {filters.category === "Semua" ? "Semua Kategori" : filters.category}
                                </span>
                                <ChevronDown className={`h-4 w-4 text-gray-500 flex-shrink-0 transition-transform duration-200 ${showCategoryDropdown ? "rotate-180" : ""}`} />
                            </button>

                            {showCategoryDropdown && (
                                <>
                                    <div
                                        className="fixed inset-0 z-40"
                                        onClick={() => setShowCategoryDropdown(false)}
                                    />
                                    <div className="absolute z-50 mt-2 bg-white rounded-lg shadow-lg border border-gray-200 py-2 w-full top-full left-0">
                                        {allCategories.map((cat) => (
                                            <button
                                                key={cat}
                                                onClick={() => {
                                                    setCategory(cat);
                                                    setShowCategoryDropdown(false);
                                                }}
                                                className={`w-full cursor-pointer text-left px-4 py-3 hover:bg-gray-50 transition-colors duration-150 flex items-center gap-3 ${filters.category === cat
                                                        ? "text-brand font-medium bg-brand/5"
                                                        : "text-gray-700"
                                                    }`}
                                            >
                                                <span className="flex-1">{cat}</span>
                                                {filters.category === cat && (
                                                    <svg className="h-4 w-4 text-brand" fill="currentColor" viewBox="0 0 20 20">
                                                        <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                                                    </svg>
                                                )}
                                            </button>
                                        ))}
                                    </div>
                                </>
                            )}
                        </div>
                    </div>

                    <div className="relative">
                        <button
                            onClick={() => setShowDateFilter(!showDateFilter)}
                            className="flex cursor-pointer items-center gap-2 px-4 py-2 bg-white border border-gray-200 text-gray-700 rounded-full hover:bg-gray-50 hover:border-gray-300 focus:outline-none transition-colors duration-200"
                        >
                            <Calendar className="h-4 w-4" />
                            <span className="whitespace-nowrap">
                                {filters.startDate && filters.endDate
                                    ? `${new Date(filters.startDate).toLocaleDateString("id-ID")} - ${new Date(filters.endDate).toLocaleDateString("id-ID")}`
                                    : "Rentang Tanggal"}
                            </span>
                            <ChevronDown className={`h-4 w-4 transition-transform duration-200 ${showDateFilter ? "rotate-180" : ""}`} />
                        </button>

                        {showDateFilter && (
                            <div className="absolute z-40 mt-2 bg-white border border-gray-200 rounded-xl shadow-lg p-4 w-80 right-0">
                                <div className="flex items-center justify-between mb-4">
                                    <h3 className="font-medium text-gray-700">Pilih Rentang Tanggal</h3>
                                    <button
                                        onClick={() => { setStartDate(""); setEndDate(""); }}
                                        className="text-sm text-gray-500 hover:text-gray-700 cursor-pointer"
                                    >
                                        Reset
                                    </button>
                                </div>
                                <div className="space-y-4">
                                    <div>
                                        <label className="block text-sm font-medium text-gray-700 mb-1">Dari Tanggal</label>
                                        <input
                                            type="date"
                                            value={filters.startDate}
                                            onChange={(e) => setStartDate(e.target.value)}
                                            max={filters.endDate || undefined}
                                            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand focus:border-transparent"
                                        />
                                    </div>
                                    <div>
                                        <label className="block text-sm font-medium text-gray-700 mb-1">Sampai Tanggal</label>
                                        <input
                                            type="date"
                                            value={filters.endDate}
                                            onChange={(e) => setEndDate(e.target.value)}
                                            min={filters.startDate || undefined}
                                            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand focus:border-transparent"
                                        />
                                    </div>
                                    {filters.startDate && filters.endDate && (
                                        <div className="pt-2 border-t border-gray-200">
                                            <div className="flex items-center justify-between text-sm">
                                                <span className="text-gray-600">Durasi:</span>
                                                <span className="font-medium text-brand">
                                                    {Math.ceil((new Date(filters.endDate).getTime() - new Date(filters.startDate).getTime()) / 86400000) + 1} hari
                                                </span>
                                            </div>
                                        </div>
                                    )}
                                </div>
                            </div>
                        )}
                    </div>

                    {hasActiveFilters && (
                        <button
                            onClick={resetAllFilters}
                            className="px-4 py-2 bg-gray-100 text-gray-600 rounded-full text-sm font-medium hover:bg-gray-200 transition-colors duration-200 flex items-center gap-2 whitespace-nowrap"
                        >
                            <X className="h-4 w-4" />
                            Reset Semua
                        </button>
                    )}
                </div>
            </div>

            {/* Active filter tags + result count */}
            <div className="flex flex-wrap items-center justify-between gap-4">
                <div className="flex flex-wrap items-center gap-4">
                    <div className="text-gray-700">
                        <span className="font-semibold text-brand">{total}</span> berita ditemukan
                        {filters.search && (
                            <span className="ml-1">untuk &ldquo;<span className="font-semibold">{filters.search}</span>&rdquo;</span>
                        )}
                    </div>

                    <div className="flex flex-wrap gap-2">
                        {filters.category !== "Semua" && (
                            <span className="inline-flex items-center gap-1 bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm">
                                Kategori: {filters.category}
                                <button onClick={() => setCategory("Semua")} className="hover:text-blue-900 cursor-pointer">
                                    <X className="h-3 w-3" />
                                </button>
                            </span>
                        )}
                        {filters.startDate && (
                            <span className="inline-flex items-center gap-1 bg-green-50 text-green-700 px-3 py-1 rounded-full text-sm">
                                Dari: {new Date(filters.startDate).toLocaleDateString("id-ID")}
                                <button onClick={() => setStartDate("")} className="hover:text-green-900 cursor-pointer">
                                    <X className="h-3 w-3" />
                                </button>
                            </span>
                        )}
                        {filters.endDate && (
                            <span className="inline-flex items-center gap-1 bg-green-50 text-green-700 px-3 py-1 rounded-full text-sm">
                                Sampai: {new Date(filters.endDate).toLocaleDateString("id-ID")}
                                <button onClick={() => setEndDate("")} className="hover:text-green-900 cursor-pointer">
                                    <X className="h-3 w-3" />
                                </button>
                            </span>
                        )}
                    </div>
                </div>

                <div className="flex items-center gap-2 text-gray-600 text-sm">
                    <Calendar className="w-4 h-4" />
                    <span>
                        {new Date().toLocaleDateString("id-ID", { day: "numeric", month: "long", year: "numeric" })}
                    </span>
                </div>
            </div>
        </div>
    );
}