"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, RefreshCcw } from "lucide-react"
import { Button } from "@/components/ui/button"
import { useToast } from "@/components/ui/use-toast"
import { Skeleton } from "@/components/ui/skeleton"

interface ContentProps {
  username: string
  orderStats: OrderStatsData
}

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

// Business quotes array
const businessQuotes = [
  { text: "Your most unhappy customers are your greatest source of learning.", author: "Bill Gates" },
  { text: "The secret of getting ahead is getting started.", author: "Mark Twain" },
  { text: "Success is not final; failure is not fatal: It is the courage to continue that counts.", author: "Winston Churchill" },
  { text: "The way to get started is to quit talking and begin doing.", author: "Walt Disney" },
  { text: "Opportunities don't happen. You create them.", author: "Chris Grosser" },
  { text: "The best way to predict the future is to create it.", author: "Peter Drucker" },
  { text: "Don't watch the clock; do what it does. Keep going.", author: "Sam Levenson" },
  { text: "The future belongs to those who believe in the beauty of their dreams.", author: "Eleanor Roosevelt" },
  { text: "Entrepreneurship is living a few years of your life like most people won't so you can spend the rest of your life like most people can't.", author: "Anonymous" },
  { text: "Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work.", author: "Steve Jobs" }
];

// Function to get a random quote that's not the Mark Twain one
function getRandomQuote() {
  // Filter out the Mark Twain quote for now to ensure variety
  const filteredQuotes = businessQuotes.filter(quote => quote.author !== "Mark Twain");
  const randomIndex = Math.floor(Math.random() * filteredQuotes.length);
  return filteredQuotes[randomIndex];
}

export default function Content({ username, orderStats }: ContentProps) {
  const [greeting, setGreeting] = useState("")
  const [topProducts, setTopProducts] = useState<TopProduct[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const { toast } = useToast()
  
  // Initialize with a random quote that's not Mark Twain
  const [randomQuote, setRandomQuote] = useState(getRandomQuote())
  
  const fetchTopProducts = async () => {
    setIsLoading(true)
    setError(null)
    
    try {
      // Get the auth token from cookies
      const authToken = document.cookie
        .split("; ")
        .find((row) => row.startsWith("Authorization="))
        ?.split("=")[1];
      
      if (!authToken) {
        throw new Error("Authentication token not found")
      }
      
      // Use the API URL from environment variables
      const apiUrl = `${process.env.NEXT_PUBLIC_API_URL}/orders/top-products`;
      
      const response = await fetch(apiUrl, {
        headers: {
          Authorization: `Bearer ${authToken}`,
          'Content-Type': 'application/json'
        }
      });
      
      if (!response.ok) {
        throw new Error(`API request failed: ${response.status} ${response.statusText}`)
      }
      
      const data = await response.json();
      setTopProducts(data);
    } catch (err) {
      console.error("Error fetching top products:", err);
      setError(err instanceof Error ? err.message : "Failed to fetch top products")
      toast({
        title: "Error loading top products",
        description: "Please try refreshing the page",
        variant: "destructive"
      })
    } finally {
      setIsLoading(false)
    }
  };

  useEffect(() => {
    setGreeting(getGreeting())
    
    // Fetch top products
    fetchTopProducts();
  }, [])

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-semibold text-foreground">
          {greeting}, {username}!
        </h1>
        <p className="text-muted-foreground mt-1 italic text-sm">
          "{randomQuote.text}" — <span className="font-medium">{randomQuote.author}</span>
        </p>
      </div>

      <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 className="flex flex-row items-center justify-between pb-2">
            <div>
              <CardTitle>Your Best Selling Products</CardTitle>
              <CardDescription>Products with the highest sales from your store</CardDescription>
            </div>
            {error && (
              <Button 
                variant="outline" 
                size="sm" 
                onClick={fetchTopProducts}
                className="flex items-center gap-1"
              >
                <RefreshCcw className="h-3 w-3" />
                Retry
              </Button>
            )}
          </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>
            ) : error ? (
              <div className="py-12 text-center text-muted-foreground">
                <p className="text-red-500 mb-2">Error loading products</p>
                <p className="text-sm">{error}</p>
              </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={`${process.env.NEXT_PUBLIC_API_URL}/products/image/${product.id}`} 
                            alt={product.name} 
                            className="h-10 w-10 object-cover rounded-md" 
                            onError={(e) => {
                              const target = e.currentTarget;
                              target.src = "";
                              if (target.parentElement) {
                                target.parentElement.classList.add("bg-muted");
                                const iconSpan = document.createElement("span");
                                iconSpan.className = "h-5 w-5 text-muted-foreground";
                                target.parentElement.appendChild(iconSpan);
                              }
                            }}
                          />
                        ) : (
                          <ShoppingCart className="h-5 w-5 text-muted-foreground" />
                        )}
                      </div>
                      <div>
                        <p className="font-medium">{product.name}</p>
                      </div>
                    </div>
                    <div className="text-right">
                      <p className="font-bold">{product.count} sold</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>
  )
}