'use client';

import { useState } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { useQueryClient } from '@tanstack/react-query';
import { toast } from 'sonner';
import { SubscriptionResponse, Subscription } from '@/network/apis/dashboard/subscriptions/type';
import { updateSubscription } from '@/network/apis/dashboard/subscriptions/subscriptions.apis';
import dayjs from 'dayjs';
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,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from '@/components/ui/dialog';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Spinner } from '@/components/ui/spinners';
import PaginationComponent from '../paginationComponent/paginationComponent';

type TableCellData = {
  value: string | number | null;
  color?: 'warning' | 'success';
};

const SubscriptionsList = ({
  subscriptions,
}: {
  subscriptions: SubscriptionResponse | null;
}) => {
  const router = useRouter();
  const searchParams = useSearchParams();
  const queryClient = useQueryClient();
  const currentPage = Number(searchParams?.get('page')) || 1;

  const tableHead = [
    { column: 'Package Name' },
    { column: 'User Name' },
    { column: 'Status' },
    { column: 'Start Date' },
    { column: 'End Date' },
    { column: 'Package Price' },
    { column: 'Duration' },
    { column: 'Number of Requests' },
    { column: 'Created At' },
    { column: 'Actions' },
  ];

  const [selectedSubscription, setSelectedSubscription] = useState<Subscription | null>(null);
  const [formData, setFormData] = useState({ start_date: '', end_date: '' });
  const [isSubmitting, setIsSubmitting] = useState(false);

  const tableData: TableCellData[][] = (subscriptions?.items ?? []).map((ele) => [
    { value: ele.package_name },
    { value: ele.user?.name ?? null },
    {
      value: ele.is_active ? 'Active' : 'Inactive',
      color: ele.is_active ? ('success' as const) : ('warning' as const),
    },
    {
      value: ele.start_date ? dayjs(ele.start_date).format('DD/MM/YYYY') : null,
    },
    {
      value: ele.end_date ? dayjs(ele.end_date).format('DD/MM/YYYY') : null,
    },
    { value: ele.package_price + '$' },
    { value: ele.package_duration_in_days },
    { value: ele.package_number_of_requests },
    {
      value: ele.created_at ? dayjs(ele.created_at).format('DD/MM/YYYY') : null,
    },
  ]);

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

  const handleOpenEdit = (index: number) => {
    const sub = subscriptions?.items[index];
    if (!sub) return;
    setSelectedSubscription(sub);
    setFormData({
      start_date: sub.start_date ? dayjs(sub.start_date).format('YYYY-MM-DD') : '',
      end_date: sub.end_date ? dayjs(sub.end_date).format('YYYY-MM-DD') : '',
    });
  };

  const handleSubmit = async () => {
    if (!selectedSubscription) return;
    setIsSubmitting(true);
    try {
      await updateSubscription(selectedSubscription.id, formData);
      await queryClient.invalidateQueries({ queryKey: ['user_subscriptions'] });
      await queryClient.invalidateQueries({ queryKey: ['subscriptions'] });
      toast.success('Subscription updated');
      setSelectedSubscription(null);
      router.refresh();
    } catch (err: unknown) {
      const e = err as { response?: { data?: { message?: string } }; message?: string };
      toast.error(e?.response?.data?.message || e?.message || 'Failed to update subscription');
    } finally {
      setIsSubmitting(false);
    }
  };

  const renderItem = (row: TableCellData[], index: number) => (
    <TableRow key={index}>
      {row.map((ele, i) =>
        ele.color && ele.value ? (
          <TableCell key={i} className="text-start">
            <Badge variant={ele.color} appearance="outline">
              {ele.value}
            </Badge>
          </TableCell>
        ) : (
          <TableCell key={i} className="text-sm text-foreground">
            {ele.value || '-'}
          </TableCell>
        ),
      )}
      <TableCell>
        <Button variant="outline" size="sm" onClick={() => handleOpenEdit(index)}>
          Edit
        </Button>
      </TableCell>
    </TableRow>
  );

  const totalPages = subscriptions
    ? Math.ceil(subscriptions.pagination?.total / subscriptions.pagination?.per_page)
    : 1;

  return (
    <>
      <Card>
        <CardHeader>
          <CardTitle>Subscriptions</CardTitle>
        </CardHeader>
        <CardContent className="kt-scrollable-x-auto p-0">
          <Table>
            <TableHeader>
              <TableRow className="bg-accent/60">
                {tableHead.map((ele) => (
                  <TableHead key={ele.column} className="min-w-50 h-10">
                    {ele.column}
                  </TableHead>
                ))}
              </TableRow>
            </TableHeader>
            <TableBody>
              {tableData.length > 0 ? (
                tableData.map((table, index) => renderItem(table, index))
              ) : (
                <TableRow>
                  <TableCell
                    colSpan={tableHead.length}
                    className="text-center py-8 text-muted-foreground"
                  >
                    No subscriptions found
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
          </Table>
        </CardContent>
        <CardFooter className="justify-center">
          <PaginationComponent
            currentPage={currentPage}
            totalPages={totalPages}
            onPageChange={handlePageChange}
          />
        </CardFooter>
      </Card>

      <Dialog open={!!selectedSubscription} onOpenChange={(open) => !open && setSelectedSubscription(null)}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Edit Subscription</DialogTitle>
            <DialogDescription>
              Update the subscription start and end dates.
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label htmlFor="start_date">Start Date</Label>
              <Input
                id="start_date"
                type="date"
                value={formData.start_date}
                onChange={(e) => setFormData({ ...formData, start_date: e.target.value })}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="end_date">End Date</Label>
              <Input
                id="end_date"
                type="date"
                value={formData.end_date}
                onChange={(e) => setFormData({ ...formData, end_date: e.target.value })}
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setSelectedSubscription(null)} disabled={isSubmitting}>
              Cancel
            </Button>
            <Button
              onClick={handleSubmit}
              disabled={isSubmitting || !formData.start_date || !formData.end_date}
            >
              {isSubmitting && <Spinner className="size-4 animate-spin mr-2" />}
              Save
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
};

export { SubscriptionsList };