import {
  CartesianGrid,
  Legend,
  Line,
  LineChart,
  ResponsiveContainer,
  XAxis,
  YAxis,
} from "recharts";
import { useGrades, type User } from "~/lib/api";
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "../ui/chart";
import { chartConfig, gradesTrendData } from "./inde";

export default function GradesPage({ user }: { user: User }) {
  // TODO: Error handling, loading state
  const { grades, subjects, isLoading, isError } = useGrades("YEAR")

  return (
    <div>
      {/* Tabs */}

      {/* Charts - Mobile First Layout */}
      <div className="space-y-8">
        {/* Grade Trends */}
        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <div>
              <h2 className="text-lg md:text-xl font-semibold">Grade Trends</h2>
              <p className="text-sm text-muted-foreground">
                performance across subjects
              </p>
            </div>
          </div>
          <div className="bg-muted/30 rounded-lg">
            <ChartContainer config={chartConfig} className="h-full w-full -ml-6">
              <ResponsiveContainer width="100%" height="100%">
                <LineChart data={grades}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="period" />
                  {/* TODO: Custom domain */}
                  <YAxis domain={[0, 20]} />
                  <ChartTooltip content={<ChartTooltipContent />} />
                  <Legend />
                  {subjects.map((subject, index) => (
                    <Line
                      key={index}
                      type="monotone"
                      dataKey={subject}
                      name={subject}
                    />
                  ))}
                </LineChart>
              </ResponsiveContainer>
            </ChartContainer>
          </div>
        </div>
      </div>
    </div>
  );
}