'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 SearchUsers = () => {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [isPending, startTransition] = useTransition();
  const [isDialogOpen, setIsDialogOpen] = useState(false);

  const [searchValues, setSearchValues] = useState({
    name: searchParams?.get('name') || '',
    email: searchParams?.get('email') || '',
    phone: searchParams?.get('phone') || '',
    is_activated: searchParams?.get('is_activated') || '',
  });

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

      // Remove existing search params and reset to page 1
      params.delete('page');
      params.delete('name');
      params.delete('email');
      params.delete('phone');
      params.delete('is_activated');

      // Add new search params if they have values
      if (searchValues.name.trim()) {
        params.set('name', searchValues.name.trim());
      }
      if (searchValues.email.trim()) {
        params.set('email', searchValues.email.trim());
      }
      if (searchValues.phone.trim()) {
        params.set('phone', searchValues.phone.trim());
      }
      if (searchValues.is_activated) {
        params.set('is_activated', searchValues.is_activated);
      }

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

  const handleClear = () => {
    startTransition(() => {
      setSearchValues({ name: '', email: '', phone: '', is_activated: '' });
      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.name.trim() ||
    searchValues.email.trim() ||
    searchValues.phone.trim() ||
    searchValues.is_activated;

  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 Users</DialogTitle>
          <DialogDescription>
            Search users by name, email, phone or filter by status
          </DialogDescription>
        </DialogHeader>
        <div className="space-y-4 py-4">
          <div className="space-y-2">
            <Label htmlFor="name">Name</Label>
            <Input
              id="name"
              placeholder="Search by name..."
              value={searchValues.name}
              onChange={(e) =>
                setSearchValues({ ...searchValues, name: e.target.value })
              }
              onKeyDown={handleKeyDown}
              disabled={isPending}
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="email">Email</Label>
            <Input
              id="email"
              type="email"
              placeholder="Search by email..."
              value={searchValues.email}
              onChange={(e) =>
                setSearchValues({ ...searchValues, email: e.target.value })
              }
              onKeyDown={handleKeyDown}
              disabled={isPending}
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="phone">Phone</Label>
            <Input
              id="phone"
              placeholder="Search by phone..."
              value={searchValues.phone}
              onChange={(e) =>
                setSearchValues({ ...searchValues, phone: e.target.value })
              }
              onKeyDown={handleKeyDown}
              disabled={isPending}
            />
          </div>
          <div className="space-y-2">
            <Label>Status</Label>
            <RadioGroup
              value={searchValues.is_activated}
              onValueChange={(value) =>
                setSearchValues({ ...searchValues, is_activated: value })
              }
              disabled={isPending}
            >
              <div className="space-y-3">
                <div className="flex items-center gap-2.5">
                  <RadioGroupItem
                    value="1"
                    id="status-active"
                    disabled={isPending}
                  />
                  <Label
                    htmlFor="status-active"
                    className="font-normal cursor-pointer"
                  >
                    Active
                  </Label>
                </div>
                <div className="flex items-center gap-2.5">
                  <RadioGroupItem
                    value="0"
                    id="status-inactive"
                    disabled={isPending}
                  />
                  <Label
                    htmlFor="status-inactive"
                    className="font-normal cursor-pointer"
                  >
                    Not Active
                  </Label>
                </div>
              </div>
            </RadioGroup>
          </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>
  );
};