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

function Fees(){
    const [feesList, setFeesList] = useState([])
    const [amountInput, setAmountInput] = useState('')
    const [error, setError] = useState('')

    const fetchFees = async () => {
        try{
            const res = await axios.get('http://localhost:5000/api/fees')
            console.log("Fees Backend Response:", res.data);
            setFeesList(res.data);
        }catch(error){
            setError('Could not find fees')
        }
    }

    useEffect(() => {
        fetchFees();
    },[]);

    const handleSubmit = async (e) => {
        e.preventDefault();
        setError('');
        if(!amountInput.trim()){
            setError('please an amount before clicking add.');
            return;
        }
        try{
            await axios.post('http://localhost:5000/api/fees',{amount: amountInput});
            setAmountInput('');
            fetchFees();
        }catch(error){
            setError('Failed to create fees')
        }
    };
    
    const handleDelete = async (id) => {
        try{
            await axios.delete(`http://localhost:5000/api/fees/${id}`);
            fetchFees();
        }catch(error){
            setError('Failed to delete fee')
        }
    }

    return(
        <div className="min-h-screen bg-amber-200 p-6 font-sans flex flex-col gap-6">
            {/* Main Header */}
            <h2 className="text-3xl font-bold text-gray-900">Manage School Fee</h2>
            
            {/* Error Message 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>
            )}
            
            {/* Add Fee Form Container */}
            <form onSubmit={handleSubmit} className="bg-white p-6 rounded-2xl shadow-sm border border-amber-300/40 flex gap-3 max-w-md">
                <input 
                    type="text" 
                    value={amountInput}
                    placeholder="Enter amount (e.g. 500)"
                    onChange={(e) => setAmountInput(e.target.value)} 
                    className="flex-1 border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:border-orange-500"
                />
                <button 
                    type="submit" 
                    className="bg-orange-600 text-white font-medium px-4 py-2 rounded-lg hover:bg-orange-700 transition-colors text-sm"
                >
                    Add fee
                </button>
            </form>

            {/* Section Header */}
            <h2 className="text-xl font-bold text-gray-800 mt-4">Active fees</h2>
            
            {/* Active Fees List Wrapper Container */}
            <div className="flex flex-col gap-3 max-w-md">
                {Array.isArray(feesList) && feesList.map((fee) => (
                    <div 
                        key={fee._id} 
                        className="bg-white p-4 rounded-xl shadow-sm border border-gray-100 flex justify-between items-center gap-4"
                    >
                        <div className="flex flex-col gap-0.5">
                            <p className="text-xs font-semibold text-gray-400 tracking-wider">
                                ID: <span className="font-mono text-gray-600">{fee._id}</span>
                            </p>
                            <p className="text-lg font-bold text-gray-900">
                                Amount: <span className="text-orange-600">${fee.amount}</span>
                            </p>
                        </div>
                        <button 
                            onClick={() => handleDelete(fee._id)}
                            className="bg-red-50 text-red-600 border border-red-200 px-3 py-1.5 rounded-lg text-xs font-semibold hover:bg-red-600 hover:text-white transition-all shadow-sm"
                        >
                            Delete
                        </button>
                    </div>
                ))}
            </div>
        </div>
    )
}

export default Fees;
