import React from 'react';
import { X } from 'lucide-react';
import { __ } from '@/lib/i18n';
import { Button } from '@/components/ui/button';
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import OrderBy from '@/components/filters/OrderBy';

interface FilterBottomSheetProps {
  open: boolean;
  onClose: () => void;
  filters: {
    status?: string;
    type?: string;
    stock_status?: string;
    category?: string;
    orderby: 'date' | 'title' | 'id' | 'modified';
    order: 'asc' | 'desc';
  };
  onFiltersChange: (filters: any) => void;
  onReset: () => void;
  activeFiltersCount: number;
  categories?: Array<{ id: number; name: string }>;
}

export function FilterBottomSheet({
  open,
  onClose,
  filters,
  onFiltersChange,
  onReset,
  activeFiltersCount,
  categories = [],
}: FilterBottomSheetProps) {
  if (!open) return null;

  const hasActiveFilters = activeFiltersCount > 0;

  return (
    <>
      {/* Backdrop */}
      <div
        className="!m-0 fixed inset-0 bg-black/50 z-[60] md:hidden"
        onClick={onClose}
      />

      {/* Bottom Sheet */}
      <div className="fixed inset-x-0 bottom-0 z-[70] bg-background rounded-t-2xl shadow-2xl max-h-[85vh] flex flex-col md:hidden animate-in slide-in-from-bottom duration-300">
        {/* Drag Handle */}
        <div className="flex justify-center pt-3 pb-2">
          <div className="w-12 h-1.5 bg-muted-foreground/30 rounded-full" />
        </div>

        {/* Header */}
        <div className="flex items-center justify-between px-4 py-3 border-b">
          <h2 className="text-lg font-semibold">{__('Filters')}</h2>
          <button
            onClick={onClose}
            className="p-2 hover:bg-accent rounded-full transition-colors"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Content */}
        <div className="flex-1 overflow-y-auto p-4 space-y-4">
          {/* Status Filter */}
          <div className="space-y-2">
            <label className="text-sm font-medium">{__('Status')}</label>
            <Select
              value={filters.status ?? 'all'}
              onValueChange={(v) => {
                onFiltersChange({
                  ...filters,
                  status: v === 'all' ? undefined : v,
                });
              }}
            >
              <SelectTrigger className="w-full">
                <SelectValue placeholder={__('All statuses')} />
              </SelectTrigger>
              <SelectContent>
                <SelectGroup>
                  <SelectItem value="all">{__('All statuses')}</SelectItem>
                  <SelectItem value="publish">{__('Published')}</SelectItem>
                  <SelectItem value="draft">{__('Draft')}</SelectItem>
                  <SelectItem value="pending">{__('Pending')}</SelectItem>
                  <SelectItem value="private">{__('Private')}</SelectItem>
                </SelectGroup>
              </SelectContent>
            </Select>
          </div>

          {/* Product Type Filter */}
          <div className="space-y-2">
            <label className="text-sm font-medium">{__('Product Type')}</label>
            <Select
              value={filters.type ?? 'all'}
              onValueChange={(v) => {
                onFiltersChange({
                  ...filters,
                  type: v === 'all' ? undefined : v,
                });
              }}
            >
              <SelectTrigger className="w-full">
                <SelectValue placeholder={__('All types')} />
              </SelectTrigger>
              <SelectContent>
                <SelectGroup>
                  <SelectItem value="all">{__('All types')}</SelectItem>
                  <SelectItem value="simple">{__('Simple')}</SelectItem>
                  <SelectItem value="variable">{__('Variable')}</SelectItem>
                  <SelectItem value="grouped">{__('Grouped')}</SelectItem>
                  <SelectItem value="external">{__('External')}</SelectItem>
                </SelectGroup>
              </SelectContent>
            </Select>
          </div>

          {/* Stock Status Filter */}
          <div className="space-y-2">
            <label className="text-sm font-medium">{__('Stock Status')}</label>
            <Select
              value={filters.stock_status ?? 'all'}
              onValueChange={(v) => {
                onFiltersChange({
                  ...filters,
                  stock_status: v === 'all' ? undefined : v,
                });
              }}
            >
              <SelectTrigger className="w-full">
                <SelectValue placeholder={__('All stock statuses')} />
              </SelectTrigger>
              <SelectContent>
                <SelectGroup>
                  <SelectItem value="all">{__('All stock statuses')}</SelectItem>
                  <SelectItem value="instock">{__('In Stock')}</SelectItem>
                  <SelectItem value="outofstock">{__('Out of Stock')}</SelectItem>
                  <SelectItem value="onbackorder">{__('On Backorder')}</SelectItem>
                </SelectGroup>
              </SelectContent>
            </Select>
          </div>

          {/* Category Filter */}
          {categories.length > 0 && (
            <div className="space-y-2">
              <label className="text-sm font-medium">{__('Category')}</label>
              <Select
                value={filters.category ?? 'all'}
                onValueChange={(v) => {
                  onFiltersChange({
                    ...filters,
                    category: v === 'all' ? undefined : v,
                  });
                }}
              >
                <SelectTrigger className="w-full">
                  <SelectValue placeholder={__('All categories')} />
                </SelectTrigger>
                <SelectContent>
                  <SelectGroup>
                    <SelectItem value="all">{__('All categories')}</SelectItem>
                    {categories.map((cat) => (
                      <SelectItem key={cat.id} value={String(cat.id)}>
                        {cat.name}
                      </SelectItem>
                    ))}
                  </SelectGroup>
                </SelectContent>
              </Select>
            </div>
          )}

          {/* Sort Order Filter */}
          <div className="space-y-2">
            <label className="text-sm font-medium">{__('Sort By')}</label>
            <OrderBy
              value={{ orderby: filters.orderby, order: filters.order }}
              onChange={(v) => {
                onFiltersChange({
                  ...filters,
                  orderby: (v.orderby ?? 'date') as 'date' | 'title' | 'id' | 'modified',
                  order: (v.order ?? 'desc') as 'asc' | 'desc',
                });
              }}
            />
          </div>
        </div>

        {/* Footer - Only show Reset if filters active */}
        {hasActiveFilters && (
          <div className="sticky bottom-0 bg-background border-t p-4">
            <Button
              variant="outline"
              onClick={() => {
                onReset();
                onClose();
              }}
              className="w-full"
            >
              {__('Clear all filters')}
            </Button>
          </div>
        )}
      </div>
    </>
  );
}
