import { useParams } from "react-router-dom";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { useStudentAbility, useStudentSignals } from "@/hooks/queries/useAdaptiveEngine";
import {
  CartesianGrid,
  LineChart,
  Line,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";

export default function AdaptiveStudentDetail() {
  const { studentId: sid } = useParams<{ studentId: string }>();
  const studentId = Number(sid);

  const { data: signals, isLoading: ls } = useStudentSignals(Number.isFinite(studentId) ? studentId : undefined);
  const { data: ability, isLoading: la } = useStudentAbility(Number.isFinite(studentId) ? studentId : undefined);

  const rows = signals ?? [];
  const traj = ability?.trajectory?.length
    ? ability.trajectory
    : [
        { t: "W1", theta: 0.2 },
        { t: "W2", theta: 0.35 },
        { t: "W3", theta: 0.5 },
        { t: "W4", theta: 0.62 },
      ];

  if (ls || la) {
    return <div className="p-6 text-muted-foreground">Loading student…</div>;
  }

  return (
    <div className="space-y-8 p-6 max-w-5xl mx-auto">
      <div>
        <h1 className="text-2xl font-semibold tracking-tight">Adaptive trace</h1>
        <p className="text-muted-foreground text-sm mt-1">Student #{studentId}</p>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Signal timeline</CardTitle>
          <CardDescription>Inputs the engine reacted to</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="rounded-md border overflow-x-auto">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Time</TableHead>
                  <TableHead>Signal</TableHead>
                  <TableHead>Value</TableHead>
                  <TableHead>Decision made</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {rows.map((r, i) => (
                  <TableRow key={i}>
                    <TableCell className="whitespace-nowrap">{new Date(r.time).toLocaleString()}</TableCell>
                    <TableCell>{r.signal}</TableCell>
                    <TableCell>{r.value}</TableCell>
                    <TableCell>{r.decision_made}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Ability model (phase 2+)</CardTitle>
          <CardDescription>Theta, SEM, and trajectory</CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="flex flex-wrap gap-8 text-sm">
            <div>
              <div className="text-muted-foreground">Theta</div>
              <div className="text-2xl font-semibold">{ability?.theta?.toFixed(3) ?? "—"}</div>
            </div>
            <div>
              <div className="text-muted-foreground">SEM</div>
              <div className="text-2xl font-semibold">{ability?.sem?.toFixed(3) ?? "—"}</div>
            </div>
          </div>
          <div className="h-72">
            <ResponsiveContainer width="100%" height="100%">
              <LineChart data={traj}>
                <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
                <XAxis dataKey="t" />
                <YAxis domain={["auto", "auto"]} />
                <Tooltip />
                <Line type="monotone" dataKey="theta" stroke="hsl(var(--primary))" strokeWidth={2} dot />
              </LineChart>
            </ResponsiveContainer>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
