import React, { useState, useEffect } from 'react';
import axios from 'axios';

const Department = () => {
  // 1. Twongereyeho "TotalDeduction" muri state
  const [dept, setDept] = useState({ 
    DepartementCode: '', 
    DepartementName: '', 
    GrossSalary: '', 
    TotalDeduction: '' 
  });
  
  const [departments, setDepartments] = useState([]);

  const fetchDepartments = async () => {
    try {
      const res = await axios.get('http://localhost:5000/api/department');
      setDepartments(res.data);
    } catch (err) { console.error("Error loading departments:", err); }
  };

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

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      // Emeza ko backend yawe ikira izi nkingi zose
      await axios.post('http://localhost:5000/api/department', dept);
      alert('Department added successfully!');
      fetchDepartments();
      setDept({ DepartementCode: '', DepartementName: '', GrossSalary: '', TotalDeduction: '' });
    } catch (err) { alert(err.message); }
  };

  return (
    <div className="p-6">
      <h2 className="text-2xl font-bold mb-4">Department Management</h2>
      
      {/* 2. Ifomu ifite input ya 4 */}
      <form onSubmit={handleSubmit} className="mb-8 grid grid-cols-2 md:grid-cols-4 gap-2">
        <input className="border p-2" placeholder="Code (e.g. IT)" value={dept.DepartementCode} onChange={e => setDept({...dept, DepartementCode: e.target.value})} required />
        <input className="border p-2" placeholder="Dept Name" value={dept.DepartementName} onChange={e => setDept({...dept, DepartementName: e.target.value})} required />
        <input className="border p-2" type="number" placeholder="Gross Salary" value={dept.GrossSalary} onChange={e => setDept({...dept, GrossSalary: e.target.value})} required />
        <input className="border p-2" type="number" placeholder="Total Deduction" value={dept.TotalDeduction} onChange={e => setDept({...dept, TotalDeduction: e.target.value})} required />
        <button className="bg-blue-600 text-white p-2 col-span-2 md:col-span-4 rounded">Save Department</button>
      </form>

      {/* 3. Table nshya ifite inkingi ya Deduction */}
      <table className="w-full bg-white shadow rounded">
        <thead className="bg-gray-200">
          <tr className="text-left">
            <th className="p-2">Code</th>
            <th className="p-2">Name</th>
            <th className="p-2">Gross Salary</th>
            <th className="p-2">Total Deduction</th>
          </tr>
        </thead>
        <tbody>
          {departments.map((d) => (
            <tr key={d.DepartementCode} className="border-b">
              <td className="p-2">{d.DepartementCode}</td>
              <td className="p-2">{d.DepartementName}</td>
              <td className="p-2">{d.GrossSalary}</td>
              <td className="p-2 text-red-600">{d.TotalDeduction}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};
export default Department;