import { CalendarDays, ChevronDown, TrendingUp } from "lucide-react";
import { router } from "@inertiajs/react";
import { Button } from "@/components/ui/button";
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { periodOptionsWith } from "@/lib/dashboard";

type Props = { period: string; userName?: string; companyName: string };

export default function DashboardHeader({
    period,
    userName,
    companyName,
}: Props) {
    const handleSelectPeriod = (periodValue: string) => {
        router.get(
            "/dashboard",
            { period: periodValue },
            { preserveScroll: true, replace: true },
        );
    };
    const activePeriodLabel =
        periodOptionsWith(period).find((item) => item.value === period)
            ?.label || period;

    return (
        <div className="relative overflow-hidden rounded-2xl bg-linear-to-r from-slate-900 via-indigo-950 to-slate-900 p-6 text-white shadow-xl">
            <div className="absolute -right-10 -top-10 size-48 rounded-full bg-indigo-500/10 blur-3xl" />
            <div className="relative z-10 flex flex-col justify-between gap-4 md:flex-row md:items-center">
                <div>
                    <div className="inline-flex items-center gap-2 rounded-full bg-white/10 px-3 py-1 text-xs font-semibold backdrop-blur-md">
                        <TrendingUp className="size-3.5 text-indigo-400" />
                        <span>Ringkasan Performa Perusahaan</span>
                    </div>
                    <h1 className="mt-2 text-2xl font-black tracking-tight text-white md:text-3xl">
                        Selamat Datang, {userName || "Manajer Sales"} 👋
                    </h1>
                    <p className="mt-1 text-xs text-slate-300">
                        Laporan performa penjualan dan operasional terkini untuk{" "}
                        <span className="font-semibold text-indigo-200">
                            {companyName}
                        </span>
                        .
                    </p>
                </div>

                {/* Filter Periode Dropdown */}
                <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                        <Button
                            variant="outline"
                            aria-label="Pilih Periode"
                            className="h-10 justify-between gap-3 rounded-xl border-white/20 bg-white/10 px-4 text-xs font-semibold text-white backdrop-blur-md shadow-xs hover:bg-white/20 hover:text-white"
                        >
                            <CalendarDays className="size-4 text-indigo-300" />
                            <span>Periode: {activePeriodLabel}</span>
                            <ChevronDown className="size-3.5 text-slate-300" />
                        </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent
                        align="end"
                        className="w-52 rounded-xl border-slate-200 bg-white shadow-xl dark:border-slate-800 dark:bg-slate-900"
                    >
                        {periodOptionsWith(period).map((option) => (
                            <DropdownMenuItem
                                key={option.value}
                                onClick={() => handleSelectPeriod(option.value)}
                                className={`cursor-pointer text-xs font-medium ${
                                    period === option.value
                                        ? "font-bold text-indigo-600 dark:text-indigo-400"
                                        : ""
                                }`}
                            >
                                {option.label}
                            </DropdownMenuItem>
                        ))}
                    </DropdownMenuContent>
                </DropdownMenu>
            </div>
        </div>
    );
}