"use client";

import React, { useState, useEffect } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { Search, Ban, UserCheck, Package, DollarSign, Loader2, Repeat, Users, ShoppingBag, CreditCard, UserX } from "lucide-react";
import { fetchClient } from "@/lib/api-client";
import { useToast } from "@/hooks/use-toast";
import { motion, AnimatePresence } from "framer-motion";

interface TelegramUser {
  telegramUserId: string;
  telegramUsername: string;
  totalOrders: number;
  totalSpent: number;
  paidOrders: number;
  completedOrders: number;
  firstOrderDate: string | null;
  lastOrderDate: string | null;
  isBlocked: boolean;
  blockedReason: string | null;
  createdAt?: string;
}

interface PaginationResponse {
  success: boolean;
  users: TelegramUser[];
  pagination: {
    page: number;
    limit: number;
    total: number;
    totalPages: number;
    hasNextPage: boolean;
    hasPrevPage: boolean;
  };
}

function formatCurrency(amount: number): string {
  return new Intl.NumberFormat('en-GB', {
    style: 'currency',
    currency: 'GBP',
  }).format(amount);
}

export default function AdminUsersPage() {
  const { toast } = useToast();
  const [loading, setLoading] = useState(true);
  const [users, setUsers] = useState<TelegramUser[]>([]);
  const [searchQuery, setSearchQuery] = useState("");
  const [page, setPage] = useState(1);
  const [pagination, setPagination] = useState<PaginationResponse['pagination'] | null>(null);

  useEffect(() => {
    fetchUsers();
  }, [page, searchQuery]);

  const fetchUsers = async () => {
    try {
      setLoading(true);
      const params = new URLSearchParams({
        page: page.toString(),
        limit: '25'
      });
      if (searchQuery.trim()) {
        params.append('search', searchQuery.trim());
      }
      const data = await fetchClient<PaginationResponse>(`/admin/users?${params.toString()}`);
      setUsers(data.users);
      setPagination(data.pagination);
    } catch (error: any) {
      console.error("Failed to fetch users:", error);
      toast({
        title: "Error",
        description: error.message || "Failed to load users",
        variant: "destructive",
      });
    } finally {
      setLoading(false);
    }
  };

  const usersWithOrders = users.filter(u => u.totalOrders > 0);
  const returningCustomers = users.filter(u => u.totalOrders > 1);
  const blockedUsers = users.filter(u => u.isBlocked);
  const totalSpent = users.reduce((sum, u) => sum + u.totalSpent, 0);
  const totalOrders = users.reduce((sum, u) => sum + u.totalOrders, 0);

  const stats = [
    {
      title: "Total Users",
      value: users.length,
      description: "Registered users",
      icon: Users,
    },
    {
      title: "Users with Orders",
      value: usersWithOrders.length,
      description: `${users.length > 0 ? Math.round((usersWithOrders.length / users.length) * 100) : 0}% conversion rate`,
      icon: ShoppingBag,
    },
    {
      title: "Total Revenue",
      value: formatCurrency(totalSpent),
      description: `${totalOrders} total orders`,
      icon: DollarSign,
    },
    {
      title: "Returning",
      value: returningCustomers.length,
      description: `${usersWithOrders.length > 0 ? Math.round((returningCustomers.length / usersWithOrders.length) * 100) : 0}% of customers`,
      icon: Repeat,
    },
    {
      title: "Blocked",
      value: blockedUsers.length,
      description: `${users.length > 0 ? Math.round((blockedUsers.length / users.length) * 100) : 0}% blocked rate`,
      icon: UserX,
    },
  ];

  return (
    <div className="space-y-6 animate-in fade-in duration-500">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-semibold tracking-tight text-foreground">Telegram Users</h1>
          <p className="text-sm text-muted-foreground mt-1">Manage Telegram user accounts and view statistics</p>
        </div>
      </div>

      {/* Stats Cards */}
      <div className="grid gap-4 md:grid-cols-5">
        {stats.map((stat, i) => (
          <Card key={i} className="border-border/40 bg-background/50 backdrop-blur-sm shadow-sm overflow-hidden">
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">{stat.title}</CardTitle>
              <stat.icon className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              {loading ? (
                <div className="h-12 flex items-center">
                  <Loader2 className="h-4 w-4 animate-spin text-muted-foreground/50" />
                </div>
              ) : (
                <div className="animate-in fade-in slide-in-from-bottom-2 duration-500" style={{ animationDelay: `${i * 100}ms` }}>
                  <div className="text-2xl font-bold">{stat.value}</div>
                  <p className="text-xs text-muted-foreground">{stat.description}</p>
                </div>
              )}
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Search and Filters */}
      <Card className="border-border/40 bg-background/50 backdrop-blur-sm shadow-sm">
        <CardHeader className="pb-4">
          <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div>
              <CardTitle className="text-lg font-medium">User Management</CardTitle>
              <CardDescription>View and manage all Telegram user accounts</CardDescription>
            </div>
            <div className="flex items-center space-x-2">
              <div className="relative">
                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                <Input
                  placeholder="Search users..."
                  className="pl-9 w-64 bg-background/50 border-border/50 focus:bg-background transition-colors"
                  value={searchQuery}
                  onChange={(e) => {
                    setSearchQuery(e.target.value);
                    setPage(1);
                  }}
                />
              </div>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <div className="rounded-md border border-border/50 overflow-hidden">
            <Table>
              <TableHeader className="bg-muted/30">
                <TableRow className="border-border/50 hover:bg-transparent">
                  <TableHead className="w-[100px]">User ID</TableHead>
                  <TableHead>Username</TableHead>
                  <TableHead>Orders</TableHead>
                  <TableHead>Total Spent</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead>First Order</TableHead>
                  <TableHead>Last Order</TableHead>
                  <TableHead className="text-right">Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                <AnimatePresence mode="popLayout">
                  {loading ? (
                    <TableRow>
                      <TableCell colSpan={8} className="h-32 text-center">
                        <div className="flex flex-col items-center justify-center gap-2 text-muted-foreground">
                          <Loader2 className="h-8 w-8 animate-spin opacity-25" />
                          <p>Loading users...</p>
                        </div>
                      </TableCell>
                    </TableRow>
                  ) : users.length === 0 ? (
                    <TableRow>
                      <TableCell colSpan={8} className="h-32 text-center text-muted-foreground">
                        {searchQuery ? "No users found matching your search" : "No users found"}
                      </TableCell>
                    </TableRow>
                  ) : (
                    users.map((user, index) => (
                      <motion.tr
                        key={user.telegramUserId}
                        initial={{ opacity: 0, y: 10 }}
                        animate={{ opacity: 1, y: 0 }}
                        exit={{ opacity: 0 }}
                        transition={{ duration: 0.2, delay: index * 0.03 }}
                        className="group hover:bg-muted/40 border-b border-border/50 transition-colors"
                      >
                        <TableCell>
                          <div className="font-mono text-xs text-muted-foreground/80">{user.telegramUserId}</div>
                        </TableCell>
                        <TableCell>
                          <div className="font-medium flex items-center gap-2">
                            {user.telegramUsername !== "Unknown" ? (
                              <>
                                <span className="text-blue-500/80">@</span>
                                {user.telegramUsername}
                              </>
                            ) : (
                              <span className="text-muted-foreground italic">Unknown</span>
                            )}
                          </div>
                        </TableCell>
                        <TableCell>
                          <div className="flex items-center gap-2">
                            <span className="font-medium">{user.totalOrders}</span>
                            {user.completedOrders > 0 && (
                              <Badge variant="outline" className="text-[10px] h-5 px-1.5 bg-green-500/10 text-green-600 border-green-200 dark:border-green-900">
                                {user.completedOrders} done
                              </Badge>
                            )}
                          </div>
                        </TableCell>
                        <TableCell>
                          <span className="font-medium tabular-nums">{formatCurrency(user.totalSpent)}</span>
                        </TableCell>
                        <TableCell>
                          {user.isBlocked ? (
                            <TooltipProvider>
                              <Tooltip>
                                <TooltipTrigger asChild>
                                  <Badge variant="destructive" className="items-center gap-1">
                                    <Ban className="h-3 w-3" />
                                    Blocked
                                  </Badge>
                                </TooltipTrigger>
                                {user.blockedReason && (
                                  <TooltipContent>
                                    <p className="max-w-xs">{user.blockedReason}</p>
                                  </TooltipContent>
                                )}
                              </Tooltip>
                            </TooltipProvider>
                          ) : user.totalOrders > 0 ? (
                            <Badge variant="default" className="bg-green-600 hover:bg-green-700">Active</Badge>
                          ) : (
                            <Badge variant="secondary">No Orders</Badge>
                          )}
                        </TableCell>
                        <TableCell className="text-sm text-muted-foreground">
                          {user.firstOrderDate
                            ? new Date(user.firstOrderDate).toLocaleDateString()
                            : '-'}
                        </TableCell>
                        <TableCell className="text-sm text-muted-foreground">
                          {user.lastOrderDate
                            ? new Date(user.lastOrderDate).toLocaleDateString()
                            : '-'}
                        </TableCell>
                        <TableCell className="text-right">
                          <div className="flex items-center justify-end gap-1">
                            {!user.isBlocked ? (
                              <Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10">
                                <Ban className="h-4 w-4" />
                              </Button>
                            ) : (
                              <Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-green-600 hover:bg-green-500/10">
                                <UserCheck className="h-4 w-4" />
                              </Button>
                            )}
                          </div>
                        </TableCell>
                      </motion.tr>
                    ))
                  )}
                </AnimatePresence>
              </TableBody>
            </Table>
          </div>

          {pagination && pagination.totalPages > 1 && (
            <div className="mt-4 flex items-center justify-between border-t border-border/50 pt-4">
              <div className="text-sm text-muted-foreground">
                Showing page <span className="font-medium text-foreground">{pagination.page}</span> of {pagination.totalPages}
              </div>
              <div className="flex gap-2">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => setPage(p => Math.max(1, p - 1))}
                  disabled={!pagination.hasPrevPage}
                  className="h-8"
                >
                  Previous
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => setPage(p => p + 1)}
                  disabled={!pagination.hasNextPage}
                  className="h-8"
                >
                  Next
                </Button>
              </div>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
}