import Link from "next/link"
import { fetchQuery } from "convex/nextjs"
import { Button } from "@/components/ui/button"
import { api } from "@/convex/_generated/api"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import {
  ShoppingCart,
  Package,
  Users,
  TrendingUp,
  DollarSign,
  Clock,
  CheckCircle,
  Truck,
  AlertTriangle,
  Settings,
  BarChart3,
  Phone,
  MessageSquare,
  ContactRound,
} from "lucide-react"
import { fetchAllProducts } from "@/lib/stripe/products"

// Mock analytics data for demo
const mockAnalytics = {
  totalOrders: 156,
  totalRevenue: 48567.89,
  pendingOrders: 12,
  completedOrders: 144,
  lowStockProducts: 3,
  avgOrderValue: 311.46,
  conversionRate: 2.8,
  monthlyGrowth: 15.2,
}

async function getProductsCount() {
  try {
    const products = await fetchAllProducts()
    return products.length
  } catch {
    return 0
  }
}

async function getOrdersCount() {
  try {
    const response = await fetch("/api/orders")
    if (response.ok) {
      const data = await response.json()
      return data.pagination.total || 0
    }
  } catch {}
  return mockAnalytics.totalOrders
}

function formatTimestamp(value?: number | null) {
  if (!value) {
    return "—"
  }

  return new Date(value).toLocaleString("en-US", {
    month: "short",
    day: "numeric",
    year: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  })
}

