import React, { useState } from 'react';
import { __ } from '@/lib/i18n';
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';

interface CouponFilterSheetProps {
  open: boolean;
  onClose: () => void;
  filters: {
    discount_type: string;
  };
  onFiltersChange: (filters: { discount_type: string }) => void;
  onReset: () => void;
}

export function CouponFilterSheet({
  open,
  onClose,
  filters,
  onFiltersChange,
  onReset,
}: CouponFilterSheetProps) {
  const [localFilters, setLocalFilters] = useState(filters);

  const handleApply = () => {
    onFiltersChange(localFilters);
    onClose();
  };

  const handleReset = () => {
    setLocalFilters({ discount_type: '' });
    onReset();
    onClose();
  };

  return (
    <Sheet open={open} onOpenChange={onClose}>
      <SheetContent side="bottom" className="h-[400px]">
        <SheetHeader>
          <SheetTitle>{__('Filter Coupons')}</SheetTitle>
        </SheetHeader>

        <div className="mt-6 space-y-6">
          {/* Discount Type */}
          <div className="space-y-2">
            <Label>{__('Discount Type')}</Label>
            <Select
              value={localFilters.discount_type || 'all'}
              onValueChange={(value) =>
                setLocalFilters({ ...localFilters, discount_type: value === 'all' ? '' : value })
              }
            >
              <SelectTrigger>
                <SelectValue placeholder={__('All types')} />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">{__('All types')}</SelectItem>
                <SelectItem value="percent">{__('Percentage')}</SelectItem>
                <SelectItem value="fixed_cart">{__('Fixed Cart')}</SelectItem>
                <SelectItem value="fixed_product">{__('Fixed Product')}</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>

        {/* Actions */}
        <div className="absolute bottom-0 left-0 right-0 p-4 border-t bg-background flex gap-3">
          <Button variant="outline" onClick={handleReset} className="flex-1">
            {__('Reset')}
          </Button>
          <Button onClick={handleApply} className="flex-1">
            {__('Apply Filters')}
          </Button>
        </div>
      </SheetContent>
    </Sheet>
  );
}
