"use client";

import React, { useEffect, useState, useCallback } from "react";
import { getCustomers, CustomerStats } from "@/services/customerService";
import { formatCurrency } from "@/utils/format";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import Layout from "@/components/layout/layout";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { 
  ChevronLeft, 
  ChevronRight, 
  Loader2, 
  Users, 
  ArrowUpDown,
  MessageCircle
} from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export default function CustomerManagementPage() {
  const router = useRouter();
  const [customers, setCustomers] = useState<CustomerStats[]>([]);
  const [loading, setLoading] = useState(true);
  const [page, setPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [itemsPerPage, setItemsPerPage] = useState(25);
  const [selectedCustomer, setSelectedCustomer] = useState<CustomerStats | null>(null);
  const [sortConfig, setSortConfig] = useState<{
    column: "totalOrders" | "totalSpent" | "lastOrderDate";
    direction: "asc" | "desc";
  }>({ column: "totalSpent", direction: "desc" });

  const fetchCustomers = useCallback(async () => {
    try {
      setLoading(true);
      const response = await getCustomers(page, itemsPerPage);
      
      // Sort customers based on current sort config
      let sortedCustomers = [...response.customers];
      sortedCustomers.sort((a, b) => {
        if (sortConfig.column === "totalOrders") {
          return sortConfig.direction === "asc" 
            ? a.totalOrders - b.totalOrders 
            : b.totalOrders - a.totalOrders;
        } else if (sortConfig.column === "totalSpent") {
          return sortConfig.direction === "asc" 
            ? a.totalSpent - b.totalSpent 
            : b.totalSpent - a.totalSpent;
        } else if (sortConfig.column === "lastOrderDate") {
          return sortConfig.direction === "asc" 
            ? new Date(a.lastOrderDate).getTime() - new Date(b.lastOrderDate).getTime() 
            : new Date(b.lastOrderDate).getTime() - new Date(a.lastOrderDate).getTime();
        }
        return 0;
      });
      
      setCustomers(sortedCustomers);
      setTotalPages(Math.ceil(response.total / itemsPerPage));
    } catch (err) {
      toast.error("Failed to fetch customers");
      console.error(err);
    } finally {
      setLoading(false);
    }
  }, [page, itemsPerPage, sortConfig]);

  useEffect(() => {
    fetchCustomers();
  }, [fetchCustomers]);

  useEffect(() => {
    const authToken = document.cookie
      .split("; ")
      .find((row) => row.startsWith("Authorization="))
      ?.split("=")[1];

    if (!authToken) {
      router.push("/login");
    }
  }, [router]);

  const handlePageChange = (newPage: number) => {
    setPage(newPage);
  };

  const handleItemsPerPageChange = (value: string) => {
    setItemsPerPage(parseInt(value, 10));
    setPage(1); // Reset to first page when changing items per page
  };

  const handleSort = (column: "totalOrders" | "totalSpent" | "lastOrderDate") => {
    setSortConfig(prev => ({
      column,
      direction: prev.column === column && prev.direction === "asc" ? "desc" : "asc"
    }));
  };

  // Format date without time
  const formatDate = (dateString: string) => {
    const date = new Date(dateString);
    return new Intl.DateTimeFormat('en-GB', {
      day: '2-digit',
      month: 'short',
      year: 'numeric'
    }).format(date);
  };

  return (
    <Layout>
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white flex items-center">
            <Users className="mr-2 h-6 w-6" />
            Customer Management
          </h1>
        </div>

        <div className="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
          <div className="p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
            <div className="flex items-center gap-4">
              <div className="flex items-center gap-2">
                <div className="text-sm font-medium text-gray-500 dark:text-gray-400">Show:</div>
                <Select value={itemsPerPage.toString()} onValueChange={handleItemsPerPageChange}>
                  <SelectTrigger className="w-[70px]">
                    <SelectValue placeholder="25" />
                  </SelectTrigger>
                  <SelectContent>
                    {[5, 10, 25, 50, 100].map(size => (
                      <SelectItem key={size} value={size.toString()}>{size}</SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>

            <div className="text-sm text-gray-500 dark:text-gray-400">
              {loading 
                ? "Loading..." 
                : `Showing ${customers.length} of ${totalPages * itemsPerPage} customers`}
            </div>
          </div>

          {loading ? (
            <div className="p-8 flex justify-center">
              <Loader2 className="h-8 w-8 animate-spin text-primary" />
            </div>
          ) : customers.length === 0 ? (
            <div className="p-8 text-center">
              <Users className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
              <h3 className="text-lg font-medium mb-2">No customers found</h3>
              <p className="text-muted-foreground">
                Once you have customers placing orders, they will appear here.
              </p>
            </div>
          ) : (
            <div className="overflow-x-auto">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="w-[250px]">Customer</TableHead>
                    <TableHead 
                      className="cursor-pointer w-[100px]"
                      onClick={() => handleSort("totalOrders")}
                    >
                      <div className="flex items-center">
                        Orders
                        <ArrowUpDown className="ml-2 h-4 w-4" />
                      </div>
                    </TableHead>
                    <TableHead 
                      className="cursor-pointer w-[150px]"
                      onClick={() => handleSort("totalSpent")}
                    >
                      <div className="flex items-center">
                        Total Spent
                        <ArrowUpDown className="ml-2 h-4 w-4" />
                      </div>
                    </TableHead>
                    <TableHead className="w-[250px]">Status</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {customers.map((customer) => (
                    <TableRow 
                      key={customer.userId}
                      className="cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700"
                      onClick={() => setSelectedCustomer(customer)}
                    >
                      <TableCell>
                        <div className="font-medium">@{customer.telegramUsername || "Unknown"}</div>
                        <div className="text-sm text-gray-500">ID: {customer.telegramUserId}</div>
                      </TableCell>
                      <TableCell>
                        <Badge className="font-medium">{customer.totalOrders}</Badge>
                      </TableCell>
                      <TableCell className="font-medium">
                        {formatCurrency(customer.totalSpent)}
                      </TableCell>
                      <TableCell>
                        <div className="flex space-x-1">
                          <Badge className="bg-blue-100 text-blue-800 hover:bg-blue-200 dark:bg-blue-900/30 dark:text-blue-300">
                            {customer.ordersByStatus.paid} Paid
                          </Badge>
                          <Badge className="bg-green-100 text-green-800 hover:bg-green-200 dark:bg-green-900/30 dark:text-green-300">
                            {customer.ordersByStatus.completed} Completed
                          </Badge>
                          <Badge className="bg-amber-100 text-amber-800 hover:bg-amber-200 dark:bg-amber-900/30 dark:text-amber-300">
                            {customer.ordersByStatus.shipped} Shipped
                          </Badge>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          )}

          <div className="p-4 border-t border-gray-200 dark:border-gray-700 flex justify-between items-center">
            <div className="text-sm text-gray-500 dark:text-gray-400">
              Page {page} of {totalPages}
            </div>
            <div className="flex gap-2">
              <Button
                variant="outline"
                size="sm"
                onClick={() => handlePageChange(Math.max(1, page - 1))}
                disabled={page === 1 || loading}
              >
                <ChevronLeft className="h-4 w-4 mr-1" />
                Previous
              </Button>
              <Button
                variant="outline"
                size="sm"
                onClick={() => handlePageChange(Math.min(totalPages, page + 1))}
                disabled={page === totalPages || loading}
              >
                Next
                <ChevronRight className="h-4 w-4 ml-1" />
              </Button>
            </div>
          </div>
        </div>

        {/* Customer Details Dialog */}
        <Dialog open={!!selectedCustomer} onOpenChange={(open) => !open && setSelectedCustomer(null)}>
          <DialogContent className="max-w-2xl">
            <DialogHeader>
              <DialogTitle className="text-xl font-semibold flex items-center">
                <Users className="h-5 w-5 mr-2" />
                Customer Details
              </DialogTitle>
              <DialogDescription>
                Details and order statistics for this customer
              </DialogDescription>
            </DialogHeader>

            {selectedCustomer && (
              <div className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <Card>
                    <CardHeader className="pb-2">
                      <CardTitle className="text-md font-medium">Customer Information</CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-2">
                      <div className="flex justify-between text-sm">
                        <div className="text-gray-500 dark:text-gray-400">Username:</div>
                        <div className="font-medium">@{selectedCustomer.telegramUsername || "Unknown"}</div>
                      </div>
                      <div className="flex justify-between text-sm">
                        <div className="text-gray-500 dark:text-gray-400">Telegram ID:</div>
                        <div className="font-medium">{selectedCustomer.telegramUserId}</div>
                      </div>
                      <div className="flex justify-between text-sm">
                        <div className="text-gray-500 dark:text-gray-400">Chat ID:</div>
                        <div className="font-medium">{selectedCustomer.chatId}</div>
                      </div>
                      <div className="flex justify-end pt-2">
                        <Button 
                          variant="outline" 
                          size="sm" 
                          className="text-xs"
                          onClick={() => {
                            window.open(`https://t.me/${selectedCustomer.telegramUsername || selectedCustomer.telegramUserId}`, '_blank');
                          }}
                        >
                          <MessageCircle className="h-3.5 w-3.5 mr-1" />
                          Open Chat
                        </Button>
                      </div>
                    </CardContent>
                  </Card>

                  <Card>
                    <CardHeader className="pb-2">
                      <CardTitle className="text-md font-medium">Order Statistics</CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-2">
                      <div className="flex justify-between text-sm">
                        <div className="text-gray-500 dark:text-gray-400">Total Orders:</div>
                        <div className="font-medium">{selectedCustomer.totalOrders}</div>
                      </div>
                      <div className="flex justify-between text-sm">
                        <div className="text-gray-500 dark:text-gray-400">Total Spent:</div>
                        <div className="font-medium">{formatCurrency(selectedCustomer.totalSpent)}</div>
                      </div>
                      <div className="flex justify-between text-sm">
                        <div className="text-gray-500 dark:text-gray-400">First Order:</div>
                        <div className="font-medium">{formatDate(selectedCustomer.firstOrderDate)}</div>
                      </div>
                      <div className="flex justify-between text-sm">
                        <div className="text-gray-500 dark:text-gray-400">Last Order:</div>
                        <div className="font-medium">{formatDate(selectedCustomer.lastOrderDate)}</div>
                      </div>
                    </CardContent>
                  </Card>
                </div>

                <Card>
                  <CardHeader className="pb-2">
                    <CardTitle className="text-md font-medium">Order Status Breakdown</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
                      <div className="bg-blue-100 dark:bg-blue-900/30 p-3 rounded-md">
                        <p className="text-sm text-blue-800 dark:text-blue-300">Paid</p>
                        <p className="text-xl font-semibold">{selectedCustomer.ordersByStatus.paid}</p>
                      </div>
                      <div className="bg-purple-100 dark:bg-purple-900/30 p-3 rounded-md">
                        <p className="text-sm text-purple-800 dark:text-purple-300">Acknowledged</p>
                        <p className="text-xl font-semibold">{selectedCustomer.ordersByStatus.acknowledged}</p>
                      </div>
                      <div className="bg-amber-100 dark:bg-amber-900/30 p-3 rounded-md">
                        <p className="text-sm text-amber-800 dark:text-amber-300">Shipped</p>
                        <p className="text-xl font-semibold">{selectedCustomer.ordersByStatus.shipped}</p>
                      </div>
                      <div className="bg-green-100 dark:bg-green-900/30 p-3 rounded-md">
                        <p className="text-sm text-green-800 dark:text-green-300">Completed</p>
                        <p className="text-xl font-semibold">{selectedCustomer.ordersByStatus.completed}</p>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>
            )}
          </DialogContent>
        </Dialog>
      </div>
    </Layout>
  );
}