Untitled

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { DateRangeSelect } from "@/components/DateRangeSelect";
import { useState } from "react";
import { formatDate, type DateRange, isWithinRange } from "@/lib/utils/date";
import type { Metrics } from "@/types/metrics";
import {
  AreaChart,
  Area,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  BarChart,
  Bar,
} from "recharts";

interface UsageAnalyticsProps {
  metrics: Metrics;
}

export function UsageAnalytics({ metrics }: UsageAnalyticsProps) {
  const [dateRange, setDateRange] = useState<DateRange>('7d');

  const dailyUsageData = Object.entries(metrics.time_metrics.daily_usage_counts)
    .map(([date, count]) => ({
      date: formatDate(date),
      count,
    }))
    .filter(item => isWithinRange(item.date, dateRange))
    .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());

  const hourlyPatternData = metrics.time_metrics.time_of_day_patterns.map(
    (count, hour) => ({
      hour: `${hour}:00`,
      count,
    })
  );

  return (
    <div className="space-y-8">
      <div className="flex justify-between items-center">
        <h1 className="text-3xl font-bold">Usage Analytics</h1>
        <DateRangeSelect value={dateRange} onChange={setDateRange} />
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card>
          <CardHeader>
            <CardTitle>Daily Streak</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-3xl font-bold">
              {metrics.time_metrics.daily_weekly_monthly_streaks.daily} days
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Weekly Streak</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-3xl font-bold">
              {metrics.time_metrics.daily_weekly_monthly_streaks.weekly} weeks
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Monthly Streak</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-3xl font-bold">
              {metrics.time_metrics.daily_weekly_monthly_streaks.monthly} months
            </p>
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Daily Usage Trend</CardTitle>
        </CardHeader>
        <CardContent className="h-[400px]">
          <ResponsiveContainer width="100%" height="100%">
            <AreaChart data={dailyUsageData}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="date" />
              <YAxis />
              <Tooltip />
              <Area
                type="monotone"
                dataKey="count"
                stroke="#8884d8"
                fill="#8884d8"
                fillOpacity={0.3}
              />
            </AreaChart>
          </ResponsiveContainer>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Hourly Usage Pattern</CardTitle>
        </CardHeader>
        <CardContent className="h-[400px]">
          <ResponsiveContainer width="100%" height="100%">
            <BarChart data={hourlyPatternData}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="hour" />
              <YAxis />
              <Tooltip />
              <Bar dataKey="count" fill="#82ca9d" />
            </BarChart>
          </ResponsiveContainer>
        </CardContent>
      </Card>
    </div>
  );
}