"use client";

import { HydrationSummary } from "@fitai/shared";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import {
  PieChart,
  Pie,
  Cell,
  ResponsiveContainer,
  Legend,
  Tooltip,
} from "recharts";

interface HydrationSummaryCardProps {
  hydration: {
    dailySummaries: HydrationSummary[];
    averageDailyWater: number;
    totalDays: number;
    daysMetGoal: number;
  };
}

export function HydrationSummaryCard({ hydration }: HydrationSummaryCardProps) {
  const goalMetPercentage =
    hydration.totalDays > 0
      ? Math.round((hydration.daysMetGoal / hydration.totalDays) * 100)
      : 0;

  const chartData = [
    { name: "Days Met Goal", value: hydration.daysMetGoal, color: "#06b6d4" },
    {
      name: "Days Under Goal",
      value: hydration.totalDays - hydration.daysMetGoal,
      color: "#f59e0b",
    },
  ];

  return (
    <Card>
      <CardHeader>
        <CardTitle>Hydration Summary</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        {/* Summary Stats */}
        <div className="grid grid-cols-2 gap-4">
          <div className="text-center">
            <div className="text-2xl font-bold text-blue-600">
              {(hydration.averageDailyWater / 1000).toFixed(1)}L
            </div>
            <div className="text-xs text-gray-600">Avg Daily Water</div>
          </div>
          <div className="text-center">
            <div className="text-2xl font-bold text-cyan-600">
              {hydration.totalDays}
            </div>
            <div className="text-xs text-gray-600">Days Tracked</div>
          </div>
        </div>

        {/* Goal Achievement */}
        <div className="text-center">
          <div className="text-3xl font-bold text-green-600">
            {goalMetPercentage}%
          </div>
          <div className="text-xs text-gray-600">Days Met Hydration Goal</div>
        </div>

        {/* Chart */}
        {hydration.totalDays > 0 && (
          <div className="h-48">
            <ResponsiveContainer width="100%" height="100%">
              <PieChart>
                <Pie
                  data={chartData}
                  cx="50%"
                  cy="50%"
                  innerRadius={40}
                  outerRadius={70}
                  paddingAngle={5}
                  dataKey="value"
                >
                  {chartData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={entry.color} />
                  ))}
                </Pie>
                <Tooltip />
                <Legend />
              </PieChart>
            </ResponsiveContainer>
          </div>
        )}

        {/* Recent Days */}
        {hydration.dailySummaries.length > 0 && (
          <div className="space-y-2">
            <h4 className="text-sm font-semibold">Recent Days</h4>
            <div className="max-h-32 overflow-y-auto space-y-1">
              {hydration.dailySummaries
                .slice(-5)
                .reverse()
                .map((day) => (
                  <div
                    key={day.date}
                    className="flex justify-between items-center text-sm"
                  >
                    <span className="text-gray-600">{day.date}</span>
                    <span className="font-medium">
                      {day.totalWater}ml / {day.waterGoal}ml (
                      {day.hydrationPercentage}%)
                    </span>
                  </div>
                ))}
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  );
}
