import { type CSSProperties } from "react"
import { Line, LineChart, ResponsiveContainer, Tooltip } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@tohuhono/ui/card"

const data = [
  {
    average: 400,
    today: 240,
  },
  {
    average: 300,
    today: 139,
  },
  {
    average: 200,
    today: 980,
  },
  {
    average: 278,
    today: 390,
  },
  {
    average: 189,
    today: 480,
  },
  {
    average: 239,
    today: 380,
  },
  {
    average: 349,
    today: 430,
  },
]

export function CardsMetric() {
  const averageLineStyle: CSSProperties = {
    stroke: "hsl(var(--primary))",
    opacity: 0.25,
  }
  const todayLineStyle: CSSProperties = {
    stroke: "hsl(var(--primary))",
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>Exercise Minutes</CardTitle>
        <CardDescription>
          Your excercise minutes are ahead of where you normally are.
        </CardDescription>
      </CardHeader>
      <CardContent className="pb-4">
        <div className="h-[200px]">
          <ResponsiveContainer width="100%" height="100%">
            <LineChart
              data={data}
              margin={{
                top: 5,
                right: 10,
                left: 10,
                bottom: 0,
              }}
            >
              <Tooltip
                content={({ active, payload }) => {
                  if (active && payload && payload.length) {
                    return (
                      <div
                        className="
                          rounded-lg border bg-background p-2 shadow-xs
                        "
                      >
                        <div className="grid grid-cols-2 gap-2">
                          <div className="flex flex-col">
                            <span
                              className="
                                text-[0.70rem] text-muted-foreground uppercase
                              "
                            >
                              Average
                            </span>
                            <span className="font-bold text-muted-foreground">
                              {payload[0]?.value}
                            </span>
                          </div>
                          <div className="flex flex-col">
                            <span
                              className="
                                text-[0.70rem] text-muted-foreground uppercase
                              "
                            >
                              Today
                            </span>
                            <span className="font-bold">
                              {payload[1]?.value}
                            </span>
                          </div>
                        </div>
                      </div>
                    )
                  }

                  return null
                }}
              />
              <Line
                type="monotone"
                strokeWidth={2}
                dataKey="average"
                activeDot={{
                  r: 6,
                  style: { fill: "hsl(var(--primary))", opacity: 0.25 },
                }}
                style={averageLineStyle}
              />
              <Line
                type="monotone"
                dataKey="today"
                strokeWidth={2}
                activeDot={{
                  r: 8,
                  style: { fill: "hsl(var(--primary))" },
                }}
                style={todayLineStyle}
              />
            </LineChart>
          </ResponsiveContainer>
        </div>
      </CardContent>
    </Card>
  )
}