"use client";

import React from "react";
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  BarChart,
  Bar,
  Cell,
  PieChart,
  Pie,
} from "recharts";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  CardDescription,
} from "@/components/ui/card";

interface AnalyticsClientProps {
  salesData: any[];
  topProducts: any[];
  lowStockItems: { name: string; inventory: number }[];
  revenueByCategory: { name: string; value: number }[];
  topCustomers: { name: string; email: string; total: number }[];
}

const COLORS = [
  "hsl(var(--primary))",
  "hsl(var(--secondary))",
  "hsl(var(--accent))",
  "hsl(var(--info))",
  "hsl(var(--success))",
];

export default function AnalyticsClient({
  salesData,
  topProducts,
  lowStockItems,
  revenueByCategory,
  topCustomers,
}: AnalyticsClientProps) {
  return (
    <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
      {/* Revenue Trend */}
      <Card>
        <CardHeader>
          <CardTitle className="text-base font-semibold">
            Umsatzverlauf (7 Tage)
          </CardTitle>
          <CardDescription>Täglicher Gesamtumsatz in Euro</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="h-[300px] w-full mt-4">
            <ResponsiveContainer width="100%" height="100%">
              <LineChart data={salesData}>
                <CartesianGrid
                  strokeDasharray="3 3"
                  vertical={false}
                  stroke="hsl(var(--muted))"
                  opacity={0.3}
                />
                <XAxis
                  dataKey="name"
                  axisLine={false}
                  tickLine={false}
                  tick={{ fontSize: 11, fill: "hsl(var(--muted-foreground))" }}
                  dy={10}
                />
                <YAxis
                  axisLine={false}
                  tickLine={false}
                  tick={{ fontSize: 11, fill: "hsl(var(--muted-foreground))" }}
                  tickFormatter={(value) => `€${value}`}
                />
                <Tooltip
                  contentStyle={{
                    backgroundColor: "hsl(var(--background))",
                    borderRadius: "10px",
                    border: "1px solid hsl(var(--border))",
                    boxShadow: "0 10px 15px -3px rgba(0,0,0,0.1)",
                  }}
                  itemStyle={{ fontSize: "12px", fontWeight: 600 }}
                />
                <Line
                  type="monotone"
                  dataKey="total"
                  stroke="hsl(var(--primary))"
                  strokeWidth={2.5}
                  dot={{
                    r: 4,
                    fill: "hsl(var(--primary))",
                    strokeWidth: 2,
                    stroke: "hsl(var(--background))",
                  }}
                  activeDot={{ r: 6, strokeWidth: 0 }}
                />
              </LineChart>
            </ResponsiveContainer>
          </div>
        </CardContent>
      </Card>

      {/* Top Products */}
      <Card>
        <CardHeader>
          <CardTitle className="text-base font-semibold">
            Top Produkte
          </CardTitle>
          <CardDescription>
            Meistverkaufte Produkte nach Einheiten
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="h-[300px] w-full mt-4">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart
                data={topProducts}
                layout="vertical"
                margin={{ left: -20 }}
              >
                <CartesianGrid
                  strokeDasharray="3 3"
                  horizontal={false}
                  stroke="hsl(var(--muted))"
                  opacity={0.3}
                />
                <XAxis
                  type="number"
                  axisLine={false}
                  tickLine={false}
                  tick={{ fontSize: 11, fill: "hsl(var(--muted-foreground))" }}
                />
                <YAxis
                  dataKey="name"
                  type="category"
                  axisLine={false}
                  tickLine={false}
                  tick={{ fontSize: 11, fill: "hsl(var(--muted-foreground))" }}
                  width={100}
                />
                <Tooltip
                  contentStyle={{
                    backgroundColor: "hsl(var(--background))",
                    borderRadius: "10px",
                    border: "1px solid hsl(var(--border))",
                    boxShadow: "0 10px 15px -3px rgba(0,0,0,0.1)",
                  }}
                  cursor={{ fill: "hsl(var(--muted))", opacity: 0.1 }}
                />
                <Bar
                  dataKey="sales"
                  fill="hsl(var(--primary))"
                  radius={[0, 6, 6, 0]}
                  barSize={18}
                />
              </BarChart>
            </ResponsiveContainer>
          </div>
        </CardContent>
      </Card>

      {/* Revenue by Category (Pie Chart) */}
      <Card>
        <CardHeader>
          <CardTitle className="text-base font-semibold">
            Umsatz nach Kategorie
          </CardTitle>
          <CardDescription>Verteilung des Gesamtumsatzes</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="h-[300px] w-full mt-4">
            <ResponsiveContainer width="100%" height="100%">
              <PieChart>
                <Pie
                  data={revenueByCategory}
                  cx="50%"
                  cy="50%"
                  innerRadius={60}
                  outerRadius={80}
                  paddingAngle={5}
                  dataKey="value"
                >
                  {revenueByCategory.map((_, index) => (
                    <Cell
                      key={`cell-${index}`}
                      fill={COLORS[index % COLORS.length]}
                    />
                  ))}
                </Pie>
                <Tooltip
                  contentStyle={{
                    backgroundColor: "hsl(var(--background))",
                    borderRadius: "10px",
                    border: "1px solid hsl(var(--border))",
                  }}
                  formatter={(value: number) => `€${value.toFixed(2)}`}
                />
              </PieChart>
            </ResponsiveContainer>
          </div>
        </CardContent>
      </Card>

      {/* Top Customers List */}
      <Card>
        <CardHeader>
          <CardTitle className="text-base font-semibold">Top Kunden</CardTitle>
          <CardDescription>Kunden mit dem höchsten Umsatz</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {topCustomers.map((customer) => (
              <div
                key={customer.email}
                className="flex items-center justify-between gap-4 p-2 rounded-lg border border-border/40 hover:bg-muted/30 transition-colors"
              >
                <div className="space-y-0.5 min-w-0">
                  <p className="text-sm font-bold leading-none truncate">
                    {customer.name}
                  </p>
                  <p className="text-[10px] text-muted-foreground truncate">
                    {customer.email}
                  </p>
                </div>
                <div className="text-xs font-black text-primary shrink-0">
                  €{customer.total.toFixed(2)}
                </div>
              </div>
            ))}
            {topCustomers.length === 0 && (
              <div className="text-center py-8 text-sm text-muted-foreground italic">
                Noch keine Kundendaten verfügbar.
              </div>
            )}
          </div>
        </CardContent>
      </Card>

      <Card className="xl:col-span-1">
        <CardHeader>
          <CardTitle className="text-base font-semibold">
            Kritischer Lagerbestand
          </CardTitle>
          <CardDescription>
            Produkte mit weniger als 10 Stück auf Lager.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            {lowStockItems.length > 0 ? (
              lowStockItems.map((product) => (
                <div
                  key={product.name}
                  className="flex items-center justify-between gap-3 rounded-md border border-border p-3 bg-card"
                >
                  <div>
                    <div className="font-semibold text-sm truncate">
                      {product.name}
                    </div>
                    <div className="text-xs text-muted-foreground">
                      Bestand: {product.inventory}
                    </div>
                  </div>
                  <div className="text-xs font-black text-amber-700">
                    Niedrig
                  </div>
                </div>
              ))
            ) : (
              <div className="rounded-md border border-dashed border-border p-4 text-sm text-muted-foreground">
                Keine Produkte mit kritischem Lagerbestand gefunden.
              </div>
            )}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}