'use client';

import { useMemo, useState } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { CheckCircle2, XCircle } from 'lucide-react';
import { toast } from 'sonner';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import { Alert, AlertIcon, AlertTitle } from '@/components/ui/alert';
import { RiCheckboxCircleFill } from '@remixicon/react';
import PaginationComponent from '@/modules/client-management/components/paginationComponent/paginationComponent';
import { useGetZidRegistrations } from '../hooks/useGetZidRegistrations';
import { useApproveZidRegistration } from '../hooks/useApproveZidRegistration';
import { useRejectZidRegistration } from '../hooks/useRejectZidRegistration';
import { ZidRegistration } from '../types';

const STATUS_OPTIONS = [
  { value: 'pending', label: 'Pending' },
  { value: 'approved', label: 'Approved' },
  { value: 'rejected', label: 'Rejected' },
  { value: 'all', label: 'All' },
];

const statusColor = (status: string) =>
  status === 'approved'
    ? ('success' as const)
    : status === 'rejected'
      ? ('destructive' as const)
      : ('warning' as const);

const ZidClients = () => {
  const router = useRouter();
  const searchParams = useSearchParams();

  const status = searchParams?.get('status') || 'pending';
  const pageFromUrl = Number(searchParams?.get('page') || '1');

  const { data, isLoading } = useGetZidRegistrations({ status, page: pageFromUrl });

  const registrations = data?.data?.data || [];
  const currentPage = data?.data?.current_page ?? pageFromUrl ?? 1;
  const totalPages = data?.data?.last_page ?? 1;

  const [rejectDialogState, setRejectDialogState] = useState<{
    open: boolean;
    id: string | null;
  }>({ open: false, id: null });
  const [rejectionReason, setRejectionReason] = useState('');

  const approveMutation = useApproveZidRegistration();
  const rejectMutation = useRejectZidRegistration();

  const setParam = (key: string, value: string) => {
    const params = new URLSearchParams(searchParams?.toString());
    params.set(key, value);
    if (key !== 'page') params.set('page', '1');
    router.push(`?${params.toString()}`);
  };

  const handleApprove = (id: string) => {
    approveMutation.mutate(id, {
      onSuccess: () => {
        toast.custom(
          (t) => (
            <Alert variant="mono" icon="success" close={false} onClose={() => toast.dismiss(t)}>
              <AlertIcon>
                <RiCheckboxCircleFill />
              </AlertIcon>
              <AlertTitle>Registration approved successfully</AlertTitle>
            </Alert>
          ),
          { position: 'top-center' },
        );
      },
      onError: (e: unknown) => {
        const err = e as { response?: { data?: { message?: string } } };
        toast.error(err?.response?.data?.message || 'Failed to approve registration');
      },
    });
  };

  const handleRejectClick = (id: string) => {
    setRejectDialogState({ open: true, id });
    setRejectionReason('');
  };

  const handleReject = () => {
    if (!rejectionReason.trim() || !rejectDialogState.id) {
      toast.error('Please provide a rejection reason');
      return;
    }
    rejectMutation.mutate(
      { id: rejectDialogState.id, body: { reason: rejectionReason } },
      {
        onSuccess: () => {
          setRejectDialogState({ open: false, id: null });
          setRejectionReason('');
          toast.custom(
            (t) => (
              <Alert variant="mono" icon="success" close={false} onClose={() => toast.dismiss(t)}>
                <AlertIcon>
                  <RiCheckboxCircleFill />
                </AlertIcon>
                <AlertTitle>Registration rejected successfully</AlertTitle>
              </Alert>
            ),
            { position: 'top-center' },
          );
        },
        onError: (e: unknown) => {
          const err = e as { response?: { data?: { message?: string } } };
          toast.error(err?.response?.data?.message || 'Failed to reject registration');
        },
      },
    );
  };

  const tableHead = [
    'Store',
    'Merchant',
    'Email',
    'Phone',
    'Store URL',
    'Status',
    'Created At',
    'Actions',
  ];

  const rows = useMemo(
    () =>
      registrations.map((r: ZidRegistration) => ({
        r,
        store: r.store_name || r.store_id || '-',
        merchant: r.merchant_name || r.merchant_username || '-',
        email: r.email || r.merchant_email || '-',
        phone: r.merchant_phone || '-',
        url: r.store_url,
        created: r.created_at
          ? new Date(r.created_at).toLocaleDateString('en-US', {
              year: 'numeric',
              month: 'short',
              day: 'numeric',
            })
          : '-',
      })),
    [registrations],
  );

  return (
    <>
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between w-full">
            <CardTitle>Zid Clients</CardTitle>
            <Select value={status} onValueChange={(v) => setParam('status', v)}>
              <SelectTrigger className="h-9 w-[160px]">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {STATUS_OPTIONS.map((o) => (
                  <SelectItem key={o.value} value={o.value}>
                    {o.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </CardHeader>
        <CardContent className="overflow-x-auto p-0">
          {isLoading ? (
            <div className="flex items-center justify-center py-10">
              <div className="text-muted-foreground">Loading...</div>
            </div>
          ) : (
            <Table className="min-w-max">
              <TableHeader>
                <TableRow className="bg-accent/60">
                  {tableHead.map((h) => (
                    <TableHead key={h} className="min-w-[120px] h-10 whitespace-nowrap">
                      {h}
                    </TableHead>
                  ))}
                </TableRow>
              </TableHeader>
              <TableBody>
                {rows.length > 0 ? (
                  rows.map(({ r, store, merchant, email, phone, url, created }) => (
                    <TableRow key={r.id}>
                      <TableCell className="text-sm font-medium text-mono whitespace-nowrap">
                        {store}
                      </TableCell>
                      <TableCell className="text-sm text-foreground whitespace-nowrap">
                        {merchant}
                      </TableCell>
                      <TableCell className="text-sm text-foreground whitespace-nowrap">
                        {email}
                      </TableCell>
                      <TableCell className="text-sm text-foreground whitespace-nowrap">
                        {phone}
                      </TableCell>
                      <TableCell className="text-sm whitespace-nowrap">
                        {url ? (
                          <a
                            href={url}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="text-primary hover:underline"
                          >
                            {url}
                          </a>
                        ) : (
                          '-'
                        )}
                      </TableCell>
                      <TableCell className="text-start whitespace-nowrap">
                        <Badge variant={statusColor(r.status)} appearance="outline">
                          {r.status.charAt(0).toUpperCase() + r.status.slice(1)}
                        </Badge>
                      </TableCell>
                      <TableCell className="text-sm text-foreground whitespace-nowrap">
                        {created}
                      </TableCell>
                      <TableCell className="text-start whitespace-nowrap">
                        {r.status === 'pending' ? (
                          <div className="flex items-center gap-2">
                            <Button
                              size="sm"
                              variant="outline"
                              className="text-green-600 hover:text-green-700 hover:bg-green-50"
                              disabled={approveMutation.isPending}
                              onClick={() => handleApprove(String(r.id))}
                            >
                              <CheckCircle2 className="size-4" />
                              Approve
                            </Button>
                            <Button
                              size="sm"
                              variant="outline"
                              className="text-red-600 hover:text-red-700 hover:bg-red-50"
                              onClick={() => handleRejectClick(String(r.id))}
                            >
                              <XCircle className="size-4" />
                              Reject
                            </Button>
                          </div>
                        ) : r.status === 'rejected' && r.rejection_reason ? (
                          <span className="text-xs text-muted-foreground">
                            {r.rejection_reason}
                          </span>
                        ) : null}
                      </TableCell>
                    </TableRow>
                  ))
                ) : (
                  <TableRow>
                    <TableCell
                      colSpan={tableHead.length}
                      className="text-center py-8 text-muted-foreground"
                    >
                      No registrations found
                    </TableCell>
                  </TableRow>
                )}
              </TableBody>
            </Table>
          )}
        </CardContent>

        <CardFooter className="justify-center">
          <PaginationComponent
            currentPage={currentPage}
            totalPages={totalPages}
            onPageChange={(page) => setParam('page', String(page))}
          />
        </CardFooter>
      </Card>

      <Dialog
        open={rejectDialogState.open}
        onOpenChange={(open) => setRejectDialogState({ open, id: null })}
      >
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Reject Registration</DialogTitle>
            <DialogDescription>
              Please provide a reason for rejecting this Zid registration. This will be
              recorded for reference.
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-2">
            <Label htmlFor="reason">Rejection Reason</Label>
            <Textarea
              id="reason"
              placeholder="Enter rejection reason..."
              value={rejectionReason}
              onChange={(e) => setRejectionReason(e.target.value)}
              rows={4}
            />
          </div>
          <DialogFooter>
            <Button
              variant="outline"
              onClick={() => setRejectDialogState({ open: false, id: null })}
            >
              Cancel
            </Button>
            <Button
              variant="destructive"
              onClick={handleReject}
              disabled={rejectMutation.isPending}
            >
              Reject Registration
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
};

export default ZidClients;