'use client';

import { useState, useTransition } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { RiSearchLine, RiFilterLine } from '@remixicon/react';
import { Spinner } from '@/components/ui/spinners';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';
import { Label } from '@/components/ui/label';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';

export const SearchSallaClients = () => {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [isPending, startTransition] = useTransition();
  const [isDialogOpen, setIsDialogOpen] = useState(false);

  const [searchValues, setSearchValues] = useState({
    search: searchParams?.get('search') || '',
    status: searchParams?.get('status') || '',
  });

  const handleSearchChange = (value: string) => {
    setSearchValues({
      search: value,
      status: '',
    });
  };

  const handleStatusChange = (value: string) => {
    setSearchValues({
      search: '',
      status: value,
    });
  };

  const handleSearch = () => {
    startTransition(() => {
      const params = new URLSearchParams(searchParams?.toString());

      params.delete('page');
      params.delete('search');
      params.delete('status');

      if (searchValues.search.trim()) {
        params.set('search', searchValues.search.trim());
      } else if (searchValues.status) {
        params.set('status', searchValues.status);
      }

      router.push(`?${params.toString()}`);
      setIsDialogOpen(false);
    });
  };

  const handleClear = () => {
    startTransition(() => {
      setSearchValues({ search: '', status: '' });
      const params = new URLSearchParams();
      params.set('page', '1');
      router.push(`?${params.toString()}`);
      setIsDialogOpen(false);
    });
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      handleSearch();
    }
  };

  const hasSearchValues = searchValues.search.trim() || searchValues.status;

  return (
    <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
      <DialogTrigger asChild>
        <Button variant="outline" size="md" className="shrink-0">
          <RiFilterLine className="h-5 w-5" />
        </Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Filter Salla Clients</DialogTitle>
          <DialogDescription>
            Search by name/email/mobile OR filter by status (choose one)
          </DialogDescription>
        </DialogHeader>
        <div className="space-y-4 py-4">
          <div className="space-y-2">
            <Label htmlFor="search">Search</Label>
            <Input
              id="search"
              placeholder="Search by name, email, mobile, merchant..."
              value={searchValues.search}
              onChange={(e) => handleSearchChange(e.target.value)}
              onKeyDown={handleKeyDown}
              disabled={isPending || !!searchValues.status}
            />
            {searchValues.status && (
              <p className="text-xs text-muted-foreground">
                Clear status filter to search
              </p>
            )}
          </div>
          <div className="space-y-2">
            <Label>Or Filter by Status</Label>
            <RadioGroup
              value={searchValues.status}
              onValueChange={handleStatusChange}
              disabled={isPending || !!searchValues.search.trim()}
            >
              <div className="space-y-3">
                {['pending', 'confirmed', 'rejected'].map((status) => (
                  <div key={status} className="flex items-center gap-2.5">
                    <RadioGroupItem
                      value={status}
                      id={`status-${status}`}
                      disabled={isPending || !!searchValues.search.trim()}
                    />
                    <Label
                      htmlFor={`status-${status}`}
                      className="font-normal capitalize cursor-pointer"
                    >
                      {status}
                    </Label>
                  </div>
                ))}
              </div>
            </RadioGroup>
            {searchValues.search.trim() && (
              <p className="text-xs text-muted-foreground">
                Clear search to filter by status
              </p>
            )}
          </div>
        </div>
        <DialogFooter>
          {hasSearchValues && (
            <Button
              variant="outline"
              onClick={handleClear}
              disabled={isPending}
            >
              Clear
            </Button>
          )}
          <Button
            onClick={handleSearch}
            disabled={isPending || !hasSearchValues}
          >
            {isPending ? (
              <Spinner className="size-4 animate-spin mr-2" />
            ) : (
              <RiSearchLine className="h-4 w-4 mr-2" />
            )}
            Search
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};