export default async function AdminDashboard() {
  const [productsCount, ordersCount, sync] = await Promise.all([
    getProductsCount(),
    getOrdersCount(),
    fetchQuery(api.crm.getAdminSyncOverview, {}),
  ])

  const dashboardCards = [
    {
      title: "Total Revenue",
      value: `$${mockAnalytics.totalRevenue.toLocaleString()}`,
      description: "Total revenue from all orders",
      icon: DollarSign,
      trend: "+15.2%",
      trendPositive: true,
      color: "text-green-600",
    },
    {
      title: "Total Orders",
      value: mockAnalytics.totalOrders.toString(),
      description: "Total number of orders",
      icon: ShoppingCart,
      trend: "+12.8%",
      trendPositive: true,
      color: "text-blue-600",
    },
    {
      title: "Products",
      value: productsCount.toString(),
      description: "Active products in inventory",
      icon: Package,
      trend: "+5",
      trendPositive: true,
      color: "text-purple-600",
    },
    {
      title: "Pending Orders",
      value: mockAnalytics.pendingOrders.toString(),
      description: "Orders awaiting processing",
      icon: Clock,
      trend: "-3",
      trendPositive: false,
      color: "text-orange-600",
    },
  ]

  const quickStats = [
    {
      title: "Average Order Value",
      value: `$${mockAnalytics.avgOrderValue.toFixed(2)}`,
      description: "Average value per order",
      icon: TrendingUp,
    },
    {
      title: "Conversion Rate",
      value: `${mockAnalytics.conversionRate}%`,
      description: "Visitors to orders ratio",
      icon: Users,
    },
    {
      title: "Monthly Growth",
      value: `${mockAnalytics.monthlyGrowth}%`,
      description: "Revenue growth this month",
      icon: BarChart3,
    },
    {
      title: "Low Stock Alert",
      value: mockAnalytics.lowStockProducts.toString(),
      description: "Products need restocking",
      icon: AlertTriangle,
    },
  ]

  const recentOrders = [
    {
      id: "ORD-001234",
      customer: "john.doe@email.com",
      amount: 2799.98,
      status: "paid",
      date: "2024-01-15 10:30",
    },
    {
      id: "ORD-001233",
      customer: "jane.smith@email.com",
      amount: 1499.99,
      status: "fulfilled",
      date: "2024-01-15 09:45",
    },
    {
      id: "ORD-001232",
      customer: "bob.johnson@email.com",
      amount: 899.97,
      status: "pending",
      date: "2024-01-15 08:20",
    },
    {
      id: "ORD-001231",
      customer: "alice.wilson@email.com",
      amount: 3499.99,
      status: "cancelled",
      date: "2024-01-14 16:15",
    },
  ]

  const popularProducts = [
    {
      name: "SEAGA HY900 Vending Machine",
      orders: 45,
      revenue: 112499.55,
    },
    {
      name: "Vending Machine Stand",
      orders: 38,
      revenue: 11399.62,
    },
    {
      name: "Snack Vending Machine Combo",
      orders: 23,
      revenue: 45999.77,
    },
    {
      name: "Drink Vending Machine",
      orders: 19,
      revenue: 37999.81,
    },
  ]

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="space-y-8">
        {/* Header */}
        <div className="flex justify-between items-start">
          <div>
            <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-balance">
              Admin Dashboard
            </h1>
            <p className="text-muted-foreground mt-2">
              Manage orders, contacts, conversations, and calls
            </p>
          </div>
          <div className="flex gap-2">
            <Link href="/admin/contacts">
              <Button variant="outline">
                <ContactRound className="h-4 w-4 mr-2" />
                Contacts
              </Button>
            </Link>
            <Link href="/admin/conversations">
              <Button variant="outline">
                <MessageSquare className="h-4 w-4 mr-2" />
                Conversations
              </Button>
            </Link>
            <Link href="/admin/calls">
              <Button variant="outline">
                <Phone className="h-4 w-4 mr-2" />
                Phone Calls
              </Button>
            </Link>
            <Link href="/admin/products">
              <Button variant="outline">
                <Settings className="h-4 w-4 mr-2" />
                Settings
              </Button>
            </Link>
            <Button>Export Report</Button>
          </div>
        </div>

        <Card>
          <CardHeader>
            <CardTitle>CRM Sync Status</CardTitle>
            <CardDescription>
              {!sync.ghlConfigured
                ? "Connect GHL to load contacts and conversations."
                : "Customer data is mirrored here from GHL and your call flows."}
            </CardDescription>
          </CardHeader>
          <CardContent className="flex flex-wrap gap-3 text-sm text-muted-foreground">
            <Badge variant="outline">{sync.overallStatus}</Badge>
            <span>Last sync: {formatTimestamp(sync.latestSyncAt)}</span>
            {!sync.ghlConfigured ? <span>GHL is not connected.</span> : null}
            {!sync.syncTokenConfigured ? (
              <span>Manual sync endpoint is not configured yet.</span>
            ) : null}
            {!sync.livekitConfigured ? (
              <span>LiveKit recordings are not connected yet.</span>
            ) : null}
          </CardContent>
        </Card>

        {/* Main Stats */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {dashboardCards.map((card, index) => {
            const Icon = card.icon
            return (
              <Card key={index}>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">
                    {card.title}
                  </CardTitle>
                  <Icon className="h-4 w-4 text-muted-foreground" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">{card.value}</div>
                  <div className="flex items-center gap-1 mt-2">
                    <span className={`text-sm ${card.color}`}>
                      {card.trend} {card.trendPositive ? "↑" : "↓"}
                    </span>
                    <span className="text-sm text-muted-foreground">
                      from last month
                    </span>
                  </div>
                  <p className="text-xs text-muted-foreground mt-2">
                    {card.description}
                  </p>
                </CardContent>
              </Card>
            )
          })}
        </div>

        {/* Quick Stats */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {quickStats.map((stat, index) => {
            const Icon = stat.icon
            return (
              <Card key={index}>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">
                    {stat.title}
                  </CardTitle>
                  <Icon className="h-4 w-4 text-muted-foreground" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">{stat.value}</div>
                  <p className="text-xs text-muted-foreground mt-2">
                    {stat.description}
                  </p>
                </CardContent>
              </Card>
            )
          })}
        </div>

        {/* Main Content Grid */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {/* Recent Orders */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center justify-between">
                Recent Orders
                <Link href="/admin/orders">
                  <Button variant="outline" size="sm">
                    View All
                  </Button>
                </Link>
              </CardTitle>
              <CardDescription>
                Latest customer orders and their status
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {recentOrders.map((order) => (
                  <div
                    key={order.id}
                    className="flex items-center justify-between py-3 border-b last:border-b-0"
                  >
                    <div className="flex items-center gap-3">
                      <div className="min-w-0 flex-1">
                        <div className="font-medium">{order.id}</div>
                        <div className="text-sm text-muted-foreground truncate max-w-[150px]">
                          {order.customer}
                        </div>
                        <div className="text-xs text-muted-foreground">
                          {order.date}
                        </div>
                      </div>
                    </div>
                    <div className="text-right">
                      <div className="font-medium">
                        ${order.amount.toFixed(2)}
                      </div>
                      <Badge
                        variant={
                          order.status === "paid"
                            ? "default"
                            : order.status === "fulfilled"
                              ? "default"
                              : order.status === "pending"
                                ? "secondary"
                                : "destructive"
                        }
                        className="mt-1"
                      >
                        {order.status.charAt(0).toUpperCase() +
                          order.status.slice(1)}
                      </Badge>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

          {/* Popular Products */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center justify-between">
                Popular Products
                <Link href="/admin/products">
                  <Button variant="outline" size="sm">
                    View All
                  </Button>
                </Link>
              </CardTitle>
              <CardDescription>Top-selling products this month</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {popularProducts.map((product, index) => (
                  <div
                    key={index}
                    className="flex items-center justify-between py-3 border-b last:border-b-0"
                  >
                    <div className="flex items-center gap-3">
                      <div className="w-8 h-8 rounded-md bg-muted flex items-center justify-center text-xs font-bold text-muted-foreground">
                        {index + 1}
                      </div>
                      <div className="min-w-0">
                        <div className="font-medium truncate max-w-[200px]">
                          {product.name}
                        </div>
                        <div className="text-sm text-muted-foreground">
                          {product.orders} orders
                        </div>
                      </div>
                    </div>
                    <div className="text-right">
                      <div className="font-medium">
                        ${product.revenue.toLocaleString()}
                      </div>
                      <div className="text-xs text-muted-foreground">
                        ${(product.revenue / product.orders).toFixed(2)} avg
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Quick Actions */}
        <Card>
          <CardHeader>
            <CardTitle>Quick Actions</CardTitle>
            <CardDescription>
              Common administrative tasks and operations
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
              <Link href="/admin/orders">
                <Card className="h-full cursor-pointer hover:shadow-md transition-shadow">
                  <CardContent className="p-6 flex flex-col items-center text-center">
                    <ShoppingCart className="h-8 w-8 text-blue-600 mb-3" />
                    <h3 className="font-medium mb-1">Manage Orders</h3>
                    <p className="text-sm text-muted-foreground">
                      View and process customer orders
                    </p>
                  </CardContent>
                </Card>
              </Link>

              <Link href="/admin/products">
                <Card className="h-full cursor-pointer hover:shadow-md transition-shadow">
                  <CardContent className="p-6 flex flex-col items-center text-center">
                    <Package className="h-8 w-8 text-purple-600 mb-3" />
                    <h3 className="font-medium mb-1">Manage Products</h3>
                    <p className="text-sm text-muted-foreground">
                      Add and update product inventory
                    </p>
                  </CardContent>
                </Card>
              </Link>

              <Link href="/orders">
                <Card className="h-full cursor-pointer hover:shadow-md transition-shadow">
                  <CardContent className="p-6 flex flex-col items-center text-center">
                    <Truck className="h-8 w-8 text-green-600 mb-3" />
                    <h3 className="font-medium mb-1">Track Shipments</h3>
                    <p className="text-sm text-muted-foreground">
                      Monitor order shipments and deliveries
                    </p>
                  </CardContent>
                </Card>
              </Link>

              <Card className="h-full hover:shadow-md transition-shadow">
                <CardContent className="p-6 flex flex-col items-center text-center">
                  <CheckCircle className="h-8 w-8 text-orange-600 mb-3" />
                  <h3 className="font-medium mb-1">Reports</h3>
                  <p className="text-sm text-muted-foreground">
                    Generate sales and analytics reports
                  </p>
                </CardContent>
              </Card>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}

export const metadata = {
  title: "Admin Dashboard | Rocky Mountain Vending",
  description:
    "Administrative dashboard for managing your vending machine business",
}