import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import axios from "axios";
import {
  LayoutDashboard,
  Package,
  Wrench,
  ShoppingCart,
  Users,
  BarChart3,
  Settings,
  AlertTriangle,
  TrendingUp,
  DollarSign,
  Calendar,
  Download,
  Plus,
  Edit,
  Trash2,
  Eye,
  ChevronRight,
  ChevronLeft,
  Search,
  Filter,
  RefreshCw,
  FileText,
  FileSpreadsheet,
  Info,
} from "lucide-react";
import { Button } from "../components/ui/button";
import { Input } from "../components/ui/input";
import { Badge } from "../components/ui/badge";
import { Separator } from "../components/ui/separator";
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "../components/ui/tabs";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "../components/ui/select";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  DialogFooter,
} from "../components/ui/dialog";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "../components/ui/alert-dialog";
import { Label } from "../components/ui/label";
import { Textarea } from "../components/ui/textarea";
import { useAuth } from "../context/AuthContext";
import { toast } from "sonner";
import RichTextEditor from "../components/RichTextEditor";
import ImageUploadManager from "../components/ImageUploadManager";
import { clearCache } from "../utils/apiCache";

const API = `${process.env.REACT_APP_BACKEND_URL}/api`;

const statusColors = {
  pending: "bg-yellow-500",
  processing: "bg-blue-500",
  layaway: "bg-purple-500",
  shipped: "bg-cyan-500",
  delivered: "bg-green-500",
  cancelled: "bg-red-500",
  refunded: "bg-orange-500",
  on_hold: "bg-gray-500",
};

