import { CalendarIcon } from 'lucide-react';
import { useState } from 'react';
import type { Matcher } from 'react-day-picker';

import { Button } from '@/components/ui/button';
import { Calendar } from '@/components/ui/calendar';
import {
    Popover,
    PopoverContent,
    PopoverTrigger,
} from '@/components/ui/popover';
import { cn, formatDate } from '@/lib/utils';

/**
 * `2026-07-15` -> Date tengah malam waktu lokal.
 *
 * Sengaja tidak lewat `new Date('2026-07-15')` yang dibaca sebagai UTC dan bisa
 * mundur sehari di timezone barat GMT.
 */
export const parseIsoDate = (value: string): Date | undefined =>
    value ? new Date(`${value}T00:00:00`) : undefined;

/** Kebalikannya, tetap pada komponen tanggal lokal supaya tidak geser hari. */
export const toIsoDate = (date: Date): string =>
    [
        date.getFullYear(),
        String(date.getMonth() + 1).padStart(2, '0'),
        String(date.getDate()).padStart(2, '0'),
    ].join('-');

interface DateFilterProps {
    label: string;
    /** Tanggal ISO (`YYYY-MM-DD`), string kosong berarti tidak difilter. */
    value: string;
    onChange: (value: string) => void;
    disabled?: Matcher;
}

/** Satu sisi rentang tanggal: tombol + kalender shadcn di dalam popover. */
export function DateFilter({
    label,
    value,
    onChange,
    disabled,
}: DateFilterProps) {
    const [open, setOpen] = useState(false);
    const selected = parseIsoDate(value);

    const commit = (date: string) => {
        onChange(date);
        setOpen(false);
    };

    return (
        <Popover open={open} onOpenChange={setOpen}>
            <PopoverTrigger asChild>
                <Button
                    variant="outline"
                    className={cn(
                        'h-9 w-full justify-start gap-2 font-normal sm:w-40',
                        !value && 'text-muted-foreground',
                    )}
                >
                    <CalendarIcon className="h-4 w-4 shrink-0 opacity-50" />
                    {selected ? formatDate(value) : label}
                </Button>
            </PopoverTrigger>
            <PopoverContent className="w-auto p-0" align="start">
                <Calendar
                    mode="single"
                    selected={selected}
                    defaultMonth={selected}
                    disabled={disabled}
                    onSelect={(date) => commit(date ? toIsoDate(date) : '')}
                />
                {value && (
                    <div className="border-t p-2">
                        <Button
                            variant="ghost"
                            size="sm"
                            className="w-full"
                            onClick={() => commit('')}
                        >
                            Clear
                        </Button>
                    </div>
                )}
            </PopoverContent>
        </Popover>
    );
}