Untitled

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { DateRangeSelect } from "@/components/DateRangeSelect";
import { Progress } from "@/components/ui/progress";
import { useState } from "react";
import type { DateRange } from "@/lib/utils/date";
import type { Metrics } from "@/types/metrics";
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  PieChart,
  Pie,
  Cell,
  Legend,
} from "recharts";

interface BinAnalyticsProps {
  metrics: Metrics;
}

const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8'];

export function BinAnalytics({ metrics }: BinAnalyticsProps) {
  const [dateRange, setDateRange] = useState<DateRange>('7d');
  const [selectedBin, setSelectedBin] = useState<string | null>(
    Object.keys(metrics.bin_specialization)[0] || null
  );

  const binSpecializations = Object.entries(metrics.bin_specialization).map(
    ([binId, data]) => ({
      binId,
      ...data,
    })
  );

  const selectedBinData = selectedBin
    ? metrics.bin_specialization[selectedBin]
    : null;

  const typeDistributionData = selectedBinData
    ? Object.entries(selectedBinData.items_by_type).map(([type, count]) => ({
        name: type,
        value: count,
      }))
    : [];

  return (
    <div className="space-y-8">
      <div className="flex justify-between items-center">
        <h1 className="text-3xl font-bold">Bin Analytics</h1>
        <div className="flex gap-4">
          <select
            className="px-3 py-2 rounded-md border"
            value={selectedBin || ""}
            onChange={(e) => setSelectedBin(e.target.value)}
          >
            {binSpecializations.map((bin) => (
              <option key={bin.binId} value={bin.binId}>
                {bin.binId}
              </option>
            ))}
          </select>
          <DateRangeSelect value={dateRange} onChange={setDateRange} />
        </div>
      </div>

      {selectedBinData && (
        <>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <Card>
              <CardHeader>
                <CardTitle>Total Items</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-3xl font-bold">{selectedBinData.total_items}</p>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>Most Common Type</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-3xl font-bold">
                  {selectedBinData.most_common_type || "N/A"}
                </p>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>Type Accuracy</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-2">
                  <Progress value={selectedBinData.type_accuracy} />
                  <p className="text-sm text-muted-foreground text-center">
                    {selectedBinData.type_accuracy.toFixed(1)}%
                  </p>
                </div>
              </CardContent>
            </Card>
          </div>

          <Card>
            <CardHeader>
              <CardTitle>Type Distribution</CardTitle>
            </CardHeader>
            <CardContent className="h-[400px]">
              <ResponsiveContainer width="100%" height="100%">
                <PieChart>
                  <Pie
                    data={typeDistributionData}
                    cx="50%"
                    cy="50%"
                    labelLine={false}
                    label={({ name, percent }) =>
                      `${name} (${(percent * 100).toFixed(0)}%)`
                    }
                    outerRadius={150}
                    fill="#8884d8"
                    dataKey="value"
                  >
                    {typeDistributionData.map((_, index) => (
                      <Cell
                        key={`cell-${index}`}
                        fill={COLORS[index % COLORS.length]}
                      />
                    ))}
                  </Pie>
                  <Tooltip />
                  <Legend />
                </PieChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>
        </>
      )}
    </div>
  );
}