"use client";

import React, { useState, useEffect, useCallback } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/common/card";
import { Badge } from "@/components/common/badge";
import { Button } from "@/components/common/button";
import { Input } from "@/components/common/input";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/common/table";
import { Search, MoreHorizontal, UserCheck, UserX, Mail, Loader2, Store, Shield, ShieldAlert, Clock, Calendar, Pencil, Plus } from "lucide-react";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/common/dialog";
import { Label } from "@/components/common/label";
import { fetchClient } from "@/lib/api/api-client";
import { useToast } from "@/lib/hooks/use-toast";
import { motion, AnimatePresence } from "framer-motion";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/common/dropdown-menu";

interface Vendor {
  _id: string;
  username: string;
  storeId?: string;
  createdAt?: string;
  lastLogin?: string;
  isAdmin?: boolean;
  isActive: boolean;
}

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

export default function AdminVendorsPage() {
  const { toast } = useToast();
  const [loading, setLoading] = useState(true);
  const [vendors, setVendors] = useState<Vendor[]>([]);
  // State for browser detection
  const [isFirefox, setIsFirefox] = useState(false);

  useEffect(() => {
    const ua = navigator.userAgent.toLowerCase();
    setIsFirefox(ua.includes("firefox") && !ua.includes("chrome"));
  }, []);
  const [page, setPage] = useState(1);
  const [pagination, setPagination] = useState<PaginationResponse['pagination'] | null>(null);
  const [searchQuery, setSearchQuery] = useState("");
  const [isEditStoreOpen, setIsEditStoreOpen] = useState(false);
  const [editingVendor, setEditingVendor] = useState<Vendor | null>(null);
  const [newStoreId, setNewStoreId] = useState("");
  const [updating, setUpdating] = useState(false);

  const handleToggleStatus = async (vendor: Vendor) => {
    try {
      await fetchClient(`/admin/vendors/${vendor._id}/status`, {
        method: 'PATCH',
        body: { isActive: !vendor.isActive }
      });
      toast({
        title: "Success",
        description: `Vendor ${vendor.isActive ? 'suspended' : 'activated'} successfully`,
      });
      fetchVendors();
    } catch (error: any) {
      toast({
        title: "Error",
        description: error.message || "Failed to update vendor status",
        variant: "destructive",
      });
    }
  };

  const handleEditStore = (vendor: Vendor) => {
    setEditingVendor(vendor);
    setNewStoreId(vendor.storeId || "");
    setIsEditStoreOpen(true);
  };

  const saveStoreId = async () => {
    if (!editingVendor) return;

    try {
      setUpdating(true);
      await fetchClient(`/admin/vendors/${editingVendor._id}/store-id`, {
        method: 'PUT',
        body: { storeId: newStoreId }
      });

      toast({
        title: "Success",
        description: "Store ID updated successfully",
      });
      setIsEditStoreOpen(false);
      fetchVendors(); // Refresh list
    } catch (error: any) {
      toast({
        title: "Error",
        description: error.message || "Failed to update store ID",
        variant: "destructive",
      });
    } finally {
      setUpdating(false);
    }
  };

  const fetchVendors = useCallback(async () => {
    try {
      setLoading(true);
      const params = new URLSearchParams({
        page: page.toString(),
        limit: '25'
      });
      const data = await fetchClient<PaginationResponse>(`/admin/vendors?${params.toString()}`);
      setVendors(data.vendors);
      setPagination(data.pagination);
    } catch (error: any) {
      console.error("Failed to fetch vendors:", error);
      toast({
        title: "Error",
        description: error.message || "Failed to load vendors",
        variant: "destructive",
      });
    } finally {
      setLoading(false);
    }
  }, [page, toast]);

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

  const filteredVendors = searchQuery.trim()
    ? vendors.filter(v =>
      v.username.toLowerCase().includes(searchQuery.toLowerCase()) ||
      (v.storeId && v.storeId.toString().toLowerCase().includes(searchQuery.toLowerCase()))
    )
    : vendors;

  const activeVendors = vendors.filter(v => v.isActive);
  const suspendedVendors = vendors.filter(v => !v.isActive);
  const adminVendors = vendors.filter(v => v.isAdmin);
  const totalVendors = pagination?.total || vendors.length;

  const stats = [
    {
      title: "Total Vendors",
      value: totalVendors,
      description: "Registered vendors",
      icon: Store,
    },
    {
      title: "Active Vendors",
      value: activeVendors.length,
      description: `${vendors.length > 0 ? Math.round((activeVendors.length / vendors.length) * 100) : 0}% active rate`,
      icon: UserCheck,
    },
    {
      title: "Suspended",
      value: suspendedVendors.length,
      description: `${vendors.length > 0 ? Math.round((suspendedVendors.length / vendors.length) * 100) : 0}% suspension rate`,
      icon: UserX,
    },
    {
      title: "Admin Users",
      value: adminVendors.length,
      description: "Administrative access",
      icon: ShieldAlert,
    },
  ];

  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">All Vendors</h1>
          <p className="text-sm text-muted-foreground mt-1">Manage vendor accounts and permissions</p>
        </div>
      </div>

      {/* Stats Cards */}
      <div className="grid gap-4 md:grid-cols-4">
        {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>
              <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">Vendor Management</CardTitle>
              <CardDescription>View and manage all vendor 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 vendors..."
                  className="pl-9 w-64 bg-background/50 border-border/50 focus:bg-background transition-colors"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
              </div>
              <Button variant="outline" size="sm" className="bg-background/50 border-border/50 hover:bg-background transition-colors">
                <Mail className="h-4 w-4 mr-2" />
                Message
              </Button>
            </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>Vendor</TableHead>
                  <TableHead>Store</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead>Join Date</TableHead>
                  <TableHead>Last Login</TableHead>
                  <TableHead className="text-right">Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {isFirefox ? (
                  loading ? (
                    <TableRow>
                      <TableCell colSpan={6} 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 vendors...</p>
                        </div>
                      </TableCell>
                    </TableRow>
                  ) : filteredVendors.length === 0 ? (
                    <TableRow>
                      <TableCell colSpan={6} className="h-32 text-center text-muted-foreground">
                        {searchQuery.trim() ? "No vendors found matching your search" : "No vendors found"}
                      </TableCell>
                    </TableRow>
                  ) : (
                    filteredVendors.map((vendor, index) => (
                      <motion.tr
                        key={vendor._id}
                        initial={{ opacity: 0, y: 10 }}
                        animate={{ opacity: 1, y: 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-medium flex items-center gap-2">
                            <div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold text-xs">
                              {vendor.username.substring(0, 2).toUpperCase()}
                            </div>
                            {vendor.username}
                          </div>
                        </TableCell>
                        <TableCell>
                          {vendor.storeId ? (
                            <div className="flex items-center gap-2 group/store">
                              <span className="font-mono text-xs">{vendor.storeId}</span>
                              <Button
                                variant="ghost"
                                size="icon"
                                className="h-6 w-6 opacity-0 group-hover/store:opacity-100 transition-opacity"
                                onClick={() => handleEditStore(vendor)}
                              >
                                <Pencil className="h-3 w-3" />
                              </Button>
                            </div>
                          ) : (
                            <div className="flex items-center gap-2">
                              <span className="text-muted-foreground italic text-xs">No store</span>
                              <Button
                                variant="ghost"
                                size="icon"
                                className="h-6 w-6 text-muted-foreground hover:text-primary"
                                onClick={() => handleEditStore(vendor)}
                              >
                                <Plus className="h-3 w-3" />
                              </Button>
                            </div>
                          )}
                        </TableCell>
                        <TableCell>
                          <div className="flex items-center gap-2">
                            <Badge
                              variant={vendor.isActive ? "default" : "destructive"}
                              className={vendor.isActive ? "bg-green-600 hover:bg-green-700" : ""}
                            >
                              {vendor.isActive ? "Active" : "Suspended"}
                            </Badge>
                            {vendor.isAdmin && (
                              <Badge variant="outline" className="border-blue-200 text-blue-700 bg-blue-50 dark:bg-blue-900/20 dark:text-blue-400 dark:border-blue-900">
                                <Shield className="h-3 w-3 mr-1" />
                                Admin
                              </Badge>
                            )}
                          </div>
                        </TableCell>
                        <TableCell className="text-sm text-muted-foreground">
                          <div className="flex items-center gap-1.5">
                            <Calendar className="h-3.5 w-3.5 opacity-70" />
                            {vendor.createdAt ? new Date(vendor.createdAt).toLocaleDateString() : 'N/A'}
                          </div>
                        </TableCell>
                        <TableCell className="text-sm text-muted-foreground">
                          <div className="flex items-center gap-1.5">
                            <Clock className="h-3.5 w-3.5 opacity-70" />
                            {vendor.lastLogin ? new Date(vendor.lastLogin).toLocaleDateString() : 'Never'}
                          </div>
                        </TableCell>
                        <TableCell className="text-right">
                          <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                              <Button variant="ghost" className="h-8 w-8 p-0">
                                <span className="sr-only">Open menu</span>
                                <MoreHorizontal className="h-4 w-4" />
                              </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="end">
                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
                              <DropdownMenuItem
                                onClick={() => navigator.clipboard.writeText(vendor._id)}
                              >
                                Copy Vendor ID
                              </DropdownMenuItem>
                              <DropdownMenuSeparator />
                              <DropdownMenuItem
                                className={vendor.isActive ? "text-red-600" : "text-green-600"}
                                onClick={() => handleToggleStatus(vendor)}
                              >
                                {vendor.isActive ? (
                                  <>
                                    <UserX className="mr-2 h-4 w-4" />
                                    Suspend Vendor
                                  </>
                                ) : (
                                  <>
                                    <UserCheck className="mr-2 h-4 w-4" />
                                    Activate Vendor
                                  </>
                                )}
                              </DropdownMenuItem>
                            </DropdownMenuContent>
                          </DropdownMenu>
                        </TableCell>
                      </motion.tr>
                    ))
                  )
                ) : (
                  <AnimatePresence mode="popLayout">
                    {loading ? (
                      <TableRow>
                        <TableCell colSpan={6} 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 vendors...</p>
                          </div>
                        </TableCell>
                      </TableRow>
                    ) : filteredVendors.length === 0 ? (
                      <TableRow>
                        <TableCell colSpan={6} className="h-32 text-center text-muted-foreground">
                          {searchQuery.trim() ? "No vendors found matching your search" : "No vendors found"}
                        </TableCell>
                      </TableRow>
                    ) : (
                      filteredVendors.map((vendor, index) => (
                        <motion.tr
                          key={vendor._id}
                          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-medium flex items-center gap-2">
                              <div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold text-xs">
                                {vendor.username.substring(0, 2).toUpperCase()}
                              </div>
                              {vendor.username}
                            </div>
                          </TableCell>
                          <TableCell>
                            {vendor.storeId ? (
                              <div className="flex items-center gap-2 group/store">
                                <span className="font-mono text-xs">{vendor.storeId}</span>
                                <Button
                                  variant="ghost"
                                  size="icon"
                                  className="h-6 w-6 opacity-0 group-hover/store:opacity-100 transition-opacity"
                                  onClick={() => handleEditStore(vendor)}
                                >
                                  <Pencil className="h-3 w-3" />
                                </Button>
                              </div>
                            ) : (
                              <div className="flex items-center gap-2">
                                <span className="text-muted-foreground italic text-xs">No store</span>
                                <Button
                                  variant="ghost"
                                  size="icon"
                                  className="h-6 w-6 text-muted-foreground hover:text-primary"
                                  onClick={() => handleEditStore(vendor)}
                                >
                                  <Plus className="h-3 w-3" />
                                </Button>
                              </div>
                            )}
                          </TableCell>
                          <TableCell>
                            <div className="flex items-center gap-2">
                              <Badge
                                variant={vendor.isActive ? "default" : "destructive"}
                                className={vendor.isActive ? "bg-green-600 hover:bg-green-700" : ""}
                              >
                                {vendor.isActive ? "Active" : "Suspended"}
                              </Badge>
                              {vendor.isAdmin && (
                                <Badge variant="outline" className="border-blue-200 text-blue-700 bg-blue-50 dark:bg-blue-900/20 dark:text-blue-400 dark:border-blue-900">
                                  <Shield className="h-3 w-3 mr-1" />
                                  Admin
                                </Badge>
                              )}
                            </div>
                          </TableCell>
                          <TableCell className="text-sm text-muted-foreground">
                            <div className="flex items-center gap-1.5">
                              <Calendar className="h-3.5 w-3.5 opacity-70" />
                              {vendor.createdAt ? new Date(vendor.createdAt).toLocaleDateString() : 'N/A'}
                            </div>
                          </TableCell>
                          <TableCell className="text-sm text-muted-foreground">
                            <div className="flex items-center gap-1.5">
                              <Clock className="h-3.5 w-3.5 opacity-70" />
                              {vendor.lastLogin ? new Date(vendor.lastLogin).toLocaleDateString() : 'Never'}
                            </div>
                          </TableCell>
                          <TableCell className="text-right">
                            <DropdownMenu>
                              <DropdownMenuTrigger asChild>
                                <Button variant="ghost" className="h-8 w-8 p-0">
                                  <span className="sr-only">Open menu</span>
                                  <MoreHorizontal className="h-4 w-4" />
                                </Button>
                              </DropdownMenuTrigger>
                              <DropdownMenuContent align="end">
                                <DropdownMenuLabel>Actions</DropdownMenuLabel>
                                <DropdownMenuItem
                                  onClick={() => navigator.clipboard.writeText(vendor._id)}
                                >
                                  Copy Vendor ID
                                </DropdownMenuItem>
                                <DropdownMenuSeparator />
                                <DropdownMenuItem
                                  className={vendor.isActive ? "text-red-600" : "text-green-600"}
                                  onClick={() => handleToggleStatus(vendor)}
                                >
                                  {vendor.isActive ? (
                                    <>
                                      <UserX className="mr-2 h-4 w-4" />
                                      Suspend Vendor
                                    </>
                                  ) : (
                                    <>
                                      <UserCheck className="mr-2 h-4 w-4" />
                                      Activate Vendor
                                    </>
                                  )}
                                </DropdownMenuItem>
                              </DropdownMenuContent>
                            </DropdownMenu>
                          </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 text-sm text-muted-foreground">
              <span>
                Page <span className="font-medium text-foreground">{pagination.page}</span> of {pagination.totalPages}
              </span>
              <div className="flex gap-2">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => setPage(p => Math.max(1, p - 1))}
                  disabled={!pagination.hasPrevPage || loading}
                  className="h-8"
                >
                  Previous
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => setPage(p => p + 1)}
                  disabled={!pagination.hasNextPage || loading}
                  className="h-8"
                >
                  Next
                </Button>
              </div>
            </div>
          )}
        </CardContent>
      </Card>

      <Dialog open={isEditStoreOpen} onOpenChange={setIsEditStoreOpen}>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>Update Vendor Store</DialogTitle>
            <DialogDescription>
              Enter the Store ID to assign to vendor <span className="font-semibold text-foreground">{editingVendor?.username}</span>.
            </DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="grid gap-2">
              <Label htmlFor="storeId">Store ID</Label>
              <Input
                id="storeId"
                value={newStoreId}
                onChange={(e) => setNewStoreId(e.target.value)}
                placeholder="Enter 24-character Store ID"
                className="col-span-3 font-mono"
              />
              <p className="text-xs text-muted-foreground">
                Ensure the Store ID corresponds to an existing store in the system.
              </p>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsEditStoreOpen(false)} disabled={updating}>Cancel</Button>
            <Button onClick={saveStoreId} disabled={updating || !newStoreId || newStoreId.length < 24}>
              {updating && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
              Save Changes
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div >
  );
}