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 DateRange from '@/components/filters/DateRange';
import OrderBy from '@/components/filters/OrderBy';

interface FilterBottomSheetProps {
  open: boolean;
  onClose: () => void;
  filters: {
    status?: string;
    dateStart?: string;
    dateEnd?: string;
    orderby: 'date' | 'id' | 'modified' | 'total';
    order: 'asc' | 'desc';
  };
  onFiltersChange: (filters: any) => void;
  onReset: () => void;
  activeFiltersCount: number;
}

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

  const hasActiveFilters = activeFiltersCount > 0;

  return (
    <>
      {/* Backdrop - use !m-0 to override parent spacing */}
      <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="pending">{__('Pending')}</SelectItem>
                  <SelectItem value="processing">{__('Processing')}</SelectItem>
                  <SelectItem value="completed">{__('Completed')}</SelectItem>
                  <SelectItem value="on-hold">{__('On-hold')}</SelectItem>
                  <SelectItem value="cancelled">{__('Cancelled')}</SelectItem>
                  <SelectItem value="refunded">{__('Refunded')}</SelectItem>
                  <SelectItem value="failed">{__('Failed')}</SelectItem>
                </SelectGroup>
              </SelectContent>
            </Select>
          </div>

          {/* Date Range Filter */}
          <div className="space-y-2">
            <label className="text-sm font-medium">{__('Date Range')}</label>
            <DateRange
              value={{ date_start: filters.dateStart, date_end: filters.dateEnd }}
              onChange={(v) => {
                onFiltersChange({
                  ...filters,
                  dateStart: v.date_start,
                  dateEnd: v.date_end,
                });
              }}
            />
          </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' | 'id' | 'modified' | 'total',
                  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>
    </>
  );
}