const AdminDashboard = () => {
  const { user, token, isAuthenticated } = useAuth();
  const navigate = useNavigate();
  const [activeTab, setActiveTab] = useState("dashboard");
  const [loading, setLoading] = useState(true);

  // Dashboard data
  const [dashboardData, setDashboardData] = useState(null);

  // Products state
  const [products, setProducts] = useState([]);
  const [productDialog, setProductDialog] = useState(false);
  const [editingProduct, setEditingProduct] = useState(null);
  const [productForm, setProductForm] = useState({
    name: "",
    description: "",
    price: "",
    category: "",
    image_url: "",
    stock: "",
    brand: "",
    images: [],
  });

  // Services state
  const [services, setServices] = useState([]);
  const [serviceDialog, setServiceDialog] = useState(false);
  const [editingService, setEditingService] = useState(null);
  const [serviceForm, setServiceForm] = useState({
    name: "",
    description: "",
    price: "",
    duration: "",
    image_url: "",
    category: "",
    images: [],
  });

  // Orders state
  const [orders, setOrders] = useState([]);
  const [orderStatusFilter, setOrderStatusFilter] = useState("all");
  const [selectedOrder, setSelectedOrder] = useState(null);
  const [newStatus, setNewStatus] = useState("");
  const [statusNotes, setStatusNotes] = useState("");
  const [trackingNumber, setTrackingNumber] = useState("");

  // Inventory state
  const [inventory, setInventory] = useState([]);
  const [adjustDialog, setAdjustDialog] = useState(false);
  const [adjustProduct, setAdjustProduct] = useState(null);
  const [adjustQty, setAdjustQty] = useState(0);
  const [adjustNotes, setAdjustNotes] = useState("");
  const [inventorySearch, setInventorySearch] = useState("");
  const [inventoryCategory, setInventoryCategory] = useState("all");
  const [inventoryItemsPerPage, setInventoryItemsPerPage] = useState(20);
  const [inventoryCurrentPage, setInventoryCurrentPage] = useState(1);

  // Reports state
  const [reportPeriod, setReportPeriod] = useState("monthly");
  const [salesReport, setSalesReport] = useState(null);

  // Bookings state
  const [bookings, setBookings] = useState([]);

  // Categories state
  const [categories, setCategories] = useState([]);
  const [categoryDialog, setCategoryDialog] = useState(false);
  const [editingCategory, setEditingCategory] = useState(null);
  const [categoryForm, setCategoryForm] = useState({
    name: "",
    description: "",
  });

  // Users state
  const [users, setUsers] = useState([]);
  const [usersTotal, setUsersTotal] = useState(0);
  const [userDialog, setUserDialog] = useState(false);
  const [editingUser, setEditingUser] = useState(null);
  const [userForm, setUserForm] = useState({
    name: "",
    email: "",
    password: "",
    role: "user",
    is_active: true,
  });
  const [userSearch, setUserSearch] = useState("");
  const [userRoleFilter, setUserRoleFilter] = useState("");
  const [userStatusFilter, setUserStatusFilter] = useState("");
  const [usersPerPage, setUsersPerPage] = useState(20);
  const [currentUsersPage, setCurrentUsersPage] = useState(1);

  // Delete confirmation state
  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
  const [productToDelete, setProductToDelete] = useState(null);

  // About Page state
  const [aboutContent, setAboutContent] = useState([]);
  const [teamMembers, setTeamMembers] = useState([]);
  const [companyValues, setCompanyValues] = useState([]);
  const [aboutDialog, setAboutDialog] = useState(false);
  const [aboutEditType, setAboutEditType] = useState(""); // "content", "team", "value"
  const [editingAboutItem, setEditingAboutItem] = useState(null);
  const [aboutForm, setAboutForm] = useState({
    section: "",
    title: "",
    subtitle: "",
    content: "",
    image_url: "",
    data: null,
    display_order: 0,
    is_active: true,
    name: "",
    role: "",
    bio: "",
    email: "",
    linkedin: "",
    description: "",
    icon: "",
  });

  useEffect(() => {
    // Only fetch if properly authenticated as admin
    if (isAuthenticated && user?.role === "admin" && token) {
      fetchDashboardData();
      fetchCategories(); // Fetch categories on mount for product form dropdown
    } else if (isAuthenticated && user && user.role !== "admin") {
      // User is authenticated but not admin
      toast.error("Admin access required");
      navigate("/");
    }
  }, [isAuthenticated, user, token, navigate]);

  useEffect(() => {
    if (activeTab === "products") fetchProducts();
    if (activeTab === "services") fetchServices();
    if (activeTab === "orders") fetchOrders();
    if (activeTab === "inventory") fetchInventory();
    if (activeTab === "reports") fetchReports();
    if (activeTab === "bookings") fetchBookings();
    if (activeTab === "categories") fetchCategories();
    if (activeTab === "users") fetchUsers();
    if (activeTab === "about") fetchAboutData();
  }, [activeTab]);

  // Fetch users when filters or pagination change
  useEffect(() => {
    if (activeTab === "users") {
      fetchUsers();
    }
  }, [
    currentUsersPage,
    usersPerPage,
    userSearch,
    userRoleFilter,
    userStatusFilter,
  ]);

  const fetchDashboardData = async () => {
    try {
      // Validate token exists
      if (!token) {
        console.warn("No authentication token available");
        toast.error("Authentication required");
        navigate("/login");
        return;
      }

      const response = await axios.get(`${API}/admin/dashboard`, {
        headers: { Authorization: `Bearer ${token}` },
        timeout: 10000, // 10 second timeout
      });

      // Validate response structure
      if (response.data && response.data.stats) {
        setDashboardData(response.data);

        // Show warning if partial data
        if (response.data.error) {
          toast.warning(response.data.error);
        }
      } else {
        console.error("Invalid dashboard response structure:", response.data);
        toast.error("Received invalid dashboard data");
      }
    } catch (error) {
      console.error("Failed to fetch dashboard:", error);

      // Detailed error handling
      if (error.response) {
        // Server responded with error
        if (error.response.status === 401) {
          toast.error("Session expired. Please login again.");
          navigate("/login");
        } else if (error.response.status === 403) {
          toast.error("Admin access required");
          navigate("/");
        } else if (error.response.status === 500) {
          toast.error("Server error. Please try again later.");
        } else {
          toast.error(
            `Failed to load dashboard data (Error ${error.response.status})`
          );
        }
      } else if (error.request) {
        // Request made but no response
        toast.error("Cannot connect to server. Please check your connection.");
      } else {
        // Other errors
        toast.error("Failed to load dashboard data");
      }
    } finally {
      setLoading(false);
    }
  };

  const fetchProducts = async () => {
    try {
      const response = await axios.get(
        `${API}/admin/products?include_inactive=true`,
        {
          headers: { Authorization: `Bearer ${token}` },
        }
      );
      setProducts(response.data);
    } catch (error) {
      toast.error("Failed to load products");
    }
  };

  const fetchServices = async () => {
    try {
      const response = await axios.get(
        `${API}/admin/services?include_inactive=true`,
        {
          headers: { Authorization: `Bearer ${token}` },
        }
      );
      setServices(response.data);
    } catch (error) {
      toast.error("Failed to load services");
    }
  };

  const fetchOrders = async () => {
    try {
      const params =
        orderStatusFilter !== "all" ? `?status=${orderStatusFilter}` : "";
      const response = await axios.get(`${API}/admin/orders${params}`, {
        headers: { Authorization: `Bearer ${token}` },
      });
      setOrders(response.data);
    } catch (error) {
      toast.error("Failed to load orders");
    }
  };

  const fetchInventory = async () => {
    try {
      const response = await axios.get(`${API}/admin/inventory`, {
        headers: { Authorization: `Bearer ${token}` },
      });
      setInventory(response.data);
    } catch (error) {
      toast.error("Failed to load inventory");
    }
  };

  const fetchReports = async () => {
    try {
      const response = await axios.get(
        `${API}/admin/reports/sales?period=${reportPeriod}`,
        {
          headers: { Authorization: `Bearer ${token}` },
        }
      );
      setSalesReport(response.data);
    } catch (error) {
      toast.error("Failed to load reports");
    }
  };

  const fetchBookings = async () => {
    try {
      const response = await axios.get(`${API}/admin/bookings`, {
        headers: { Authorization: `Bearer ${token}` },
      });
      setBookings(response.data);
    } catch (error) {
      toast.error("Failed to load bookings");
    }
  };

  const fetchCategories = async () => {
    try {
      const response = await axios.get(`${API}/admin/categories`, {
        headers: { Authorization: `Bearer ${token}` },
      });
      setCategories(response.data);
    } catch (error) {
      toast.error("Failed to load categories");
    }
  };

  const fetchUsers = async () => {
    try {
      const skip = (currentUsersPage - 1) * usersPerPage;
      const response = await axios.get(`${API}/admin/users`, {
        headers: { Authorization: `Bearer ${token}` },
        params: {
          skip,
          limit: usersPerPage,
          search: userSearch,
          role: userRoleFilter,
          status: userStatusFilter,
        },
      });
      setUsers(response.data.users);
      setUsersTotal(response.data.total);
    } catch (error) {
      toast.error("Failed to load users");
    }
  };

  const handleUserSubmit = async () => {
    try {
      const data = {
        ...userForm,
        role: userForm.role.toLowerCase(),
      };

      if (editingUser) {
        // Update user - only include password if it's not empty
        if (!data.password || data.password.trim() === "") {
          delete data.password; // Don't send empty password
        }
        await axios.put(`${API}/admin/users/${editingUser.id}`, data, {
          headers: { Authorization: `Bearer ${token}` },
        });
        toast.success("User updated successfully");
      } else {
        // Create new user
        if (!data.password) {
          toast.error("Password is required for new users");
          return;
        }
        await axios.post(`${API}/admin/users`, data, {
          headers: { Authorization: `Bearer ${token}` },
        });
        toast.success("User created");
      }

      setUserDialog(false);
      setEditingUser(null);
      setUserForm({
        name: "",
        email: "",
        password: "",
        role: "user",
        is_active: true,
      });
      fetchUsers();
    } catch (error) {
      toast.error(error.response?.data?.detail || "Failed to save user");
    }
  };

  const handleToggleUserActive = async (userId) => {
    try {
      await axios.put(
        `${API}/admin/users/${userId}/toggle-active`,
        {},
        {
          headers: { Authorization: `Bearer ${token}` },
        }
      );
      toast.success("User status updated");
      fetchUsers();
    } catch (error) {
      toast.error(
        error.response?.data?.detail || "Failed to update user status"
      );
    }
  };

  const handleDeleteUser = async (userId) => {
    try {
      await axios.delete(`${API}/admin/users/${userId}`, {
        headers: { Authorization: `Bearer ${token}` },
      });
      toast.success("User deleted");
      fetchUsers();
    } catch (error) {
      toast.error(error.response?.data?.detail || "Failed to delete user");
    }
  };

  // About Page Functions
  const fetchAboutData = async () => {
    try {
      const [contentRes, teamRes, valuesRes] = await Promise.all([
        axios.get(`${API}/admin/about/content`, {
          headers: { Authorization: `Bearer ${token}` },
        }),
        axios.get(`${API}/admin/about/team`, {
          headers: { Authorization: `Bearer ${token}` },
        }),
        axios.get(`${API}/admin/about/values`, {
          headers: { Authorization: `Bearer ${token}` },
        }),
      ]);
      setAboutContent(contentRes.data);
      setTeamMembers(teamRes.data);
      setCompanyValues(valuesRes.data);
    } catch (error) {
      toast.error("Failed to fetch about page data");
    }
  };

  const handleSaveAboutItem = async () => {
    try {
      if (aboutEditType === "content") {
        const data = {
          section: aboutForm.section,
          title: aboutForm.title || null,
          subtitle: aboutForm.subtitle || null,
          content: aboutForm.content || null,
          image_url: aboutForm.image_url || null,
          data: aboutForm.data,
          display_order: aboutForm.display_order,
          is_active: aboutForm.is_active,
        };

        if (editingAboutItem) {
          await axios.put(
            `${API}/admin/about/content/${editingAboutItem.id}`,
            data,
            { headers: { Authorization: `Bearer ${token}` } }
          );
          toast.success("Content updated");
        } else {
          await axios.post(`${API}/admin/about/content`, data, {
            headers: { Authorization: `Bearer ${token}` },
          });
          toast.success("Content created");
        }
      } else if (aboutEditType === "team") {
        const data = {
          name: aboutForm.name,
          role: aboutForm.role,
          bio: aboutForm.bio || null,
          image_url: aboutForm.image_url || null,
          email: aboutForm.email || null,
          linkedin: aboutForm.linkedin || null,
          display_order: aboutForm.display_order,
          is_active: aboutForm.is_active,
        };

        if (editingAboutItem) {
          await axios.put(
            `${API}/admin/about/team/${editingAboutItem.id}`,
            data,
            { headers: { Authorization: `Bearer ${token}` } }
          );
          toast.success("Team member updated");
        } else {
          await axios.post(`${API}/admin/about/team`, data, {
            headers: { Authorization: `Bearer ${token}` },
          });
          toast.success("Team member created");
        }
      } else if (aboutEditType === "value") {
        const data = {
          title: aboutForm.title,
          description: aboutForm.description,
          icon: aboutForm.icon,
          display_order: aboutForm.display_order,
          is_active: aboutForm.is_active,
        };

        if (editingAboutItem) {
          await axios.put(
            `${API}/admin/about/values/${editingAboutItem.id}`,
            data,
            { headers: { Authorization: `Bearer ${token}` } }
          );
          toast.success("Company value updated");
        } else {
          await axios.post(`${API}/admin/about/values`, data, {
            headers: { Authorization: `Bearer ${token}` },
          });
          toast.success("Company value created");
        }
      }

      setAboutDialog(false);
      setEditingAboutItem(null);
      fetchAboutData();
    } catch (error) {
      toast.error(
        error.response?.data?.detail || "Failed to save about page item"
      );
    }
  };

  const handleDeleteAboutItem = async (id, type) => {
    if (!window.confirm("Are you sure you want to delete this item?")) return;

    try {
      if (type === "content") {
        await axios.delete(`${API}/admin/about/content/${id}`, {
          headers: { Authorization: `Bearer ${token}` },
        });
        toast.success("Content deleted");
      } else if (type === "team") {
        await axios.delete(`${API}/admin/about/team/${id}`, {
          headers: { Authorization: `Bearer ${token}` },
        });
        toast.success("Team member deleted");
      } else if (type === "value") {
        await axios.delete(`${API}/admin/about/values/${id}`, {
          headers: { Authorization: `Bearer ${token}` },
        });
        toast.success("Company value deleted");
      }

      fetchAboutData();
    } catch (error) {
      toast.error(
        error.response?.data?.detail || "Failed to delete about page item"
      );
    }
  };

  // Product CRUD
  const handleProductSubmit = async () => {
    try {
      const data = {
        ...productForm,
        price: parseFloat(productForm.price),
        stock: parseInt(productForm.stock) || 10,
      };

      if (editingProduct) {
        await axios.put(`${API}/admin/products/${editingProduct.id}`, data, {
          headers: { Authorization: `Bearer ${token}` },
        });
        toast.success("Product updated");
      } else {
        await axios.post(`${API}/admin/products`, data, {
          headers: { Authorization: `Bearer ${token}` },
        });
        toast.success("Product created");
      }

      clearCache("products-");
      setProductDialog(false);
      setEditingProduct(null);
      setProductForm({
        name: "",
        description: "",
        price: "",
        category: "",
        image_url: "",
        stock: "",
        brand: "",
        images: [],
      });
      fetchProducts();
    } catch (error) {
      toast.error("Failed to save product");
    }
  };

  const handleDeleteProduct = async () => {
    if (!productToDelete) return;
    try {
      await axios.delete(`${API}/admin/products/${productToDelete.id}`, {
        headers: { Authorization: `Bearer ${token}` },
      });
      toast.success(`"${productToDelete.name}" has been deleted`);
      clearCache("products-");
      setDeleteConfirmOpen(false);
      setProductToDelete(null);
      fetchProducts();
    } catch (error) {
      toast.error("Failed to delete product");
      setDeleteConfirmOpen(false);
      setProductToDelete(null);
    }
  };

  // Service CRUD
  const handleServiceSubmit = async () => {
    try {
      const data = {
        ...serviceForm,
        price: parseFloat(serviceForm.price),
      };

      if (editingService) {
        await axios.put(`${API}/admin/services/${editingService.id}`, data, {
          headers: { Authorization: `Bearer ${token}` },
        });
        toast.success("Service updated");
      } else {
        await axios.post(`${API}/admin/services`, data, {
          headers: { Authorization: `Bearer ${token}` },
        });
        toast.success("Service created");
      }

      clearCache("services-");
      setServiceDialog(false);
      setEditingService(null);
      setServiceForm({
        name: "",
        description: "",
        price: "",
        duration: "",
        image_url: "",
        category: "",
        images: [],
      });
      fetchServices();
    } catch (error) {
      toast.error("Failed to save service");
    }
  };

  const handleDeleteService = async (id) => {
    if (!window.confirm("Are you sure you want to delete this service?"))
      return;
    try {
      await axios.delete(`${API}/admin/services/${id}`, {
        headers: { Authorization: `Bearer ${token}` },
      });
      toast.success("Service deleted");
      clearCache("services-");
      fetchServices();
    } catch (error) {
      toast.error("Failed to delete service");
    }
  };

  // Order status update
  const handleUpdateOrderStatus = async () => {
    if (!selectedOrder || !newStatus) return;
    try {
      await axios.put(
        `${API}/admin/orders/${selectedOrder}/status`,
        {
          status: newStatus,
          notes: statusNotes,
          tracking_number: trackingNumber || null,
        },
        {
          headers: { Authorization: `Bearer ${token}` },
        }
      );
      toast.success("Order status updated");
      setSelectedOrder(null);
      setNewStatus("");
      setStatusNotes("");
      setTrackingNumber("");
      fetchOrders();
    } catch (error) {
      toast.error("Failed to update order");
    }
  };

  // Inventory adjustment
  const handleAdjustInventory = async () => {
    if (!adjustProduct) return;
    try {
      await axios.post(
        `${API}/admin/inventory/${adjustProduct.id}/adjust`,
        {
          quantity_change: adjustQty,
          notes: adjustNotes,
        },
        {
          headers: { Authorization: `Bearer ${token}` },
        }
      );
      toast.success("Inventory adjusted");
      setAdjustDialog(false);
      setAdjustProduct(null);
      setAdjustQty(0);
      setAdjustNotes("");
      fetchInventory();
    } catch (error) {
      toast.error("Failed to adjust inventory");
    }
  };

  // Toggle product active status
  const handleToggleActive = async (product) => {
    try {
      await axios.put(
        `${API}/admin/products/${product.id}`,
        { is_active: !product.is_active },
        { headers: { Authorization: `Bearer ${token}` } }
      );
      toast.success(
        `Product ${!product.is_active ? "activated" : "deactivated"}`
      );
      fetchInventory();
    } catch (error) {
      toast.error("Failed to update product status");
    }
  };

  // Export reports
  const handleExportCSV = async (type) => {
    try {
      const response = await axios.get(
        `${API}/admin/reports/export/csv?report_type=${type}&period=${reportPeriod}`,
        {
          headers: { Authorization: `Bearer ${token}` },
          responseType: "blob",
        }
      );
      const url = window.URL.createObjectURL(new Blob([response.data]));
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", `${type}_report.csv`);
      document.body.appendChild(link);
      link.click();
      link.remove();
      toast.success("CSV exported");
    } catch (error) {
      toast.error("Failed to export CSV");
    }
  };

  const handleExportPDF = async (type) => {
    try {
      const response = await axios.get(
        `${API}/admin/reports/export/pdf?report_type=${type}&period=${reportPeriod}`,
        {
          headers: { Authorization: `Bearer ${token}` },
          responseType: "blob",
        }
      );
      const url = window.URL.createObjectURL(new Blob([response.data]));
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", `${type}_report.pdf`);
      document.body.appendChild(link);
      link.click();
      link.remove();
      toast.success("PDF exported");
    } catch (error) {
      toast.error("Failed to export PDF");
    }
  };

  if (!isAuthenticated || user?.role !== "admin") {
    return (
      <div className="min-h-screen py-12 md:py-16">
        <div className="max-w-4xl mx-auto px-4 md:px-8 text-center py-16">
          <h2 className="text-2xl font-bold mb-4 font-['Outfit']">
            Access Denied
          </h2>
          <p className="text-muted-foreground mb-8">
            You need admin privileges to access this page.
          </p>
          <Button onClick={() => navigate("/login")} className="rounded-full">
            Sign In as Admin
          </Button>
        </div>
      </div>
    );
  }

  // Category CRUD
  const handleCategorySubmit = async () => {
    try {
      if (editingCategory) {
        await axios.put(
          `${API}/admin/categories/${editingCategory.id}`,
          categoryForm,
          {
            headers: { Authorization: `Bearer ${token}` },
          }
        );
        toast.success("Category updated");
      } else {
        await axios.post(`${API}/admin/categories`, categoryForm, {
          headers: { Authorization: `Bearer ${token}` },
        });
        toast.success("Category created");
      }

      setCategoryDialog(false);
      setEditingCategory(null);
      setCategoryForm({ name: "", description: "" });
      fetchCategories();
    } catch (error) {
      toast.error("Failed to save category");
    }
  };

  const handleDeleteCategory = async (id) => {
    if (!window.confirm("Are you sure you want to delete this category?"))
      return;
    try {
      await axios.delete(`${API}/admin/categories/${id}`, {
        headers: { Authorization: `Bearer ${token}` },
      });
      toast.success("Category deleted");
      fetchCategories();
    } catch (error) {
      toast.error("Failed to delete category");
    }
  };

  if (loading) {
    return (
      <div className="min-h-screen py-12 flex items-center justify-center">
        <div className="animate-spin w-8 h-8 border-2 border-primary border-t-transparent rounded-full" />
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-muted/30">
      <div className="max-w-7xl mx-auto px-4 md:px-8 py-8">
        <div className="flex items-center justify-between mb-8">
          <div>
            <h1 className="text-3xl font-bold font-['Outfit']">
              Admin Dashboard
            </h1>
            <p className="text-muted-foreground">Manage your store</p>
          </div>
          <Button
            onClick={fetchDashboardData}
            variant="outline"
            className="gap-2"
          >
            <RefreshCw className="h-4 w-4" />
            Refresh
          </Button>
        </div>

        <Tabs value={activeTab} onValueChange={setActiveTab}>
          <TabsList className="grid grid-cols-4 md:grid-cols-8 gap-2 mb-8 h-auto p-1">
            <TabsTrigger value="dashboard" className="gap-2">
              <LayoutDashboard className="h-4 w-4" />
              <span className="hidden md:inline">Dashboard</span>
            </TabsTrigger>
            <TabsTrigger value="products" className="gap-2">
              <Package className="h-4 w-4" />
              <span className="hidden md:inline">Products</span>
            </TabsTrigger>
            <TabsTrigger value="services" className="gap-2">
              <Wrench className="h-4 w-4" />
              <span className="hidden md:inline">Services</span>
            </TabsTrigger>
            <TabsTrigger value="orders" className="gap-2">
              <ShoppingCart className="h-4 w-4" />
              <span className="hidden md:inline">Orders</span>
            </TabsTrigger>
            <TabsTrigger value="inventory" className="gap-2">
              <Package className="h-4 w-4" />
              <span className="hidden md:inline">Inventory</span>
            </TabsTrigger>
            <TabsTrigger value="bookings" className="gap-2">
              <Calendar className="h-4 w-4" />
              <span className="hidden md:inline">Bookings</span>
            </TabsTrigger>
            <TabsTrigger value="categories" className="gap-2">
              <Settings className="h-4 w-4" />
              <span className="hidden md:inline">Categories</span>
            </TabsTrigger>
            <TabsTrigger value="users" className="gap-2">
              <Users className="h-4 w-4" />
              <span className="hidden md:inline">Users</span>
            </TabsTrigger>
            <TabsTrigger value="reports" className="gap-2">
              <BarChart3 className="h-4 w-4" />
              <span className="hidden md:inline">Reports</span>
            </TabsTrigger>
            <TabsTrigger value="about" className="gap-2">
              <Info className="h-4 w-4" />
              <span className="hidden md:inline">About Page</span>
            </TabsTrigger>
          </TabsList>

          {/* Dashboard Tab */}
          <TabsContent value="dashboard">
            {dashboardData && (
              <div className="space-y-6">
                {/* Stats Grid */}
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                  <div className="bg-card border border-border rounded-xl p-6">
                    <div className="flex items-center gap-3 mb-2">
                      <div className="w-10 h-10 rounded-full bg-blue-500/10 flex items-center justify-center">
                        <DollarSign className="h-5 w-5 text-blue-500" />
                      </div>
                      <span className="text-sm text-muted-foreground">
                        Total Revenue
                      </span>
                    </div>
                    <p className="text-2xl font-bold font-['Outfit']">
                      ${dashboardData.stats.total_revenue.toFixed(2)}
                    </p>
                  </div>
                  <div className="bg-card border border-border rounded-xl p-6">
                    <div className="flex items-center gap-3 mb-2">
                      <div className="w-10 h-10 rounded-full bg-green-500/10 flex items-center justify-center">
                        <ShoppingCart className="h-5 w-5 text-green-500" />
                      </div>
                      <span className="text-sm text-muted-foreground">
                        Total Orders
                      </span>
                    </div>
                    <p className="text-2xl font-bold font-['Outfit']">
                      {dashboardData.stats.total_orders}
                    </p>
                  </div>
                  <div className="bg-card border border-border rounded-xl p-6">
                    <div className="flex items-center gap-3 mb-2">
                      <div className="w-10 h-10 rounded-full bg-purple-500/10 flex items-center justify-center">
                        <Package className="h-5 w-5 text-purple-500" />
                      </div>
                      <span className="text-sm text-muted-foreground">
                        Products
                      </span>
                    </div>
                    <p className="text-2xl font-bold font-['Outfit']">
                      {dashboardData.stats.total_products}
                    </p>
                  </div>
                  <div className="bg-card border border-border rounded-xl p-6">
                    <div className="flex items-center gap-3 mb-2">
                      <div className="w-10 h-10 rounded-full bg-orange-500/10 flex items-center justify-center">
                        <Users className="h-5 w-5 text-orange-500" />
                      </div>
                      <span className="text-sm text-muted-foreground">
                        Users
                      </span>
                    </div>
                    <p className="text-2xl font-bold font-['Outfit']">
                      {dashboardData.stats.total_users}
                    </p>
                  </div>
                </div>

                {/* Today's Stats */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="bg-card border border-border rounded-xl p-6">
                    <h3 className="font-semibold mb-4 font-['Outfit']">
                      Today's Performance
                    </h3>
                    <div className="grid grid-cols-2 gap-4">
                      <div>
                        <p className="text-sm text-muted-foreground">Orders</p>
                        <p className="text-xl font-bold">
                          {dashboardData.stats.today_orders}
                        </p>
                      </div>
                      <div>
                        <p className="text-sm text-muted-foreground">Revenue</p>
                        <p className="text-xl font-bold">
                          ${(dashboardData.stats.today_revenue || 0).toFixed(2)}
                        </p>
                      </div>
                    </div>
                  </div>
                  <div className="bg-card border border-border rounded-xl p-6">
                    <h3 className="font-semibold mb-4 font-['Outfit']">
                      Monthly Stats
                    </h3>
                    <div className="grid grid-cols-2 gap-4">
                      <div>
                        <p className="text-sm text-muted-foreground">Revenue</p>
                        <p className="text-xl font-bold">
                          $
                          {(dashboardData.stats.monthly_revenue || 0).toFixed(
                            2
                          )}
                        </p>
                      </div>
                      <div>
                        <p className="text-sm text-muted-foreground">
                          Pending Bookings
                        </p>
                        <p className="text-xl font-bold">
                          {dashboardData.stats.pending_bookings}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Low Stock Alert */}
                {dashboardData.low_stock_products.length > 0 && (
                  <div className="bg-card border border-orange-500/50 rounded-xl p-6">
                    <div className="flex items-center gap-2 mb-4">
                      <AlertTriangle className="h-5 w-5 text-orange-500" />
                      <h3 className="font-semibold font-['Outfit']">
                        Low Stock Alert
                      </h3>
                    </div>
                    <div className="space-y-2">
                      {dashboardData.low_stock_products.map((product) => (
                        <div
                          key={product.id}
                          className="flex items-center justify-between p-3 bg-muted rounded-lg"
                        >
                          <span>{product.name}</span>
                          <Badge variant="destructive">
                            {product.stock} left
                          </Badge>
                        </div>
                      ))}
                    </div>
                  </div>
                )}

                {/* Recent Orders */}
                <div className="bg-card border border-border rounded-xl p-6">
                  <h3 className="font-semibold mb-4 font-['Outfit']">
                    Recent Orders
                  </h3>
                  <div className="space-y-3">
                    {dashboardData.recent_orders.slice(0, 5).map((order) => (
                      <div
                        key={order.id}
                        className="flex items-center justify-between p-3 bg-muted/50 rounded-lg"
                      >
                        <div>
                          <p className="font-medium font-mono text-sm">
                            {order.id.slice(0, 8)}...
                          </p>
                          <p className="text-xs text-muted-foreground">
                            {new Date(order.created_at).toLocaleString()}
                          </p>
                        </div>
                        <div className="flex items-center gap-3">
                          <span className="font-semibold">
                            ${order.total.toFixed(2)}
                          </span>
                          <Badge className={statusColors[order.status]}>
                            {order.status}
                          </Badge>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            )}
          </TabsContent>

          {/* Products Tab */}
          <TabsContent value="products">
            <div className="bg-card border border-border rounded-xl p-6">
              <div className="flex items-center justify-between mb-6">
                <h3 className="font-semibold font-['Outfit']">
                  Products Management
                </h3>
                <Dialog open={productDialog} onOpenChange={setProductDialog}>
                  <DialogTrigger asChild>
                    <Button
                      className="gap-2"
                      onClick={() => {
                        setEditingProduct(null);
                        setProductForm({
                          name: "",
                          description: "",
                          price: "",
                          category: "",
                          image_url: "",
                          stock: "",
                          brand: "",
                          images: [],
                        });
                      }}
                    >
                      <Plus className="h-4 w-4" />
                      Add Product
                    </Button>
                  </DialogTrigger>
                  <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto custom-scrollbar">
                    <DialogHeader>
                      <DialogTitle>
                        {editingProduct ? "Edit Product" : "Add Product"}
                      </DialogTitle>
                    </DialogHeader>
                    <div className="space-y-4 py-4">
                      <div className="space-y-2">
                        <Label>Name</Label>
                        <Input
                          value={productForm.name}
                          onChange={(e) =>
                            setProductForm({
                              ...productForm,
                              name: e.target.value,
                            })
                          }
                        />
                      </div>
                      <div className="space-y-2">
                        <Label>Description</Label>
                        <RichTextEditor
                          content={productForm.description}
                          onChange={(html) =>
                            setProductForm({
                              ...productForm,
                              description: html,
                            })
                          }
                          placeholder="Enter product description with rich formatting..."
                        />
                      </div>
                      <div className="grid grid-cols-2 gap-4">
                        <div className="space-y-2">
                          <Label>Price</Label>
                          <Input
                            type="number"
                            value={productForm.price}
                            onChange={(e) =>
                              setProductForm({
                                ...productForm,
                                price: e.target.value,
                              })
                            }
                          />
                        </div>
                        <div className="space-y-2">
                          <Label>Stock</Label>
                          <Input
                            type="number"
                            value={productForm.stock}
                            onChange={(e) =>
                              setProductForm({
                                ...productForm,
                                stock: e.target.value,
                              })
                            }
                          />
                        </div>
                      </div>
                      <div className="grid grid-cols-2 gap-4">
                        <div className="space-y-2">
                          <Label>Category</Label>
                          <Select
                            value={productForm.category}
                            onValueChange={(v) =>
                              setProductForm({ ...productForm, category: v })
                            }
                          >
                            <SelectTrigger>
                              <SelectValue placeholder="Select category" />
                            </SelectTrigger>
                            <SelectContent>
                              {categories.map((cat) => (
                                <SelectItem
                                  key={cat.id}
                                  value={cat.name.toLowerCase()}
                                >
                                  {cat.name}
                                </SelectItem>
                              ))}
                            </SelectContent>
                          </Select>
                        </div>
                        <div className="space-y-2">
                          <Label>Brand</Label>
                          <Input
                            value={productForm.brand}
                            onChange={(e) =>
                              setProductForm({
                                ...productForm,
                                brand: e.target.value,
                              })
                            }
                          />
                        </div>
                      </div>
                      <Separator className="my-4" />
                      <ImageUploadManager
                        images={productForm.images}
                        onChange={(images) =>
                          setProductForm({ ...productForm, images })
                        }
                        token={token}
                      />
                      <div className="space-y-2">
                        <Label>Legacy Image URL (Optional)</Label>
                        <Input
                          placeholder="Or enter an image URL..."
                          value={productForm.image_url}
                          onChange={(e) =>
                            setProductForm({
                              ...productForm,
                              image_url: e.target.value,
                            })
                          }
                        />
                        <p className="text-xs text-muted-foreground">
                          Use the image uploader above for best results. This
                          field is for backwards compatibility.
                        </p>
                      </div>
                    </div>
                    <DialogFooter>
                      <Button
                        variant="outline"
                        onClick={() => setProductDialog(false)}
                      >
                        Cancel
                      </Button>
                      <Button onClick={handleProductSubmit}>
                        {editingProduct ? "Update" : "Create"}
                      </Button>
                    </DialogFooter>
                  </DialogContent>
                </Dialog>
              </div>

              <div className="overflow-x-auto">
                <table className="w-full text-sm">
                  <thead>
                    <tr className="border-b border-border">
                      <th className="text-left py-3 px-2">Product</th>
                      <th className="text-left py-3 px-2">Category</th>
                      <th className="text-right py-3 px-2">Price</th>
                      <th className="text-right py-3 px-2">Stock</th>
                      <th className="text-center py-3 px-2">Status</th>
                      <th className="text-right py-3 px-2">Actions</th>
                    </tr>
                  </thead>
                  <tbody>
                    {products.map((product) => (
                      <tr
                        key={product.id}
                        className="border-b border-border/50"
                      >
                        <td className="py-3 px-2">
                          <div className="flex items-center gap-3">
                            <img
                              src={
                                product.images && product.images.length > 0
                                  ? (
                                      product.images[0].url ||
                                      product.images[0].image_url
                                    ).startsWith("/uploads")
                                    ? `${process.env.REACT_APP_BACKEND_URL}${
                                        product.images[0].url ||
                                        product.images[0].image_url
                                      }`
                                    : product.images[0].url ||
                                      product.images[0].image_url
                                  : product.image_url
                              }
                              alt={product.name}
                              className="w-10 h-10 rounded object-cover bg-muted"
                              onError={(e) => {
                                e.target.src =
                                  'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"%3E%3Crect x="3" y="3" width="18" height="18" rx="2" /%3E%3Ccircle cx="8.5" cy="8.5" r="1.5" /%3E%3Cpath d="M21 15l-5-5L5 21" /%3E%3C/svg%3E';
                              }}
                            />
                            <span className="font-medium">{product.name}</span>
                          </div>
                        </td>
                        <td className="py-3 px-2 capitalize">
                          {product.category}
                        </td>
                        <td className="py-3 px-2 text-right">
                          ${product.price.toFixed(2)}
                        </td>
                        <td className="py-3 px-2 text-right">
                          {product.stock}
                        </td>
                        <td className="py-3 px-2 text-center">
                          <Badge
                            variant={
                              product.is_active ? "default" : "secondary"
                            }
                          >
                            {product.is_active ? "Active" : "Inactive"}
                          </Badge>
                        </td>
                        <td className="py-3 px-2 text-right">
                          <div className="flex justify-end gap-2">
                            <Button
                              size="icon"
                              variant="ghost"
                              onClick={() => {
                                setEditingProduct(product);
                                setProductForm({
                                  name: product.name,
                                  description: product.description,
                                  price: product.price.toString(),
                                  category: product.category,
                                  image_url: product.image_url,
                                  stock: product.stock.toString(),
                                  brand: product.brand,
                                  images:
                                    product.images?.map(
                                      (img) => img.url || img.image_url
                                    ) || [],
                                });
                                setProductDialog(true);
                              }}
                            >
                              <Edit className="h-4 w-4" />
                            </Button>
                            <Button
                              size="icon"
                              variant="ghost"
                              className="text-destructive"
                              onClick={() => {
                                setProductToDelete(product);
                                setDeleteConfirmOpen(true);
                              }}
                            >
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </TabsContent>

          {/* Services Tab */}
          <TabsContent value="services">
            <div className="bg-card border border-border rounded-xl p-6">
              <div className="flex items-center justify-between mb-6">
                <h3 className="font-semibold font-['Outfit']">
                  Services Management
                </h3>
                <Dialog open={serviceDialog} onOpenChange={setServiceDialog}>
                  <DialogTrigger asChild>
                    <Button
                      className="gap-2"
                      onClick={() => {
                        setEditingService(null);
                        setServiceForm({
                          name: "",
                          description: "",
                          price: "",
                          duration: "",
                          image_url: "",
                          category: "",
                          images: [],
                        });
                      }}
                    >
                      <Plus className="h-4 w-4" />
                      Add Service
                    </Button>
                  </DialogTrigger>
                  <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto custom-scrollbar">
                    <DialogHeader>
                      <DialogTitle>
                        {editingService ? "Edit Service" : "Add Service"}
                      </DialogTitle>
                    </DialogHeader>
                    <div className="space-y-4 py-4">
                      <div className="grid grid-cols-2 gap-4">
                        <div className="space-y-2">
                          <Label>Name</Label>
                          <Input
                            value={serviceForm.name}
                            onChange={(e) =>
                              setServiceForm({
                                ...serviceForm,
                                name: e.target.value,
                              })
                            }
                          />
                        </div>
                        <div className="space-y-2">
                          <Label>Category</Label>
                          <Select
                            value={serviceForm.category}
                            onValueChange={(v) =>
                              setServiceForm({ ...serviceForm, category: v })
                            }
                          >
                            <SelectTrigger>
                              <SelectValue placeholder="Select category" />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="repair">Repair</SelectItem>
                              <SelectItem value="data">
                                Data Recovery
                              </SelectItem>
                              <SelectItem value="software">Software</SelectItem>
                              <SelectItem value="upgrade">Upgrade</SelectItem>
                              <SelectItem value="setup">Setup</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                      </div>
                      <div className="grid grid-cols-2 gap-4">
                        <div className="space-y-2">
                          <Label>Price</Label>
                          <Input
                            type="number"
                            step="0.01"
                            value={serviceForm.price}
                            onChange={(e) =>
                              setServiceForm({
                                ...serviceForm,
                                price: e.target.value,
                              })
                            }
                          />
                        </div>
                        <div className="space-y-2">
                          <Label>Duration</Label>
                          <Input
                            value={serviceForm.duration}
                            onChange={(e) =>
                              setServiceForm({
                                ...serviceForm,
                                duration: e.target.value,
                              })
                            }
                            placeholder="e.g. 1-2 hours"
                          />
                        </div>
                      </div>
                      <div className="space-y-2">
                        <Label>Description</Label>
                        <div className="border rounded-lg">
                          <RichTextEditor
                            content={serviceForm.description}
                            onChange={(html) =>
                              setServiceForm({
                                ...serviceForm,
                                description: html,
                              })
                            }
                          />
                        </div>
                      </div>
                      <Separator className="my-4" />
                      <ImageUploadManager
                        images={serviceForm.images}
                        onChange={(images) =>
                          setServiceForm({ ...serviceForm, images })
                        }
                        token={token}
                      />
                      <div className="space-y-2">
                        <Label>Legacy Image URL (Optional)</Label>
                        <Input
                          placeholder="Or enter an image URL..."
                          value={serviceForm.image_url}
                          onChange={(e) =>
                            setServiceForm({
                              ...serviceForm,
                              image_url: e.target.value,
                            })
                          }
                        />
                        <p className="text-xs text-muted-foreground">
                          Use the image uploader above for best results. This
                          field is for backwards compatibility.
                        </p>
                      </div>
                    </div>
                    <DialogFooter>
                      <Button
                        variant="outline"
                        onClick={() => setServiceDialog(false)}
                      >
                        Cancel
                      </Button>
                      <Button onClick={handleServiceSubmit}>
                        {editingService ? "Update" : "Create"}
                      </Button>
                    </DialogFooter>
                  </DialogContent>
                </Dialog>
              </div>

              <div className="overflow-x-auto">
                <table className="w-full text-sm">
                  <thead>
                    <tr className="border-b border-border">
                      <th className="text-left py-3 px-2">Service</th>
                      <th className="text-left py-3 px-2">Category</th>
                      <th className="text-left py-3 px-2">Duration</th>
                      <th className="text-right py-3 px-2">Price</th>
                      <th className="text-center py-3 px-2">Status</th>
                      <th className="text-right py-3 px-2">Actions</th>
                    </tr>
                  </thead>
                  <tbody>
                    {services.map((service) => (
                      <tr
                        key={service.id}
                        className="border-b border-border/50"
                      >
                        <td className="py-3 px-2">
                          <div className="flex items-center gap-3">
                            <img
                              src={
                                service.images && service.images.length > 0
                                  ? (
                                      service.images[0].url ||
                                      service.images[0].image_url
                                    ).startsWith("/uploads")
                                    ? `${process.env.REACT_APP_BACKEND_URL}${
                                        service.images[0].url ||
                                        service.images[0].image_url
                                      }`
                                    : service.images[0].url ||
                                      service.images[0].image_url
                                  : service.image_url
                              }
                              alt={service.name}
                              className="w-10 h-10 rounded object-cover bg-muted"
                              onError={(e) => {
                                e.target.src =
                                  'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"%3E%3Crect x="3" y="3" width="18" height="18" rx="2" /%3E%3Ccircle cx="8.5" cy="8.5" r="1.5" /%3E%3Cpath d="M21 15l-5-5L5 21" /%3E%3C/svg%3E';
                              }}
                            />
                            <span className="font-medium">{service.name}</span>
                          </div>
                        </td>
                        <td className="py-3 px-2 capitalize">
                          {service.category}
                        </td>
                        <td className="py-3 px-2">{service.duration}</td>
                        <td className="py-3 px-2 text-right">
                          ${service.price.toFixed(2)}
                        </td>
                        <td className="py-3 px-2 text-center">
                          <Badge
                            variant={
                              service.is_active ? "default" : "secondary"
                            }
                          >
                            {service.is_active ? "Active" : "Inactive"}
                          </Badge>
                        </td>
                        <td className="py-3 px-2 text-right">
                          <div className="flex justify-end gap-2">
                            <Button
                              size="icon"
                              variant="ghost"
                              onClick={() => {
                                setEditingService(service);
                                setServiceForm({
                                  name: service.name,
                                  description: service.description,
                                  price: service.price.toString(),
                                  duration: service.duration,
                                  image_url: service.image_url,
                                  category: service.category,
                                  images:
                                    service.images?.map(
                                      (img) => img.url || img.image_url
                                    ) || [],
                                });
                                setServiceDialog(true);
                              }}
                            >
                              <Edit className="h-4 w-4" />
                            </Button>
                            <Button
                              size="icon"
                              variant="ghost"
                              className="text-destructive"
                              onClick={() => handleDeleteService(service.id)}
                            >
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </TabsContent>

          {/* Orders Tab */}
          <TabsContent value="orders">
            <div className="bg-card border border-border rounded-xl p-6">
              <div className="flex items-center justify-between mb-6">
                <h3 className="font-semibold font-['Outfit']">
                  Orders Management
                </h3>
                <Select
                  value={orderStatusFilter}
                  onValueChange={(v) => {
                    setOrderStatusFilter(v);
                    setTimeout(fetchOrders, 100);
                  }}
                >
                  <SelectTrigger className="w-[180px]">
                    <SelectValue placeholder="Filter by status" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Orders</SelectItem>
                    <SelectItem value="pending">Pending</SelectItem>
                    <SelectItem value="processing">Processing</SelectItem>
                    <SelectItem value="layaway">Layaway</SelectItem>
                    <SelectItem value="shipped">Shipped</SelectItem>
                    <SelectItem value="delivered">Delivered</SelectItem>
                    <SelectItem value="cancelled">Cancelled</SelectItem>
                    <SelectItem value="refunded">Refunded</SelectItem>
                    <SelectItem value="on_hold">On Hold</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div className="space-y-4">
                {orders.map((order) => (
                  <div
                    key={order.id}
                    className="border border-border rounded-lg p-4"
                  >
                    <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-4">
                      <div className="flex flex-wrap gap-4">
                        <div>
                          <p className="text-xs text-muted-foreground">
                            Order ID
                          </p>
                          <p className="font-mono text-sm">
                            {order.id.slice(0, 8)}...
                          </p>
                        </div>
                        <div>
                          <p className="text-xs text-muted-foreground">
                            Customer
                          </p>
                          <p className="text-sm">{order.user_name}</p>
                        </div>
                        <div>
                          <p className="text-xs text-muted-foreground">Date</p>
                          <p className="text-sm">
                            {new Date(order.created_at).toLocaleDateString()}
                          </p>
                        </div>
                        <div>
                          <p className="text-xs text-muted-foreground">Total</p>
                          <p className="font-semibold">
                            ${order.total.toFixed(2)}
                          </p>
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        <Badge className={statusColors[order.status]}>
                          {order.status}
                        </Badge>
                        <Dialog>
                          <DialogTrigger asChild>
                            <Button
                              size="sm"
                              variant="outline"
                              onClick={() => {
                                setSelectedOrder(order.id);
                                setNewStatus(order.status);
                                setTrackingNumber(order.tracking_number || "");
                              }}
                            >
                              Update Status
                            </Button>
                          </DialogTrigger>
                          <DialogContent>
                            <DialogHeader>
                              <DialogTitle>Update Order Status</DialogTitle>
                            </DialogHeader>
                            <div className="space-y-4 py-4">
                              <div className="space-y-2">
                                <Label>New Status</Label>
                                <Select
                                  value={newStatus}
                                  onValueChange={setNewStatus}
                                >
                                  <SelectTrigger>
                                    <SelectValue />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value="pending">
                                      Pending
                                    </SelectItem>
                                    <SelectItem value="processing">
                                      Processing
                                    </SelectItem>
                                    <SelectItem value="layaway">
                                      Layaway
                                    </SelectItem>
                                    <SelectItem value="shipped">
                                      Shipped
                                    </SelectItem>
                                    <SelectItem value="delivered">
                                      Delivered
                                    </SelectItem>
                                    <SelectItem value="cancelled">
                                      Cancelled
                                    </SelectItem>
                                    <SelectItem value="refunded">
                                      Refunded
                                    </SelectItem>
                                    <SelectItem value="on_hold">
                                      On Hold
                                    </SelectItem>
                                  </SelectContent>
                                </Select>
                              </div>
                              <div className="space-y-2">
                                <Label>Tracking Number (optional)</Label>
                                <Input
                                  value={trackingNumber}
                                  onChange={(e) =>
                                    setTrackingNumber(e.target.value)
                                  }
                                />
                              </div>
                              <div className="space-y-2">
                                <Label>Notes</Label>
                                <Textarea
                                  value={statusNotes}
                                  onChange={(e) =>
                                    setStatusNotes(e.target.value)
                                  }
                                />
                              </div>
                            </div>
                            <DialogFooter>
                              <Button onClick={handleUpdateOrderStatus}>
                                Update
                              </Button>
                            </DialogFooter>
                          </DialogContent>
                        </Dialog>
                      </div>
                    </div>

                    {/* Order Items */}
                    <div className="text-sm text-muted-foreground">
                      {order.items.map((item) => (
                        <span key={item.id} className="mr-4">
                          {item.product_name} x{item.quantity}
                        </span>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </TabsContent>

          {/* Inventory Tab */}
          <TabsContent value="inventory">
            <div className="bg-card border border-border rounded-xl p-6">
              <div className="flex items-center justify-between mb-6">
                <h3 className="font-semibold font-['Outfit']">
                  Inventory Management
                </h3>
                <div className="flex gap-2">
                  <Button
                    variant="outline"
                    className="gap-2"
                    onClick={() => handleExportCSV("inventory")}
                  >
                    <FileSpreadsheet className="h-4 w-4" />
                    Export CSV
                  </Button>
                  <Button
                    variant="outline"
                    className="gap-2"
                    onClick={() => handleExportPDF("inventory")}
                  >
                    <FileText className="h-4 w-4" />
                    Export PDF
                  </Button>
                </div>
              </div>

              {/* Filters */}
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                <div className="relative">
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                  <Input
                    placeholder="Search products..."
                    value={inventorySearch}
                    onChange={(e) => {
                      setInventorySearch(e.target.value);
                      setInventoryCurrentPage(1);
                    }}
                    className="pl-9"
                  />
                </div>
                <Select
                  value={inventoryCategory}
                  onValueChange={(v) => {
                    setInventoryCategory(v);
                    setInventoryCurrentPage(1);
                  }}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Filter by category" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Categories</SelectItem>
                    {categories.map((cat) => (
                      <SelectItem key={cat.id} value={cat.name.toLowerCase()}>
                        {cat.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                <Select
                  value={inventoryItemsPerPage.toString()}
                  onValueChange={(v) => {
                    setInventoryItemsPerPage(parseInt(v));
                    setInventoryCurrentPage(1);
                  }}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Items per page" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="10">10 per page</SelectItem>
                    <SelectItem value="20">20 per page</SelectItem>
                    <SelectItem value="50">50 per page</SelectItem>
                    <SelectItem value="100">100 per page</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div className="overflow-x-auto">
                <table className="w-full text-sm">
                  <thead>
                    <tr className="border-b border-border">
                      <th className="text-left py-3 px-2">Product</th>
                      <th className="text-left py-3 px-2">Category</th>
                      <th className="text-right py-3 px-2">Price</th>
                      <th className="text-right py-3 px-2">Stock</th>
                      <th className="text-right py-3 px-2">Threshold</th>
                      <th className="text-center py-3 px-2">Active</th>
                      <th className="text-right py-3 px-2">Actions</th>
                    </tr>
                  </thead>
                  <tbody>
                    {(() => {
                      // Filter inventory
                      let filteredInventory = inventory.filter((product) => {
                        const matchesSearch =
                          inventorySearch === "" ||
                          product.name
                            .toLowerCase()
                            .includes(inventorySearch.toLowerCase()) ||
                          product.brand
                            ?.toLowerCase()
                            .includes(inventorySearch.toLowerCase());
                        const matchesCategory =
                          inventoryCategory === "all" ||
                          product.category === inventoryCategory;
                        return matchesSearch && matchesCategory;
                      });

                      // Pagination
                      const totalPages = Math.ceil(
                        filteredInventory.length / inventoryItemsPerPage
                      );
                      const startIndex =
                        (inventoryCurrentPage - 1) * inventoryItemsPerPage;
                      const endIndex = startIndex + inventoryItemsPerPage;
                      const paginatedInventory = filteredInventory.slice(
                        startIndex,
                        endIndex
                      );

                      return paginatedInventory.map((product) => (
                        <tr
                          key={product.id}
                          className="border-b border-border/50"
                        >
                          <td className="py-3 px-2 font-medium">
                            {product.name}
                          </td>
                          <td className="py-3 px-2 capitalize">
                            {product.category}
                          </td>
                          <td className="py-3 px-2 text-right">
                            ${product.price?.toFixed(2) || "0.00"}
                          </td>
                          <td className="py-3 px-2 text-right">
                            <span
                              className={
                                product.is_low_stock
                                  ? "text-destructive font-semibold"
                                  : ""
                              }
                            >
                              {product.stock}
                            </span>
                          </td>
                          <td className="py-3 px-2 text-right">
                            {product.low_stock_threshold}
                          </td>
                          <td className="py-3 px-2 text-center">
                            <Button
                              size="sm"
                              variant={
                                product.is_active ? "default" : "secondary"
                              }
                              onClick={() => handleToggleActive(product)}
                              className="gap-2"
                            >
                              {product.is_active ? "Active" : "Inactive"}
                            </Button>
                          </td>
                          <td className="py-3 px-2 text-right">
                            <Dialog
                              open={
                                adjustDialog && adjustProduct?.id === product.id
                              }
                              onOpenChange={(open) => {
                                setAdjustDialog(open);
                                if (!open) setAdjustProduct(null);
                              }}
                            >
                              <DialogTrigger asChild>
                                <Button
                                  size="sm"
                                  variant="outline"
                                  onClick={() => {
                                    setAdjustProduct(product);
                                    setAdjustDialog(true);
                                  }}
                                >
                                  Adjust
                                </Button>
                              </DialogTrigger>
                              <DialogContent>
                                <DialogHeader>
                                  <DialogTitle>Adjust Inventory</DialogTitle>
                                </DialogHeader>
                                <div className="space-y-4 py-4">
                                  <p className="text-sm">
                                    Current stock:{" "}
                                    <strong>{adjustProduct?.stock}</strong>
                                  </p>
                                  <div className="space-y-2">
                                    <Label>Quantity Change (+/-)</Label>
                                    <Input
                                      type="number"
                                      value={adjustQty}
                                      onChange={(e) =>
                                        setAdjustQty(
                                          parseInt(e.target.value) || 0
                                        )
                                      }
                                    />
                                  </div>
                                  <div className="space-y-2">
                                    <Label>Notes</Label>
                                    <Textarea
                                      value={adjustNotes}
                                      onChange={(e) =>
                                        setAdjustNotes(e.target.value)
                                      }
                                      placeholder="Reason for adjustment..."
                                    />
                                  </div>
                                </div>
                                <DialogFooter>
                                  <Button onClick={handleAdjustInventory}>
                                    Apply
                                  </Button>
                                </DialogFooter>
                              </DialogContent>
                            </Dialog>
                          </td>
                        </tr>
                      ));
                    })()}
                  </tbody>
                </table>
              </div>

              {/* Pagination Controls */}
              <div className="flex items-center justify-between mt-6 pt-6 border-t border-border">
                <div className="text-sm text-muted-foreground">
                  {(() => {
                    const filtered = inventory.filter((p) => {
                      const matchesSearch =
                        inventorySearch === "" ||
                        p.name
                          .toLowerCase()
                          .includes(inventorySearch.toLowerCase()) ||
                        p.brand
                          ?.toLowerCase()
                          .includes(inventorySearch.toLowerCase());
                      const matchesCategory =
                        inventoryCategory === "all" ||
                        p.category === inventoryCategory;
                      return matchesSearch && matchesCategory;
                    });
                    const start = Math.min(
                      (inventoryCurrentPage - 1) * inventoryItemsPerPage + 1,
                      filtered.length
                    );
                    const end = Math.min(
                      inventoryCurrentPage * inventoryItemsPerPage,
                      filtered.length
                    );
                    return `Showing ${
                      filtered.length === 0 ? 0 : start
                    } - ${end} of ${filtered.length} products`;
                  })()}
                </div>
                <div className="flex items-center gap-2">
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() =>
                      setInventoryCurrentPage((prev) => Math.max(1, prev - 1))
                    }
                    disabled={inventoryCurrentPage === 1}
                  >
                    <ChevronLeft className="h-4 w-4" />
                    Previous
                  </Button>
                  <div className="text-sm">
                    Page {inventoryCurrentPage} of{" "}
                    {Math.max(
                      1,
                      Math.ceil(
                        inventory.filter((p) => {
                          const matchesSearch =
                            inventorySearch === "" ||
                            p.name
                              .toLowerCase()
                              .includes(inventorySearch.toLowerCase()) ||
                            p.brand
                              ?.toLowerCase()
                              .includes(inventorySearch.toLowerCase());
                          const matchesCategory =
                            inventoryCategory === "all" ||
                            p.category === inventoryCategory;
                          return matchesSearch && matchesCategory;
                        }).length / inventoryItemsPerPage
                      )
                    )}
                  </div>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => setInventoryCurrentPage((prev) => prev + 1)}
                    disabled={
                      inventoryCurrentPage >=
                      Math.ceil(
                        inventory.filter((p) => {
                          const matchesSearch =
                            inventorySearch === "" ||
                            p.name
                              .toLowerCase()
                              .includes(inventorySearch.toLowerCase()) ||
                            p.brand
                              ?.toLowerCase()
                              .includes(inventorySearch.toLowerCase());
                          const matchesCategory =
                            inventoryCategory === "all" ||
                            p.category === inventoryCategory;
                          return matchesSearch && matchesCategory;
                        }).length / inventoryItemsPerPage
                      )
                    }
                  >
                    Next
                    <ChevronRight className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            </div>
          </TabsContent>

          {/* Bookings Tab */}
          <TabsContent value="bookings">
            <div className="bg-card border border-border rounded-xl p-6">
              <h3 className="font-semibold font-['Outfit'] mb-6">
                Service Bookings
              </h3>
              <div className="space-y-4">
                {bookings.map((booking) => (
                  <div
                    key={booking.id}
                    className="border border-border rounded-lg p-4"
                  >
                    <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
                      <div className="flex flex-wrap gap-4">
                        <div>
                          <p className="text-xs text-muted-foreground">
                            Service
                          </p>
                          <p className="font-medium">{booking.service_name}</p>
                        </div>
                        <div>
                          <p className="text-xs text-muted-foreground">
                            Customer
                          </p>
                          <p className="text-sm">{booking.name}</p>
                        </div>
                        <div>
                          <p className="text-xs text-muted-foreground">Email</p>
                          <p className="text-sm">{booking.email}</p>
                        </div>
                        <div>
                          <p className="text-xs text-muted-foreground">Phone</p>
                          <p className="text-sm">{booking.phone}</p>
                        </div>
                        <div>
                          <p className="text-xs text-muted-foreground">
                            Preferred Date
                          </p>
                          <p className="text-sm">{booking.preferred_date}</p>
                        </div>
                      </div>
                      <Badge>{booking.status}</Badge>
                    </div>
                    {booking.notes && (
                      <p className="text-sm text-muted-foreground mt-2">
                        Notes: {booking.notes}
                      </p>
                    )}
                  </div>
                ))}
              </div>
            </div>
          </TabsContent>

          {/* Categories Tab */}
          <TabsContent value="categories">
            <div className="bg-card border border-border rounded-xl p-6">
              <div className="flex items-center justify-between mb-6">
                <h3 className="font-semibold font-['Outfit']">
                  Categories Management
                </h3>
                <Dialog open={categoryDialog} onOpenChange={setCategoryDialog}>
                  <DialogTrigger asChild>
                    <Button
                      className="gap-2"
                      onClick={() => {
                        setEditingCategory(null);
                        setCategoryForm({ name: "", description: "" });
                      }}
                    >
                      <Plus className="h-4 w-4" />
                      Add Category
                    </Button>
                  </DialogTrigger>
                  <DialogContent className="max-w-md">
                    <DialogHeader>
                      <DialogTitle>
                        {editingCategory ? "Edit Category" : "Add Category"}
                      </DialogTitle>
                    </DialogHeader>
                    <div className="space-y-4 py-4">
                      <div className="space-y-2">
                        <Label>Name</Label>
                        <Input
                          value={categoryForm.name}
                          onChange={(e) =>
                            setCategoryForm({
                              ...categoryForm,
                              name: e.target.value,
                            })
                          }
                          placeholder="e.g., Phones, Laptops"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label>Description (Optional)</Label>
                        <Textarea
                          value={categoryForm.description}
                          onChange={(e) =>
                            setCategoryForm({
                              ...categoryForm,
                              description: e.target.value,
                            })
                          }
                          placeholder="Brief description of the category"
                        />
                      </div>
                    </div>
                    <DialogFooter>
                      <Button
                        variant="outline"
                        onClick={() => setCategoryDialog(false)}
                      >
                        Cancel
                      </Button>
                      <Button onClick={handleCategorySubmit}>
                        {editingCategory ? "Update" : "Create"}
                      </Button>
                    </DialogFooter>
                  </DialogContent>
                </Dialog>
              </div>

              <div className="overflow-x-auto">
                <table className="w-full text-sm">
                  <thead>
                    <tr className="border-b border-border">
                      <th className="text-left py-3 px-2">Name</th>
                      <th className="text-left py-3 px-2">Description</th>
                      <th className="text-right py-3 px-2">Actions</th>
                    </tr>
                  </thead>
                  <tbody>
                    {categories.map((category) => (
                      <tr
                        key={category.id}
                        className="border-b border-border/50"
                      >
                        <td className="py-3 px-2">
                          <span className="font-medium">{category.name}</span>
                        </td>
                        <td className="py-3 px-2">
                          <span className="text-muted-foreground text-sm">
                            {category.description || "No description"}
                          </span>
                        </td>
                        <td className="py-3 px-2 text-right">
                          <div className="flex justify-end gap-2">
                            <Button
                              size="icon"
                              variant="ghost"
                              onClick={() => {
                                setEditingCategory(category);
                                setCategoryForm({
                                  name: category.name,
                                  description: category.description || "",
                                });
                                setCategoryDialog(true);
                              }}
                            >
                              <Edit className="h-4 w-4" />
                            </Button>
                            <Button
                              size="icon"
                              variant="ghost"
                              className="text-destructive"
                              onClick={() => handleDeleteCategory(category.id)}
                            >
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
                {categories.length === 0 && (
                  <div className="text-center py-12 text-muted-foreground">
                    No categories yet. Create one to get started.
                  </div>
                )}
              </div>
            </div>
          </TabsContent>

          {/* Reports Tab */}
          {/* Users Tab */}
          <TabsContent value="users">
            <div className="space-y-6">
              <div className="bg-card border border-border rounded-xl p-6">
                <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6">
                  <h3 className="font-semibold font-['Outfit']">
                    User Management
                  </h3>
                  <Dialog open={userDialog} onOpenChange={setUserDialog}>
                    <DialogTrigger asChild>
                      <Button
                        onClick={() => {
                          setEditingUser(null);
                          setUserForm({
                            name: "",
                            email: "",
                            password: "",
                            role: "user",
                            is_active: true,
                          });
                        }}
                        className="gap-2"
                      >
                        <Plus className="h-4 w-4" />
                        Add User
                      </Button>
                    </DialogTrigger>
                    <DialogContent className="max-w-md">
                      <DialogHeader>
                        <DialogTitle>
                          {editingUser ? "Edit User" : "Add New User"}
                        </DialogTitle>
                      </DialogHeader>
                      <div className="space-y-4">
                        <div>
                          <Label>Name</Label>
                          <Input
                            value={userForm.name}
                            onChange={(e) =>
                              setUserForm({ ...userForm, name: e.target.value })
                            }
                            placeholder="Enter user name"
                          />
                        </div>
                        <div>
                          <Label>Email</Label>
                          <Input
                            type="email"
                            value={userForm.email}
                            onChange={(e) =>
                              setUserForm({
                                ...userForm,
                                email: e.target.value,
                              })
                            }
                            placeholder="user@example.com"
                          />
                        </div>
                        <div>
                          <Label>
                            Password{" "}
                            {editingUser && "(leave blank to keep current)"}
                          </Label>
                          <Input
                            type="password"
                            value={userForm.password}
                            onChange={(e) =>
                              setUserForm({
                                ...userForm,
                                password: e.target.value,
                              })
                            }
                            placeholder={
                              editingUser
                                ? "Leave blank to keep current password"
                                : "Enter password"
                            }
                          />
                          {editingUser && (
                            <p className="text-xs text-muted-foreground mt-1">
                              Only enter a new password if you want to change it
                            </p>
                          )}
                        </div>
                        <div>
                          <Label>Role</Label>
                          <Select
                            value={userForm.role}
                            onValueChange={(value) =>
                              setUserForm({ ...userForm, role: value })
                            }
                          >
                            <SelectTrigger>
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="user">User</SelectItem>
                              <SelectItem value="admin">Admin</SelectItem>
                              <SelectItem value="employee">Employee</SelectItem>
                              <SelectItem value="accountant">
                                Accountant
                              </SelectItem>
                              <SelectItem value="sales_manager">
                                Sales Manager
                              </SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                        <div className="flex items-center space-x-2">
                          <input
                            type="checkbox"
                            id="is_active"
                            checked={userForm.is_active}
                            onChange={(e) =>
                              setUserForm({
                                ...userForm,
                                is_active: e.target.checked,
                              })
                            }
                            className="h-4 w-4 rounded border-gray-300"
                          />
                          <Label htmlFor="is_active">Active Account</Label>
                        </div>
                      </div>
                      <DialogFooter>
                        <Button
                          variant="outline"
                          onClick={() => {
                            setUserDialog(false);
                            setEditingUser(null);
                          }}
                        >
                          Cancel
                        </Button>
                        <Button onClick={handleUserSubmit}>
                          {editingUser ? "Update" : "Create"} User
                        </Button>
                      </DialogFooter>
                    </DialogContent>
                  </Dialog>
                </div>

                {/* Filters */}
                <div className="flex flex-col md:flex-row gap-4 mb-6">
                  <div className="flex-1">
                    <div className="relative">
                      <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                      <Input
                        placeholder="Search by name or email..."
                        value={userSearch}
                        onChange={(e) => setUserSearch(e.target.value)}
                        className="pl-10"
                      />
                    </div>
                  </div>
                  <Select
                    value={userRoleFilter || undefined}
                    onValueChange={(value) =>
                      setUserRoleFilter(value === "all" ? "" : value)
                    }
                  >
                    <SelectTrigger className="w-full md:w-[180px]">
                      <SelectValue placeholder="All Roles" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">All Roles</SelectItem>
                      <SelectItem value="user">User</SelectItem>
                      <SelectItem value="admin">Admin</SelectItem>
                      <SelectItem value="employee">Employee</SelectItem>
                      <SelectItem value="accountant">Accountant</SelectItem>
                      <SelectItem value="sales_manager">
                        Sales Manager
                      </SelectItem>
                    </SelectContent>
                  </Select>
                  <Select
                    value={userStatusFilter || undefined}
                    onValueChange={(value) =>
                      setUserStatusFilter(value === "all" ? "" : value)
                    }
                  >
                    <SelectTrigger className="w-full md:w-[180px]">
                      <SelectValue placeholder="All Status" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">All Status</SelectItem>
                      <SelectItem value="active">Active</SelectItem>
                      <SelectItem value="inactive">Inactive</SelectItem>
                    </SelectContent>
                  </Select>
                  <Button
                    variant="outline"
                    onClick={fetchUsers}
                    className="gap-2"
                  >
                    <RefreshCw className="h-4 w-4" />
                    Apply
                  </Button>
                </div>

                {/* Users Table */}
                <div className="overflow-x-auto">
                  <table className="w-full">
                    <thead className="border-b">
                      <tr>
                        <th className="text-left p-3 font-medium">Name</th>
                        <th className="text-left p-3 font-medium">Email</th>
                        <th className="text-left p-3 font-medium">Role</th>
                        <th className="text-left p-3 font-medium">Status</th>
                        <th className="text-left p-3 font-medium">Created</th>
                        <th className="text-right p-3 font-medium">Actions</th>
                      </tr>
                    </thead>
                    <tbody>
                      {users.map((user) => (
                        <tr
                          key={user.id}
                          className="border-b hover:bg-muted/50"
                        >
                          <td className="p-3">{user.name}</td>
                          <td className="p-3">{user.email}</td>
                          <td className="p-3">
                            <Badge variant="outline" className="capitalize">
                              {user.role.replace("_", " ")}
                            </Badge>
                          </td>
                          <td className="p-3">
                            <Badge
                              variant={user.is_active ? "default" : "secondary"}
                            >
                              {user.is_active ? "Active" : "Inactive"}
                            </Badge>
                          </td>
                          <td className="p-3">
                            {new Date(user.created_at).toLocaleDateString()}
                          </td>
                          <td className="p-3">
                            <div className="flex justify-end gap-2">
                              <Button
                                size="sm"
                                variant="outline"
                                onClick={() => handleToggleUserActive(user.id)}
                                title={
                                  user.is_active ? "Deactivate" : "Activate"
                                }
                              >
                                {user.is_active ? "Deactivate" : "Activate"}
                              </Button>
                              <Button
                                size="sm"
                                variant="ghost"
                                onClick={() => {
                                  setEditingUser(user);
                                  setUserForm({
                                    name: user.name,
                                    email: user.email,
                                    password: "",
                                    role: user.role,
                                    is_active: user.is_active,
                                  });
                                  setUserDialog(true);
                                }}
                              >
                                <Edit className="h-4 w-4" />
                              </Button>
                              <Button
                                size="sm"
                                variant="ghost"
                                className="text-destructive hover:text-destructive"
                                onClick={() => {
                                  if (
                                    window.confirm(
                                      `Are you sure you want to delete ${user.name}?`
                                    )
                                  ) {
                                    handleDeleteUser(user.id);
                                  }
                                }}
                              >
                                <Trash2 className="h-4 w-4" />
                              </Button>
                            </div>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>

                {/* Pagination */}
                <div className="flex flex-col md:flex-row items-center justify-between gap-4 mt-6 pt-6 border-t">
                  <div className="flex items-center gap-2">
                    <span className="text-sm text-muted-foreground">
                      Items per page:
                    </span>
                    <Select
                      value={usersPerPage.toString()}
                      onValueChange={(value) => {
                        setUsersPerPage(parseInt(value));
                        setCurrentUsersPage(1);
                      }}
                    >
                      <SelectTrigger className="w-[80px]">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="10">10</SelectItem>
                        <SelectItem value="20">20</SelectItem>
                        <SelectItem value="50">50</SelectItem>
                        <SelectItem value="100">100</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  <div className="flex items-center gap-2">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() =>
                        setCurrentUsersPage((p) => Math.max(1, p - 1))
                      }
                      disabled={currentUsersPage === 1}
                    >
                      <ChevronLeft className="h-4 w-4" />
                      Previous
                    </Button>
                    <span className="text-sm text-muted-foreground px-4">
                      Page {currentUsersPage} of{" "}
                      {Math.ceil(usersTotal / usersPerPage) || 1}
                    </span>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() =>
                        setCurrentUsersPage((p) =>
                          Math.min(Math.ceil(usersTotal / usersPerPage), p + 1)
                        )
                      }
                      disabled={
                        currentUsersPage >= Math.ceil(usersTotal / usersPerPage)
                      }
                    >
                      Next
                      <ChevronRight className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              </div>
            </div>
          </TabsContent>

          <TabsContent value="reports">
            <div className="space-y-6">
              <div className="bg-card border border-border rounded-xl p-6">
                <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6">
                  <h3 className="font-semibold font-['Outfit']">
                    Sales Reports
                  </h3>
                  <div className="flex gap-2">
                    <Select
                      value={reportPeriod}
                      onValueChange={(v) => {
                        setReportPeriod(v);
                        setTimeout(fetchReports, 100);
                      }}
                    >
                      <SelectTrigger className="w-[150px]">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="daily">Daily</SelectItem>
                        <SelectItem value="weekly">Weekly</SelectItem>
                        <SelectItem value="monthly">Monthly</SelectItem>
                      </SelectContent>
                    </Select>
                    <Button
                      variant="outline"
                      className="gap-2"
                      onClick={() => handleExportCSV("sales")}
                    >
                      <FileSpreadsheet className="h-4 w-4" />
                      CSV
                    </Button>
                    <Button
                      variant="outline"
                      className="gap-2"
                      onClick={() => handleExportPDF("sales")}
                    >
                      <FileText className="h-4 w-4" />
                      PDF
                    </Button>
                  </div>
                </div>

                {salesReport && (
                  <>
                    {/* Summary */}
                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                      <div className="bg-muted rounded-lg p-4">
                        <p className="text-sm text-muted-foreground">
                          Total Orders
                        </p>
                        <p className="text-2xl font-bold">
                          {salesReport.summary.total_orders}
                        </p>
                      </div>
                      <div className="bg-muted rounded-lg p-4">
                        <p className="text-sm text-muted-foreground">
                          Total Revenue
                        </p>
                        <p className="text-2xl font-bold">
                          ${salesReport.summary.total_revenue.toFixed(2)}
                        </p>
                      </div>
                      <div className="bg-muted rounded-lg p-4">
                        <p className="text-sm text-muted-foreground">
                          Products Sold
                        </p>
                        <p className="text-2xl font-bold">
                          {salesReport.summary.total_products_sold}
                        </p>
                      </div>
                      <div className="bg-muted rounded-lg p-4">
                        <p className="text-sm text-muted-foreground">
                          Avg Order Value
                        </p>
                        <p className="text-2xl font-bold">
                          ${salesReport.summary.average_order_value.toFixed(2)}
                        </p>
                      </div>
                    </div>

                    {/* Data Table */}
                    <div className="overflow-x-auto">
                      <table className="w-full text-sm">
                        <thead>
                          <tr className="border-b border-border">
                            <th className="text-left py-3 px-2">Period</th>
                            <th className="text-right py-3 px-2">Orders</th>
                            <th className="text-right py-3 px-2">Revenue</th>
                            <th className="text-right py-3 px-2">
                              Products Sold
                            </th>
                            <th className="text-right py-3 px-2">
                              Services Booked
                            </th>
                          </tr>
                        </thead>
                        <tbody>
                          {salesReport.data.map((row, idx) => (
                            <tr key={idx} className="border-b border-border/50">
                              <td className="py-3 px-2">{row.period}</td>
                              <td className="py-3 px-2 text-right">
                                {row.orders}
                              </td>
                              <td className="py-3 px-2 text-right">
                                ${row.revenue.toFixed(2)}
                              </td>
                              <td className="py-3 px-2 text-right">
                                {row.products_sold}
                              </td>
                              <td className="py-3 px-2 text-right">
                                {row.services_booked || 0}
                              </td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  </>
                )}
              </div>
            </div>
          </TabsContent>

          {/* About Page Tab */}
          <TabsContent value="about">
            <div className="space-y-6">
              {/* Hero/Story Content Section */}
              <div className="bg-card border border-border rounded-xl p-6">
                <div className="flex items-center justify-between mb-6">
                  <h3 className="font-semibold font-['Outfit']">
                    Page Content
                  </h3>
                  <Button
                    onClick={() => {
                      setAboutEditType("content");
                      setEditingAboutItem(null);
                      setAboutForm({
                        section: "hero",
                        title: "",
                        subtitle: "",
                        content: "",
                        image_url: "",
                        data: null,
                        display_order: 0,
                        is_active: true,
                      });
                      setAboutDialog(true);
                    }}
                    className="gap-2"
                  >
                    <Plus className="h-4 w-4" />
                    Add Content Section
                  </Button>
                </div>
                <div className="space-y-3">
                  {aboutContent.map((item) => (
                    <div
                      key={item.id}
                      className="flex items-center justify-between p-4 bg-muted rounded-lg"
                    >
                      <div className="flex-1">
                        <div className="flex items-center gap-2">
                          <Badge variant="outline">{item.section}</Badge>
                          <h4 className="font-medium">
                            {item.title || "No title"}
                          </h4>
                          {!item.is_active && (
                            <Badge variant="secondary">Inactive</Badge>
                          )}
                        </div>
                        {item.subtitle && (
                          <p className="text-sm text-muted-foreground mt-1">
                            {item.subtitle}
                          </p>
                        )}
                      </div>
                      <div className="flex gap-2">
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => {
                            setAboutEditType("content");
                            setEditingAboutItem(item);
                            setAboutForm({
                              section: item.section,
                              title: item.title || "",
                              subtitle: item.subtitle || "",
                              content: item.content || "",
                              image_url: item.image_url || "",
                              data: item.data,
                              display_order: item.display_order,
                              is_active: item.is_active,
                            });
                            setAboutDialog(true);
                          }}
                        >
                          <Edit className="h-4 w-4" />
                        </Button>
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() =>
                            handleDeleteAboutItem(item.id, "content")
                          }
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  ))}
                  {aboutContent.length === 0 && (
                    <p className="text-center text-muted-foreground py-8">
                      No content sections yet. Add your first section!
                    </p>
                  )}
                </div>
              </div>

              {/* Team Members Section */}
              <div className="bg-card border border-border rounded-xl p-6">
                <div className="flex items-center justify-between mb-6">
                  <h3 className="font-semibold font-['Outfit']">
                    Team Members
                  </h3>
                  <Button
                    onClick={() => {
                      setAboutEditType("team");
                      setEditingAboutItem(null);
                      setAboutForm({
                        name: "",
                        role: "",
                        bio: "",
                        image_url: "",
                        email: "",
                        linkedin: "",
                        display_order: 0,
                        is_active: true,
                      });
                      setAboutDialog(true);
                    }}
                    className="gap-2"
                  >
                    <Plus className="h-4 w-4" />
                    Add Team Member
                  </Button>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                  {teamMembers.map((member) => (
                    <div
                      key={member.id}
                      className="border border-border rounded-lg p-4 space-y-3"
                    >
                      {member.image_url && (
                        <img
                          src={member.image_url}
                          alt={member.name}
                          className="w-full h-48 object-cover rounded-lg"
                        />
                      )}
                      <div>
                        <div className="flex items-center gap-2">
                          <h4 className="font-medium">{member.name}</h4>
                          {!member.is_active && (
                            <Badge variant="secondary" className="text-xs">
                              Inactive
                            </Badge>
                          )}
                        </div>
                        <p className="text-sm text-muted-foreground">
                          {member.role}
                        </p>
                      </div>
                      <div className="flex gap-2">
                        <Button
                          variant="outline"
                          size="sm"
                          className="flex-1"
                          onClick={() => {
                            setAboutEditType("team");
                            setEditingAboutItem(member);
                            setAboutForm({
                              name: member.name,
                              role: member.role,
                              bio: member.bio || "",
                              image_url: member.image_url || "",
                              email: member.email || "",
                              linkedin: member.linkedin || "",
                              display_order: member.display_order,
                              is_active: member.is_active,
                            });
                            setAboutDialog(true);
                          }}
                        >
                          <Edit className="h-4 w-4 mr-1" />
                          Edit
                        </Button>
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() =>
                            handleDeleteAboutItem(member.id, "team")
                          }
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
                {teamMembers.length === 0 && (
                  <p className="text-center text-muted-foreground py-8">
                    No team members yet. Add your first team member!
                  </p>
                )}
              </div>

              {/* Company Values Section */}
              <div className="bg-card border border-border rounded-xl p-6">
                <div className="flex items-center justify-between mb-6">
                  <h3 className="font-semibold font-['Outfit']">
                    Company Values
                  </h3>
                  <Button
                    onClick={() => {
                      setAboutEditType("value");
                      setEditingAboutItem(null);
                      setAboutForm({
                        title: "",
                        description: "",
                        icon: "",
                        display_order: 0,
                        is_active: true,
                      });
                      setAboutDialog(true);
                    }}
                    className="gap-2"
                  >
                    <Plus className="h-4 w-4" />
                    Add Value
                  </Button>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {companyValues.map((value) => (
                    <div
                      key={value.id}
                      className="border border-border rounded-lg p-4 space-y-2"
                    >
                      <div className="flex items-start justify-between">
                        <div className="flex-1">
                          <div className="flex items-center gap-2">
                            {value.icon && (
                              <span className="text-2xl">{value.icon}</span>
                            )}
                            <h4 className="font-medium">{value.title}</h4>
                            {!value.is_active && (
                              <Badge variant="secondary" className="text-xs">
                                Inactive
                              </Badge>
                            )}
                          </div>
                          <p className="text-sm text-muted-foreground mt-2">
                            {value.description}
                          </p>
                        </div>
                      </div>
                      <div className="flex gap-2 pt-2">
                        <Button
                          variant="outline"
                          size="sm"
                          className="flex-1"
                          onClick={() => {
                            setAboutEditType("value");
                            setEditingAboutItem(value);
                            setAboutForm({
                              title: value.title,
                              description: value.description,
                              icon: value.icon,
                              display_order: value.display_order,
                              is_active: value.is_active,
                            });
                            setAboutDialog(true);
                          }}
                        >
                          <Edit className="h-4 w-4 mr-1" />
                          Edit
                        </Button>
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() =>
                            handleDeleteAboutItem(value.id, "value")
                          }
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
                {companyValues.length === 0 && (
                  <p className="text-center text-muted-foreground py-8">
                    No company values yet. Add your first value!
                  </p>
                )}
              </div>
            </div>
          </TabsContent>
        </Tabs>
      </div>

      {/* About Page Dialog */}
      <Dialog open={aboutDialog} onOpenChange={setAboutDialog}>
        <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>
              {editingAboutItem ? "Edit" : "Add"}{" "}
              {aboutEditType === "content" && "Content Section"}
              {aboutEditType === "team" && "Team Member"}
              {aboutEditType === "value" && "Company Value"}
            </DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            {/* Content Section Form */}
            {aboutEditType === "content" && (
              <>
                <div>
                  <Label>Section</Label>
                  <Select
                    value={aboutForm.section}
                    onValueChange={(v) =>
                      setAboutForm({ ...aboutForm, section: v })
                    }
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Select section" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="hero">Hero</SelectItem>
                      <SelectItem value="story">Our Story</SelectItem>
                      <SelectItem value="stats">Statistics</SelectItem>
                      <SelectItem value="mission">Mission</SelectItem>
                      <SelectItem value="vision">Vision</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div>
                  <Label>Title</Label>
                  <Input
                    value={aboutForm.title}
                    onChange={(e) =>
                      setAboutForm({ ...aboutForm, title: e.target.value })
                    }
                  />
                </div>
                <div>
                  <Label>Subtitle</Label>
                  <Input
                    value={aboutForm.subtitle}
                    onChange={(e) =>
                      setAboutForm({ ...aboutForm, subtitle: e.target.value })
                    }
                  />
                </div>
                <div>
                  <Label>Content (HTML)</Label>
                  <RichTextEditor
                    value={aboutForm.content}
                    onChange={(html) =>
                      setAboutForm({ ...aboutForm, content: html })
                    }
                  />
                </div>
                <div>
                  <Label>Image</Label>
                  <ImageUploadManager
                    images={aboutForm.image_url ? [aboutForm.image_url] : []}
                    onChange={(imgs) =>
                      setAboutForm({ ...aboutForm, image_url: imgs[0] || "" })
                    }
                    token={token}
                  />
                </div>
              </>
            )}

            {/* Team Member Form */}
            {aboutEditType === "team" && (
              <>
                <div>
                  <Label>Name*</Label>
                  <Input
                    value={aboutForm.name}
                    onChange={(e) =>
                      setAboutForm({ ...aboutForm, name: e.target.value })
                    }
                    required
                  />
                </div>
                <div>
                  <Label>Role*</Label>
                  <Input
                    value={aboutForm.role}
                    onChange={(e) =>
                      setAboutForm({ ...aboutForm, role: e.target.value })
                    }
                    required
                  />
                </div>
                <div>
                  <Label>Bio (HTML)</Label>
                  <RichTextEditor
                    value={aboutForm.bio}
                    onChange={(html) =>
                      setAboutForm({ ...aboutForm, bio: html })
                    }
                  />
                </div>
                <div>
                  <Label>Email</Label>
                  <Input
                    type="email"
                    value={aboutForm.email}
                    onChange={(e) =>
                      setAboutForm({ ...aboutForm, email: e.target.value })
                    }
                  />
                </div>
                <div>
                  <Label>LinkedIn URL</Label>
                  <Input
                    value={aboutForm.linkedin}
                    onChange={(e) =>
                      setAboutForm({ ...aboutForm, linkedin: e.target.value })
                    }
                    placeholder="https://linkedin.com/in/..."
                  />
                </div>
                <div>
                  <Label>Profile Image</Label>
                  <ImageUploadManager
                    images={aboutForm.image_url ? [aboutForm.image_url] : []}
                    onChange={(imgs) =>
                      setAboutForm({ ...aboutForm, image_url: imgs[0] || "" })
                    }
                    token={token}
                  />
                </div>
              </>
            )}

            {/* Company Value Form */}
            {aboutEditType === "value" && (
              <>
                <div>
                  <Label>Title*</Label>
                  <Input
                    value={aboutForm.title}
                    onChange={(e) =>
                      setAboutForm({ ...aboutForm, title: e.target.value })
                    }
                    required
                  />
                </div>
                <div>
                  <Label>Description*</Label>
                  <Textarea
                    value={aboutForm.description}
                    onChange={(e) =>
                      setAboutForm({
                        ...aboutForm,
                        description: e.target.value,
                      })
                    }
                    rows={3}
                    required
                  />
                </div>
                <div>
                  <Label>Icon (emoji or icon name)</Label>
                  <Input
                    value={aboutForm.icon}
                    onChange={(e) =>
                      setAboutForm({ ...aboutForm, icon: e.target.value })
                    }
                    placeholder="💡 or icon-name"
                  />
                </div>
              </>
            )}

            {/* Common fields */}
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label>Display Order</Label>
                <Input
                  type="number"
                  value={aboutForm.display_order}
                  onChange={(e) =>
                    setAboutForm({
                      ...aboutForm,
                      display_order: parseInt(e.target.value) || 0,
                    })
                  }
                />
              </div>
              <div className="flex items-center gap-2 pt-6">
                <input
                  type="checkbox"
                  checked={aboutForm.is_active}
                  onChange={(e) =>
                    setAboutForm({ ...aboutForm, is_active: e.target.checked })
                  }
                  className="h-4 w-4"
                />
                <Label>Active</Label>
              </div>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setAboutDialog(false)}>
              Cancel
            </Button>
            <Button onClick={handleSaveAboutItem}>Save</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Delete Confirmation Dialog */}
      <AlertDialog open={deleteConfirmOpen} onOpenChange={setDeleteConfirmOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Delete Product</AlertDialogTitle>
            <AlertDialogDescription>
              Are you sure you want to delete{" "}
              <span className="font-semibold text-foreground">
                "{productToDelete?.name}"
              </span>
              ? This action cannot be undone. The product will be removed from
              the database and will no longer be available to customers.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel onClick={() => setProductToDelete(null)}>
              Cancel
            </AlertDialogCancel>
            <AlertDialogAction
              onClick={handleDeleteProduct}
              className="bg-destructive hover:bg-destructive/90"
            >
              Delete Product
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
};

export default AdminDashboard;