"use client";

import { useEffect, useState } from "react";
import { useParams } from "next/navigation";
import { toast } from "react-toastify";
import Link from "next/link";

interface Student {
  student_id: string;
  name: string;
  email: string;
  contact: string;
}

export default function ViewStudent() {
  const params = useParams();
  const [student, setStudent] = useState<Student | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(`/api/admin/students/${params.id}`)
      .then((res) => res.json())
      .then((data) => setStudent(data.data))
      .catch(() => toast.error("Failed to load student details"))
      .finally(() => setLoading(false));
  }, [params.id]);

  if (loading) {
    return (
      <div
        className="admin-page-wrapper d-flex justify-content-center align-items-center"
        style={{ minHeight: 300 }}
      >
        <span className="spinner-border text-secondary" />
      </div>
    );
  }

  if (!student) {
    return (
      <div
        className="admin-page-wrapper d-flex justify-content-center align-items-center"
        style={{ minHeight: 300 }}
      >
        <div className="text-center text-muted">
          <i className="bi bi-exclamation-circle fs-1 d-block mb-2" />
          Student not found
        </div>
      </div>
    );
  }

  return (
    <div className="admin-page-wrapper">
      {/* Header */}
      <div className="admin-page-header mb-4">
        <div className="d-flex justify-content-between align-items-center">
          <div>
            <h2 className="admin-page-title">Student Details</h2>
            <p className="admin-page-subtitle">Viewing student information</p>
          </div>
          <div className="d-flex gap-2">
            <Link href="/admin/students" className="btn btn-light px-4">
              <i className="bi bi-arrow-left me-2" />
              Back to Students
            </Link>
          </div>
        </div>
      </div>

      {/* Detail Card */}
      <div className="card-theme p-4">
        <div className="row g-4">

          <div className="col-md-6">
            <p className="text-muted mb-1 small">Student ID</p>
            <p className="fw-semibold mb-0">{student.student_id}</p>
          </div>

          <div className="col-md-6">
            <p className="text-muted mb-1 small">Full Name</p>
            <p className="fw-semibold mb-0">{student.name}</p>
          </div>

          <div className="col-md-6">
            <p className="text-muted mb-1 small">Email</p>
            <p className="fw-semibold mb-0">{student.email}</p>
          </div>

          <div className="col-md-6">
            <p className="text-muted mb-1 small">Contact Number</p>
            <p className="fw-semibold mb-0">{student.contact}</p>
          </div>

        </div>

        {/* Actions */}
        <div className="d-flex justify-content-end gap-2 mt-4">
          <Link href="/admin/students" className="btn btn-light px-4">
            Back
          </Link>
          <Link
            href={`/admin/students/edit/${params.id}`}
            className="admin-theme-btn"
          >
            <i className="bi bi-pencil me-1" />
            Edit Student
          </Link>
        </div>
      </div>
    </div>
  );
}