"use client"

import React from "react"
import type { FieldValues, UseFormReturn } from "react-hook-form"
import {
    Sheet,
    SheetContent,
    SheetHeader,
    SheetTitle,
    SheetFooter,
} from "@/shared/components/ui/sheet"
import { Button } from "@/shared/components/ui/button"
import { Badge } from "@/shared/components/ui/badge"
import { Rhform } from "@/shared/components/form"
import { ScrollArea } from "@/shared/components/ui/scroll-area"
import { Filter, FilterIcon, RotateCcwIcon } from "lucide-react"

type FilterDrawerProps<TFormValues extends FieldValues> = {
    form: UseFormReturn<TFormValues>
    isOpen: boolean
    onOpenChange: (open: boolean) => void
    onSubmit: (values: TFormValues) => void
    onReset: () => void
    activeFilterCount: number
    title?: string
    children: React.ReactNode
}

export function FilterDrawer<TFormValues extends FieldValues>({
    form,
    isOpen,
    onOpenChange,
    onSubmit,
    onReset,
    activeFilterCount,
    title = "Filters",
    children,
}: FilterDrawerProps<TFormValues>) {
    return (
        <Sheet open={isOpen} onOpenChange={onOpenChange}>
            <SheetContent side="left" className="flex flex-col sm:max-w-md">
                <SheetHeader>
                    <SheetTitle className="text-lg font-bold">
                        <FilterIcon className="mr-2 inline h-5 w-5" />
                        {title}</SheetTitle>
                </SheetHeader>
                <Rhform form={form} onSubmit={onSubmit} className="flex min-h-0 flex-1 flex-col">
                    <ScrollArea className="min-h-0 flex-1 px-4">
                        <div className="space-y-4 pb-4">
                            {children}
                        </div>
                    </ScrollArea>
                    <SheetFooter className="border-t">
                        <div className="flex w-full gap-2">
                            <Button type="button" variant="outline" className="flex-1" onClick={onReset}>
                                <RotateCcwIcon className="mr-2 h-4 w-4" />
                                Reset
                            </Button>
                            <Button type="submit" className="flex-1">
                                Apply Filters
                                {activeFilterCount > 0 && (
                                    <Badge variant="secondary" className="ml-2 h-5 min-w-5 rounded-full px-1.5 text-xs">
                                        {activeFilterCount}
                                    </Badge>
                                )}
                            </Button>
                        </div>
                    </SheetFooter>
                </Rhform>
            </SheetContent>
        </Sheet>
    )
}

export function FilterTrigger({
    onClick,
    activeFilterCount,
}: {
    onClick: () => void
    activeFilterCount: number
}) {
    return (
        <Button variant="outline" size="sm" onClick={onClick} className="gap-2">
            <FilterIcon className="h-4 w-4" />
            Filters
            {activeFilterCount > 0 && (
                <Badge variant="secondary" className="h-5 min-w-5 rounded-full px-1.5 text-xs">
                    {activeFilterCount}
                </Badge>
            )}
        </Button>
    )
}
