import ConfirmModal from './ConfirmModal';
import {useState} from "react";
import {showToast} from "../utils/appUtils.js"

export default function Table({handleOpen, tableData, onDelete}){

    const [showConfirm, setShowConfirm] = useState(false);
    const [selectedId, setSelectedId] = useState(null);

    const confirmDelete = () => {
        setShowConfirm(false);
        onDelete(selectedId);
        showToast("ลบข้อมูลเรียบร้อยแล้ว", "success");
    };

    const cancelDelete = () => {
        setShowConfirm(false);
        showToast("ยกเลิกการลบ", "info");
    };

    const employees = tableData;

    const handleDelete = (id)=>{
        setSelectedId(id);
        setShowConfirm(true);
    }

    return(
        <>
            <div className="overflow-x-auto mt-5">
                <table className="table">
                    {/* head */}
                    <thead>
                    <tr>
                        <th>Id</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Job</th>
                        <th>Department</th>
                        <th>Status</th>
                        <th className="text-center">Actions</th>
                    </tr>
                    </thead>

                    <tbody>
                    {/* row */}
                    {employees.map((employee)=>(
                        <tr className="hover:bg-base-300" key={employee.id}>
                            <td>{employee.id}</td>
                            <td>{employee.name}</td>
                            <td>{employee.mail}</td>
                            <td>{employee.job}</td>
                            <td>{employee.department}</td>
                            <td>
                                <button className={`btn rounded-full w-20 ${employee.active ? `btn-primary`: `btn-outline btn-primary`}`}>
                                    {employee.active ? 'Active' : 'Inactive'}
                                </button>
                            </td>
                            <td>
                                <div className="flex justify-center gap-2">
                                    {/* ปุ่ม Update พร้อมไอคอน */}
                                    <button
                                        className="btn btn-xs btn-accent flex items-center gap-1"
                                        onClick={() => handleOpen('edit', employee)}
                                        title="Update Employee"
                                    >
                                        ✏️
                                    </button>
                                    {/* ปุ่ม Delete แบบไอคอน */}
                                    <button
                                        className="btn btn-xs btn-secondary flex items-center gap-1"
                                        onClick={() => handleDelete(employee.id)}
                                        title="Delete Employee"
                                    >
                                        🗑️
                                    </button>
                                </div>
                            </td>
                        </tr>
                    ))}
                    </tbody>
                </table>
            </div>
            {/* Confirm Dialog */}
            <ConfirmModal
                message="คุณแน่ใจหรือไม่ว่าต้องการลบข้อมูลนี้?"
                isOpen={showConfirm}
                onConfirm={confirmDelete}
                onCancel={cancelDelete}
            />
        </>
    )
}