'use client';

import * as React from 'react';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import axios from '@/network/axios';
import { apis } from '@/utils/apis/apis';
import { toast } from 'sonner';
import usePackagesList from '@/modules/client-management/hooks/usePackagesList';
import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Spinner } from '@/components/ui/spinners';

type Props = {
  userId: string;
  open: boolean;
  onOpenChange: (open: boolean) => void;
  hasActiveSubscription?: boolean;
};

export const AssignSubscriptionDialog = ({
  userId,
  open,
  onOpenChange,
  hasActiveSubscription,
}: Props) => {
  const queryClient = useQueryClient();
  const [search, setSearch] = React.useState('');
  const [packageId, setPackageId] = React.useState<string>('');
  const [errorMsg, setErrorMsg] = React.useState<string | null>(null);

  const { data: packages, isLoading: isPackagesLoading } = usePackagesList(
    open ? search || undefined : undefined,
  );

  React.useEffect(() => {
    if (!open) {
      setSearch('');
      setPackageId('');
      setErrorMsg(null);
    }
  }, [open]);

  const assignMutation = useMutation({
    mutationFn: async () => {
      if (!packageId) throw new Error('Select a package first');
      const fd = new FormData();
      fd.append('package_id', packageId);
      await axios.post(
        apis.DASHBOARD.USER_MANAGEMENT.UPDATE_USER(String(userId)),
        fd,
      );
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['user_subscriptions', userId] });
      queryClient.invalidateQueries({ queryKey: ['user_details', userId] });
      queryClient.invalidateQueries({ queryKey: ['balance-summary', userId] });
      toast.success('Subscription assigned successfully');
      onOpenChange(false);
    },
    onError: (err: unknown) => {
      const e = err as { response?: { data?: { message?: string } }; message?: string };
      setErrorMsg(
        e?.response?.data?.message ||
          e?.message ||
          'Failed to assign subscription',
      );
    },
  });

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Assign Subscription</DialogTitle>
          <DialogDescription>
            Pick a package to attach to this client. The subscription start &
            end dates are set automatically based on the package duration.
          </DialogDescription>
        </DialogHeader>

        {hasActiveSubscription && (
          <div className="rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800">
            This client already has an active subscription. The backend may
            reject assigning another one.
          </div>
        )}

        <div className="space-y-4 py-2">
          <div className="space-y-2">
            <Label>Search packages</Label>
            <Input
              placeholder="Type to filter packages…"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
            />
          </div>

          <div className="space-y-2">
            <Label>Package</Label>
            <Select
              value={packageId}
              onValueChange={(v) => {
                setPackageId(v);
                setErrorMsg(null);
              }}
              disabled={isPackagesLoading || assignMutation.isPending}
            >
              <SelectTrigger>
                <SelectValue
                  placeholder={
                    isPackagesLoading ? 'Loading packages…' : 'Choose a package'
                  }
                />
              </SelectTrigger>
              <SelectContent>
                {packages?.length ? (
                  packages.map((pkg) => (
                    <SelectItem key={pkg.id} value={String(pkg.id)}>
                      {pkg.name}
                    </SelectItem>
                  ))
                ) : (
                  <div className="px-3 py-2 text-xs text-muted-foreground">
                    No packages found
                  </div>
                )}
              </SelectContent>
            </Select>
          </div>

          {errorMsg && (
            <div className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700">
              {errorMsg}
            </div>
          )}
        </div>

        <DialogFooter>
          <Button
            variant="outline"
            onClick={() => onOpenChange(false)}
            disabled={assignMutation.isPending}
          >
            Cancel
          </Button>
          <Button
            onClick={() => assignMutation.mutate()}
            disabled={!packageId || assignMutation.isPending}
          >
            {assignMutation.isPending && (
              <Spinner className="size-4 animate-spin mr-2" />
            )}
            Assign
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};