"use client";

import React, { Suspense, useEffect, useState } from "react";
import { useSearchParams, useRouter } from "next/navigation";
import { StudentDetailsView } from "@/components/students/student-details-view";
import { apiClient } from "@/lib/api-client";
import { Loader2 } from "lucide-react";

function StudentDetailsContent() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const idFromUrl = searchParams.get("id");
  const [activeStudentId, setActiveStudentId] = useState<string | null>(idFromUrl);
  const [isResolving, setIsResolving] = useState(!idFromUrl);

  useEffect(() => {
    if (idFromUrl) {
      setActiveStudentId(idFromUrl);
      setIsResolving(false);
      return;
    }

    // If no id provided in URL, resolve the first student from database
    async function resolveDefaultStudent() {
      try {
        setIsResolving(true);
        const res = await apiClient.get<{ success: boolean; data: any[] }>("/students?limit=1");
        if (res.data?.success && Array.isArray(res.data.data) && res.data.data.length > 0) {
          setActiveStudentId(res.data.data[0].id);
        }
      } catch (err) {
        console.error("Failed to resolve default student:", err);
      } finally {
        setIsResolving(false);
      }
    }

    resolveDefaultStudent();
  }, [idFromUrl]);

  if (isResolving) {
    return (
      <div className="flex flex-col items-center justify-center min-h-[400px] text-center p-8 bg-white rounded-2xl border border-[#E5EAF0]">
        <Loader2 className="w-8 h-8 text-[#1769E8] animate-spin mb-3" />
        <p className="text-xs font-semibold text-[#071A4D]">Loading Student Details...</p>
      </div>
    );
  }

  return (
    <StudentDetailsView
      studentId={activeStudentId || "default"}
      onBack={() => router.push("/admin/people/students/profiles")}
    />
  );
}

export default function StudentDetailsPage() {
  return (
    <Suspense
      fallback={
        <div className="flex items-center justify-center min-h-[300px]">
          <Loader2 className="w-6 h-6 animate-spin text-[#1769E8]" />
        </div>
      }
    >
      <StudentDetailsContent />
    </Suspense>
  );
}