'use client';

import { useMemo, useState } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import Link from 'next/link';
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 { 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 { SearchSallaClients } from './SearchSallaClients';
import { useGetSallaClients } from '../hooks/useGetSallaClients';
import { useConfirmClient } from '../hooks/useConfirmClient';
import { useRejectClient } from '../hooks/useRejectClient';
import { SallaClient } from '../types';

type TableCellData = {
  value: string | number | null | React.ReactNode;
  color?: 'warning' | 'success' | 'destructive';
  isButton?: boolean;
  isLink?: boolean;
  href?: string;
};

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

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

  const { data, isLoading } = useGetSallaClients({
    status,
    search,
    per_page: 15,
    page: pageFromUrl,
  });

  const clients = data?.data?.items || [];
  const pagination = data?.data;

  const currentPage = useMemo(() => {
    return pagination?.current ?? pageFromUrl ?? 1;
  }, [pagination, pageFromUrl]);

  const totalPages = useMemo(() => {
    if (pagination?.total_pages) return pagination.total_pages;
    if (pagination?.total && pagination?.per) {
      return Math.max(1, Math.ceil(pagination.total / pagination.per));
    }
    return 1;
  }, [pagination]);

  const tableHead = [
    { column: 'Name' },
    { column: 'Email' },
    { column: 'Mobile' },
    { column: 'Merchant Name' },
    { column: 'Merchant Domain' },
    { column: 'Status' },
    { column: 'Created At' },
    { column: 'Actions' },
  ];

  const tableData = useMemo<TableCellData[][]>(() => {
    return clients?.map((client: SallaClient) => {
      return [
        {
          value: client.name || '-',
          isLink: true,
          href: `/salla-clinets/${client.id}`,
        },
        { value: client.email || '-' },
        { value: client.mobile || '-' },
        {
          value: (
            <div className="flex items-center gap-2">
              <img
                src={client.merchant.avatar}
                alt={client.merchant.name}
                className="size-8 rounded-full"
              />
              <span>{client.merchant.name}</span>
            </div>
          ),
        },
        {
          value: (
            <a
              href={client.merchant.domain}
              target="_blank"
              rel="noopener noreferrer"
              className="text-primary hover:underline"
              onClick={(e) => e.stopPropagation()}
            >
              {client.merchant.domain}
            </a>
          ),
        },
        {
          value: client.status.charAt(0).toUpperCase() + client.status.slice(1),
          color:
            client.status === 'confirmed'
              ? ('success' as const)
              : client.status === 'rejected'
                ? ('destructive' as const)
                : ('warning' as const),
        },
        {
          value: new Date(client.created_at).toLocaleDateString('en-US', {
            year: 'numeric',
            month: 'short',
            day: 'numeric',
          }),
        },
        { value: client.id, isButton: true },
      ];
    }) ?? [];
  }, [clients]);

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

  const confirmMutation = useConfirmClient();
  const rejectMutation = useRejectClient();

 

  const handlePageChange = (page: number) => {
    const params = new URLSearchParams(searchParams?.toString());
    params.set('page', String(page));
    router.push(`?${params.toString()}`);
  };

  const handleConfirm = (clientId: string) => {
    confirmMutation.mutate(clientId, {
      onSuccess: () => {
        toast.custom(
          (t) => (
            <Alert variant="mono" icon="success" close={false} onClose={() => toast.dismiss(t)}>
              <AlertIcon>
                <RiCheckboxCircleFill />
              </AlertIcon>
              <AlertTitle>Client confirmed successfully</AlertTitle>
            </Alert>
          ),
          { position: 'top-center' }
        );
      },
      onError: () => {
        toast.error('Failed to confirm client');
      },
    });
  };

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

  const handleReject = () => {
    if (!rejectionReason.trim() || !rejectDialogState.clientId) {
      toast.error('Please provide a rejection reason');
      return;
    }

    rejectMutation.mutate(
      { id: rejectDialogState.clientId, body: { reason: rejectionReason } },
      {
        onSuccess: () => {
          setRejectDialogState({ open: false, clientId: null });
          setRejectionReason('');
          toast.custom(
            (t) => (
              <Alert variant="mono" icon="success" close={false} onClose={() => toast.dismiss(t)}>
                <AlertIcon>
                  <RiCheckboxCircleFill />
                </AlertIcon>
                <AlertTitle>Client rejected successfully</AlertTitle>
              </Alert>
            ),
            { position: 'top-center' }
          );
        },
        onError: () => {
          toast.error('Failed to reject client');
        },
      }
    );
  };

  const renderItem = (row: TableCellData[], index: number) => {
    const client = clients?.[index];
    return (
      <TableRow
        key={index}
        className="cursor-pointer"
        onClick={() => client && router.push(`/salla-clinets/${client.id}`)}
      >
        {row.map((ele, i) => {
          if (ele.isLink && ele.href) {
            return (
              <TableCell key={i} className="text-start whitespace-nowrap">
                <Link
                  href={ele.href}
                  className="text-sm font-medium text-mono hover:text-primary-active"
                  onClick={(e) => e.stopPropagation()}
                >
                  {ele.value as string}
                </Link>
              </TableCell>
            );
          }
          if (ele.isButton && client) {
            if (client.status !== 'pending') {
              return <TableCell key={i} className="text-start whitespace-nowrap" />;
            }
            return (
              <TableCell key={i} className="text-start whitespace-nowrap">
                <div className="flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
                  <Button
                    size="sm"
                    variant="outline"
                    className="text-green-600 hover:text-green-700 hover:bg-green-50"
                    onClick={() => handleConfirm(String(client.id))}
                  >
                    <CheckCircle2 className="size-4" />
                    Confirm
                  </Button>
                  <Button
                    size="sm"
                    variant="outline"
                    className="text-red-600 hover:text-red-700 hover:bg-red-50"
                    onClick={() => handleRejectClick(String(client.id))}
                  >
                    <XCircle className="size-4" />
                    Reject
                  </Button>
                </div>
              </TableCell>
            );
          }
          if (ele.color && ele.value) {
            return (
              <TableCell key={i} className="text-start whitespace-nowrap">
                <Badge variant={ele.color} appearance="outline">
                  {ele.value as string}
                </Badge>
              </TableCell>
            );
          }
          return (
            <TableCell key={i} className="text-sm text-foreground whitespace-nowrap">
              {ele.value ?? '-'}
            </TableCell>
          );
        })}
      </TableRow>
    );
  };

  return (
    <>
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between w-full">
            <CardTitle>Salla Clients</CardTitle>
            <div className="flex items-center gap-2">
              <SearchSallaClients />
            </div>
          </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((ele) => (
                    <TableHead key={ele.column} className="min-w-[120px] h-10 whitespace-nowrap">
                      {ele.column}
                    </TableHead>
                  ))}
                </TableRow>
              </TableHeader>
              <TableBody>
                {tableData.length > 0 ? (
                  tableData.map((row, idx) => renderItem(row, idx))
                ) : (
                  <TableRow>
                    <TableCell
                      colSpan={tableHead.length}
                      className="text-center py-8 text-muted-foreground"
                    >
                      No clients found
                    </TableCell>
                  </TableRow>
                )}
              </TableBody>
            </Table>
          )}
        </CardContent>

        <CardFooter className="justify-center">
          <PaginationComponent
            currentPage={currentPage}
            totalPages={totalPages}
            onPageChange={handlePageChange}
          />
        </CardFooter>
      </Card>

      <Dialog open={rejectDialogState.open} onOpenChange={(open) => setRejectDialogState({ open, clientId: null })}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Reject Client</DialogTitle>
            <DialogDescription>
              Please provide a reason for rejecting this client. 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, clientId: null })}>
              Cancel
            </Button>
            <Button variant="destructive" onClick={handleReject} disabled={rejectMutation.isPending}>
              Reject Client
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
};

export default SallaClients;