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

const Employee = () => {
  const [emp, setEmp] = useState({
    employeeNumber: '', // Yongeyeho iyi
    FirstName: '', LastName: '', Position: '', Address: '',
    Telephone: '', Gender: '', hiredDate: '', DepartementCode: ''
  });

  const [departments, setDepartments] = useState([]);

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

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await axios.post('http://localhost:5000/api/employee', emp);
      alert('Employee registered successfully!');
      // Gusubiza form ku busa
      setEmp({ 
        employeeNumber: '', FirstName: '', LastName: '', Position: '', 
        Address: '', Telephone: '', Gender: '', hiredDate: '', DepartementCode: '' 
      });
    } catch (err) { 
      alert('Error: ' + err.message); 
      console.error(err);
    }
  };

  return (
    <div className="bg-white p-8 rounded-lg shadow-md max-w-2xl mx-auto">
      <h2 className="text-2xl font-bold mb-6 text-gray-800 border-b pb-2">Register New Employee</h2>
      
      <form onSubmit={handleSubmit} className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {/* Iyi ni yo nkingi ya 9 yari ibura */}
        <input className="border p-2 rounded col-span-2" placeholder="Employee Number (Unique ID)" value={emp.employeeNumber} onChange={e => setEmp({...emp, employeeNumber: e.target.value})} required />
        
        <input className="border p-2 rounded" placeholder="First Name" value={emp.FirstName} onChange={e => setEmp({...emp, FirstName: e.target.value})} required />
        <input className="border p-2 rounded" placeholder="Last Name" value={emp.LastName} onChange={e => setEmp({...emp, LastName: e.target.value})} required />
        
        <input className="border p-2 rounded" placeholder="Position" value={emp.Position} onChange={e => setEmp({...emp, Position: e.target.value})} required />
        <input className="border p-2 rounded" placeholder="Telephone" value={emp.Telephone} onChange={e => setEmp({...emp, Telephone: e.target.value})} required />
        
        <select className="border p-2 rounded" value={emp.Gender} onChange={e => setEmp({...emp, Gender: e.target.value})} required>
          <option value="">Select Gender</option>
          <option value="Male">Male</option>
          <option value="Female">Female</option>
        </select>
        
        <input type="date" className="border p-2 rounded" value={emp.hiredDate} onChange={e => setEmp({...emp, hiredDate: e.target.value})} required />
        <input className="border p-2 rounded col-span-2" placeholder="Address" value={emp.Address} onChange={e => setEmp({...emp, Address: e.target.value})} required />
        
        <select 
          className="border p-2 rounded col-span-2 w-full" 
          value={emp.DepartementCode} 
          onChange={e => setEmp({...emp, DepartementCode: e.target.value})} 
          required
        >
          <option value="">{departments.length === 0 ? "Loading..." : "-- Choose Department --"}</option>
          {departments.map((d) => (
            <option key={d.DepartementCode} value={d.DepartementCode}>
              {d.DepartementName} ({d.DepartementCode})
            </option>
          ))}
        </select>
        
        <button type="submit" className="col-span-2 bg-blue-600 text-white py-2 rounded-lg font-bold hover:bg-blue-700 transition">
          Save Employee
        </button>
      </form>
    </div>
  );
};

export default Employee;