"use client"

import { useState } from "react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { formatCurrency } from "@/lib/utils"
import {
  LineChart,
  Line,
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  PieChart,
  Pie,
  Cell,
} from "recharts"

const COLORS = ["#0d9488", "#14b8a6", "#5eead4", "#99f6e4", "#2dd4bf"]

type MonthlySales = {
  month: string
  sales: number
}

type TopProduct = {
  name: string
  sales: number
  revenue: number
}

type CategoryData = {
  name: string
  value: number
  amount: number
}

type ReportsChartsProps = {
  monthlySales: MonthlySales[]
  topProducts: TopProduct[]
  categoryData: CategoryData[]
}

export default function ReportsCharts({ monthlySales, topProducts, categoryData }: ReportsChartsProps) {
  const categoryDataWithColor = categoryData.map((entry, index) => ({
    ...entry,
    color: COLORS[index % COLORS.length],
  }))

  return (
    <Tabs defaultValue="sales" className="space-y-4">
      <TabsList>
        <TabsTrigger value="sales">Ventes</TabsTrigger>
        <TabsTrigger value="products">Produits</TabsTrigger>
        <TabsTrigger value="categories">Catégories</TabsTrigger>
      </TabsList>

      <TabsContent value="sales" className="space-y-4">
        <Card>
          <CardHeader>
            <CardTitle>Evolution des ventes</CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={350}>
              <LineChart data={monthlySales}>
                <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
                <XAxis dataKey="month" stroke="#64748b" />
                <YAxis stroke="#64748b" tickFormatter={(value) => `${value / 1000}k`} />
                <Tooltip
                  formatter={(value: number) => [formatCurrency(value), "Ventes"]}
                  contentStyle={{ borderRadius: "8px", border: "1px solid #e2e8f0" }}
                />
                <Line
                  type="monotone"
                  dataKey="sales"
                  stroke="#0d9488"
                  strokeWidth={2}
                  dot={{ fill: "#0d9488", strokeWidth: 2 }}
                />
              </LineChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>
      </TabsContent>

      <TabsContent value="products" className="space-y-4">
        <Card>
          <CardHeader>
            <CardTitle>Top produits</CardTitle>
          </CardHeader>
          <CardContent>
            {topProducts.length === 0 ? (
              <div className="text-center text-muted-foreground py-8">
                Aucune donnée disponible
              </div>
            ) : (
              <ResponsiveContainer width="100%" height={350}>
                <BarChart data={topProducts} layout="vertical">
                  <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
                  <XAxis type="number" stroke="#64748b" />
                  <YAxis dataKey="name" type="category" width={120} stroke="#64748b" />
                  <Tooltip
                    formatter={(value: number) => [value, "Unités"]}
                    contentStyle={{ borderRadius: "8px", border: "1px solid #e2e8f0" }}
                  />
                  <Bar dataKey="sales" fill="#0d9488" radius={[0, 4, 4, 0]} />
                </BarChart>
              </ResponsiveContainer>
            )}
          </CardContent>
        </Card>
      </TabsContent>

      <TabsContent value="categories" className="space-y-4">
        <Card>
          <CardHeader>
            <CardTitle>Ventes par catégorie</CardTitle>
          </CardHeader>
          <CardContent>
            {categoryDataWithColor.length === 0 ? (
              <div className="text-center text-muted-foreground py-8">
                Aucune donnée disponible
              </div>
            ) : (
              <ResponsiveContainer width="100%" height={350}>
                <PieChart>
                  <Pie
                    data={categoryDataWithColor}
                    cx="50%"
                    cy="50%"
                    innerRadius={80}
                    outerRadius={120}
                    paddingAngle={5}
                    dataKey="value"
                    label={({ name, value }) => `${name}: ${value}%`}
                  >
                    {categoryDataWithColor.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={entry.color} />
                    ))}
                  </Pie>
                  <Tooltip 
                    formatter={(value: number) => [`${value}%`, "Part"]}
                    contentStyle={{ borderRadius: "8px", border: "1px solid #e2e8f0" }} 
                  />
                </PieChart>
              </ResponsiveContainer>
            )}
          </CardContent>
        </Card>
      </TabsContent>
    </Tabs>
  )
}