import { createFileRoute } from "@tanstack/react-router";
import { useQuery } from "@tanstack/react-query";
import {
  LineChart,
  Line,
  ResponsiveContainer,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  BarChart,
  Bar,
  PieChart,
  Pie,
  Cell,
  Legend,
} from "recharts";
import { PageHeader } from "@/components/common/PageBits";
import { Skeleton } from "@/components/ui/skeleton";
import { analyticsService } from "@/services";
import { cn } from "@/lib/utils";

export const Route = createFileRoute("/_app/analytics")({
  head: () => ({ meta: [{ title: "Analytics — Study Unique" }] }),
  component: AnalyticsPage,
});

const PIE_COLORS = [
  "var(--color-chart-1)",
  "var(--color-chart-2)",
  "var(--color-chart-3)",
  "var(--color-chart-4)",
  "var(--color-chart-5)",
];

function AnalyticsPage() {
  const activity = useQuery({ queryKey: ["activity"], queryFn: analyticsService.activity });
  const subjects = useQuery({ queryKey: ["subjects"], queryFn: analyticsService.subjects });

  return (
    <div className="mx-auto w-full max-w-7xl space-y-6 p-4 md:p-6">
      <PageHeader title="Study analytics" description="Your learning trends over the last 30 days." />

      <div className="grid gap-4 lg:grid-cols-3">
        <Card title="Daily study time" full>
          {activity.data ? (
            <ResponsiveContainer width="100%" height={260}>
              <LineChart data={activity.data}>
                <CartesianGrid strokeDasharray="3 3" stroke="var(--color-border)" />
                <XAxis dataKey="date" tickFormatter={(d) => d.slice(5)} stroke="var(--color-muted-foreground)" fontSize={11} />
                <YAxis stroke="var(--color-muted-foreground)" fontSize={11} />
                <Tooltip contentStyle={{ background: "var(--color-popover)", border: "1px solid var(--color-border)", borderRadius: 8 }} />
                <Line type="monotone" dataKey="minutes" stroke="var(--color-primary)" strokeWidth={2.5} dot={false} />
              </LineChart>
            </ResponsiveContainer>
          ) : <Skeleton className="h-64" />}
        </Card>

        <Card title="Subject mix">
          {subjects.data ? (
            <ResponsiveContainer width="100%" height={260}>
              <PieChart>
                <Pie data={subjects.data} dataKey="value" nameKey="name" innerRadius={50} outerRadius={90} paddingAngle={3}>
                  {subjects.data.map((_, i) => (
                    <Cell key={i} fill={PIE_COLORS[i % PIE_COLORS.length]} stroke="var(--color-card)" />
                  ))}
                </Pie>
                <Legend wrapperStyle={{ fontSize: 11 }} />
              </PieChart>
            </ResponsiveContainer>
          ) : <Skeleton className="h-64" />}
        </Card>
      </div>

      <div className="grid gap-4 lg:grid-cols-2">
        <Card title="Flashcards reviewed">
          {activity.data ? (
            <ResponsiveContainer width="100%" height={220}>
              <BarChart data={activity.data.slice(-14)}>
                <CartesianGrid strokeDasharray="3 3" stroke="var(--color-border)" />
                <XAxis dataKey="date" tickFormatter={(d) => d.slice(5)} stroke="var(--color-muted-foreground)" fontSize={11} />
                <YAxis stroke="var(--color-muted-foreground)" fontSize={11} />
                <Tooltip contentStyle={{ background: "var(--color-popover)", border: "1px solid var(--color-border)", borderRadius: 8 }} />
                <Bar dataKey="flashcards" fill="var(--color-accent)" radius={[4, 4, 0, 0]} />
              </BarChart>
            </ResponsiveContainer>
          ) : <Skeleton className="h-56" />}
        </Card>

        <Card title="Quizzes taken">
          {activity.data ? (
            <ResponsiveContainer width="100%" height={220}>
              <BarChart data={activity.data.slice(-14)}>
                <CartesianGrid strokeDasharray="3 3" stroke="var(--color-border)" />
                <XAxis dataKey="date" tickFormatter={(d) => d.slice(5)} stroke="var(--color-muted-foreground)" fontSize={11} />
                <YAxis stroke="var(--color-muted-foreground)" fontSize={11} />
                <Tooltip contentStyle={{ background: "var(--color-popover)", border: "1px solid var(--color-border)", borderRadius: 8 }} />
                <Bar dataKey="quizzes" fill="var(--color-secondary)" radius={[4, 4, 0, 0]} />
              </BarChart>
            </ResponsiveContainer>
          ) : <Skeleton className="h-56" />}
        </Card>
      </div>

      {/* Heatmap-ish calendar */}
      <Card title="Activity heatmap" subtitle="Darker = more study time">
        <div className="grid grid-cols-[repeat(30,minmax(0,1fr))] gap-1">
          {(activity.data ?? []).map((d) => {
            const intensity = Math.min(1, d.minutes / 120);
            return (
              <div
                key={d.date}
                title={`${d.date}: ${d.minutes} min`}
                className="aspect-square rounded-sm"
                style={{
                  background: `color-mix(in oklab, var(--color-primary) ${Math.round(intensity * 90)}%, var(--color-muted) )`,
                }}
              />
            );
          })}
        </div>
        <div className="mt-3 flex items-center justify-end gap-2 text-[10px] text-muted-foreground">
          Less
          {[0.1, 0.3, 0.55, 0.8, 1].map((v) => (
            <span
              key={v}
              className="h-2.5 w-2.5 rounded-sm"
              style={{ background: `color-mix(in oklab, var(--color-primary) ${Math.round(v * 90)}%, var(--color-muted))` }}
            />
          ))}
          More
        </div>
      </Card>
    </div>
  );
}

function Card({
  title,
  subtitle,
  children,
  full,
}: {
  title: string;
  subtitle?: string;
  children: React.ReactNode;
  full?: boolean;
}) {
  return (
    <div className={cn("rounded-2xl border border-border bg-card p-5", full && "lg:col-span-2")}>
      <div>
        <p className="text-sm font-semibold">{title}</p>
        {subtitle && <p className="text-xs text-muted-foreground">{subtitle}</p>}
      </div>
      <div className="mt-3">{children}</div>
    </div>
  );
}