"use client"

import { useState, useEffect } from "react"
import OrderStats from "./order-stats"
import { getGreeting } from "@/lib/utils"
import { statsConfig } from "@/config/dashboard"
import type { OrderStatsData } from "@/lib/types"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { ShoppingCart } from "lucide-react"

interface ContentProps {
  username: string
  orderStats: OrderStatsData
}

interface TopProduct {
  id: string;
  name: string;
  price: number;
  image: string;
  count: number;
  revenue: number;
}

export default function Content({ username, orderStats }: ContentProps) {
  const [greeting, setGreeting] = useState("")
  const [topProducts, setTopProducts] = useState<TopProduct[]>([])
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    setGreeting(getGreeting())
    
    // Fetch top products for the vendor
    const fetchTopProducts = async () => {
      try {
        // Check if we're in development or production
        const isDev = process.env.NODE_ENV === 'development';
        // Use the internal API URL seen in the console
        const apiBaseUrl = 'https://internal-api.inboxi.ng/api';
        
        console.log('Using API URL:', apiBaseUrl);
        
        // Get the auth token from cookies
        const cookies = document.cookie.split(';');
        console.log('Cookies:', cookies);
        const tokenCookie = cookies.find(cookie => cookie.trim().startsWith('Authorization='));
        let token = '';
        
        if (tokenCookie) {
          // Extract just the token value after "Authorization="
          token = tokenCookie.trim().substring(14); // 'Authorization='.length is 14
          
          // Fix any potential malformed token (seen in your screenshot)
          if (token.startsWith('ization=')) {
            token = token.substring(9); // Remove the 'ization=' prefix if present
          }
        }
        
        console.log('Using token:', token);
        
        const headers = {
          'Authorization': `Bearer ${token}`
        };
        console.log('Request headers:', headers);
        
        const response = await fetch(`${apiBaseUrl}/orders/top-products`, {
          credentials: 'include',
          headers
        });
        
        if (response.ok) {
          const data = await response.json();
          setTopProducts(data);
        } else {
          const errorText = await response.text();
          console.error(`Failed to fetch top products: ${response.status} ${response.statusText}`);
          console.error('Error details:', errorText);
        }
      } catch (error) {
        console.error("Error fetching top products:", error);
      } finally {
        setIsLoading(false);
      }
    };
    
    fetchTopProducts();
  }, [])

  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-semibold text-foreground">
        {greeting}, {username}!
      </h1>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {statsConfig.map((stat) => (
          <OrderStats
            key={stat.title}
            title={stat.title}
            value={orderStats[stat.key as keyof OrderStatsData].toLocaleString()}
            icon={stat.icon}
          />
        ))}
      </div>

      {/* Best Selling Products Section */}
      <div className="mt-8">
        <Card>
          <CardHeader>
            <CardTitle>Your Best Selling Products</CardTitle>
            <CardDescription>Products with the highest sales from your store</CardDescription>
          </CardHeader>
          <CardContent>
            {isLoading ? (
              <div className="space-y-4">
                {[...Array(5)].map((_, i) => (
                  <div key={i} className="flex items-center gap-4">
                    <div className="h-12 w-12 rounded-md bg-muted animate-pulse"></div>
                    <div className="space-y-2 flex-1">
                      <div className="h-4 bg-muted rounded animate-pulse w-2/3"></div>
                      <div className="h-3 bg-muted rounded animate-pulse w-1/3"></div>
                    </div>
                    <div className="h-4 bg-muted rounded animate-pulse w-16"></div>
                  </div>
                ))}
              </div>
            ) : topProducts.length > 0 ? (
              <div className="space-y-4">
                {topProducts.map(product => (
                  <div key={product.id} className="flex items-center justify-between border-b pb-3">
                    <div className="flex items-center gap-3">
                      <div className="h-12 w-12 rounded-md bg-muted flex items-center justify-center">
                        {product.image ? (
                          <img src={product.image} alt={product.name} className="h-10 w-10 object-cover rounded-md" />
                        ) : (
                          <ShoppingCart className="h-5 w-5 text-muted-foreground" />
                        )}
                      </div>
                      <div>
                        <p className="font-medium">{product.name}</p>
                        <p className="text-sm text-muted-foreground">
                          ${product.price.toLocaleString('en-US', { minimumFractionDigits: 2 })}
                        </p>
                      </div>
                    </div>
                    <div className="text-right">
                      <p className="font-bold">{product.count} sold</p>
                      <p className="text-sm text-muted-foreground">
                        ${product.revenue?.toLocaleString('en-US', { minimumFractionDigits: 2 }) || '-'}
                      </p>
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <div className="py-12 text-center text-muted-foreground">
                <ShoppingCart className="mx-auto h-12 w-12 mb-4 text-muted" />
                <p>No sales data available yet</p>
                <p className="text-sm">Your best-selling products will appear here once you have orders</p>
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  )
}