 import { useState,useEffect } from "react";
import axios from "../axiosInstance";

function Student(){
    const [studentClass, setStudentClass] = useState('')
    const [name, setName] = useState('')
    const [error, setError] = useState('')
    const [student, setStudent] = useState([])

    const fetchStudent = async () => {
        try{
            const res = await axios.get('http://localhost:5000/api/student')
            setStudent(res.data)
        }catch(error){
            setError('failed to fetch student')
        }
    }
    useEffect(() => {
        fetchStudent()
    },[])

    const handleAdd = async (e) => {
        e.preventDefault()
        try{
            await axios.post('http://localhost:5000/api/student',{
                name,
                studentClass,
            })
            setName('')
            setStudentClass('')
            fetchStudent()
        }catch(error){
            setError('failed to add student')
        }
    }

    const handleDelete = async(id) => {
        try{
            await axios.delete(`http://localhost:5000/api/student/${id}`)
            fetchStudent()
        }catch(error){
            setError('failed to delete')
        }
    }
    return(
        <div className="min-h-screen bg-amber-200 p-6 font-sans flex flex-col gap-6">
        {/* Main Section Header */}
        <h2 className="text-3xl font-bold text-gray-900">Student Directory</h2>
        
        {/* Registration Form Panel */}
        <form onSubmit={handleAdd} className="bg-white p-6 rounded-2xl shadow-sm border border-amber-300/40 flex flex-col md:flex-row md:items-end gap-4 max-w-4xl">
            
            <div className="flex-1 flex flex-col gap-1">
                <label className="text-sm font-semibold text-gray-500">Name</label>
                <input 
                    type="name" 
                    placeholder="Enter student full name" 
                    value={name} 
                    onChange={(e) => setName(e.target.value)} 
                    className="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:border-orange-500"
                />
            </div>

            <div className="flex-1 flex flex-col gap-1">
                <label className="text-sm font-semibold text-gray-500">Class</label>
                <input 
                    type="text" 
                    placeholder="Enter assigned class level" 
                    value={studentClass} 
                    onChange={(e) => setStudentClass (e.target.value)} 
                    className="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:border-orange-500"
                />
            </div>

            <button 
                type="submit"
                className="bg-orange-600 text-white font-semibold px-6 py-2 rounded-lg hover:bg-orange-700 transition-colors text-sm h-max md:w-32 shadow-sm"
            >
                Add Student
            </button>

        </form>

        {/* Error Notification Alert */}
        {error && (
            <p className="bg-red-100 text-red-700 px-4 py-2 rounded-lg border border-red-200 text-sm font-medium w-max">
                {error}
            </p>
        )}

        {/* Styled Data Management Table */}
        <div className="overflow-hidden bg-white rounded-2xl shadow-sm border border-gray-100 max-w-4xl">
            <table className="w-full text-left border-collapse">
                <thead>
                    <tr className="bg-gray-50 border-b border-gray-100">
                        <th className="px-6 py-4 text-xs font-bold uppercase tracking-wider text-gray-400">Name</th>
                        <th className="px-6 py-4 text-xs font-bold uppercase tracking-wider text-gray-400">Class</th>
                        <th className="px-6 py-4 text-xs font-bold uppercase tracking-wider text-gray-400 text-right">Action</th>
                    </tr>
                </thead>

                <tbody className="divide-y divide-gray-50">
                    {Array.isArray(student) && student.map((student) => (
                        <tr key={student._id} className="hover:bg-amber-50/40 transition-colors">
                            <td className="px-6 py-4 text-sm font-medium text-gray-900">{student.name}</td>
                            <td className="px-6 py-4 text-sm text-gray-600">
                                <span className="bg-orange-50 text-orange-700 px-2.5 py-0.5 rounded text-xs font-semibold border border-orange-100/50">
                                    {student.studentClass}
                                </span>
                            </td>
                            <td className="px-6 py-4 text-sm text-right">
                                <button 
                                    onClick={()=> handleDelete(student._id)}
                                    className="bg-red-50 text-red-600 border border-red-100 px-3 py-1.5 rounded-lg text-xs font-bold hover:bg-red-600 hover:text-white transition-all shadow-sm"
                                >
                                    Delete
                                </button>
                            </td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
        </div>
    )
}
export default Student;
