import { useQuery } from '@tanstack/react-query';
import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../components/ui/tabs';
import { ProfitAnalysis } from '../components/analytics/ProfitAnalysis';
import { VendorPerformance } from '../components/analytics/VendorPerformance';
import { StockAnalysis } from '../components/analytics/StockAnalysis';
import { PriceAnalysis } from '../components/analytics/PriceAnalysis';
import { CategoryPerformance } from '../components/analytics/CategoryPerformance';
import config from '../config';
import { motion } from 'motion/react';

interface AnalyticsStats {
  profitMargin: number;
  averageMarkup: number;
  stockTurnoverRate: number;
  vendorCount: number;
  categoryCount: number;
  averageOrderValue: number;
}

export function Analytics() {
  const { data: stats, isLoading: statsLoading } = useQuery<AnalyticsStats>({
    queryKey: ['analytics-stats'],
    queryFn: async () => {
      const response = await fetch(`${config.apiUrl}/analytics/stats`);
      if (!response.ok) {
        throw new Error('Failed to fetch analytics stats');
      }
      return response.json();
    },
  });

  if (statsLoading || !stats) {
    return <div className="p-8">Loading analytics...</div>;
  }

  return (
    <motion.div layout className="flex-1 space-y-4 p-8 pt-6">
      <div className="flex items-center justify-between space-y-2">
        <h2 className="text-3xl font-bold tracking-tight">Analytics</h2>
      </div>
      
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">
              Overall Profit Margin
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">
              {stats.profitMargin.toFixed(1)}%
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">
              Average Markup
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">
              {stats.averageMarkup.toFixed(1)}%
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">
              Stock Turnover Rate
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">
              {stats.stockTurnoverRate.toFixed(2)}x
            </div>
          </CardContent>
        </Card>
      </div>

      <Tabs defaultValue="profit" className="space-y-4">
        <TabsList className="grid w-full grid-cols-5 lg:w-[600px]">
          <TabsTrigger value="profit">Profit</TabsTrigger>
          <TabsTrigger value="vendors">Vendors</TabsTrigger>
          <TabsTrigger value="stock">Stock</TabsTrigger>
          <TabsTrigger value="pricing">Pricing</TabsTrigger>
          <TabsTrigger value="categories">Categories</TabsTrigger>
        </TabsList>
        
        <TabsContent value="profit" className="space-y-4">
          <ProfitAnalysis />
        </TabsContent>
        
        <TabsContent value="vendors" className="space-y-4">
          <VendorPerformance />
        </TabsContent>
        
        <TabsContent value="stock" className="space-y-4">
          <StockAnalysis />
        </TabsContent>
        
        <TabsContent value="pricing" className="space-y-4">
          <PriceAnalysis />
        </TabsContent>
        
        <TabsContent value="categories" className="space-y-4">
          <CategoryPerformance />
        </TabsContent>
      </Tabs>
    </motion.div>
  );
} 