import React, {useEffect, useState} from 'react';
import {Link} from 'react-router-dom';
import {apiDelete, apiGet} from "../api";

function CompanyList() {
    const [companies, setCompanies] = useState([]);
    const [error,setError]=useState(null);

    useEffect(() => {
        apiGet('/api/companies')
            .then(setCompanies)
                .catch(error => setError(error));
    }, []);
            
        const handleDelete = async (id) => {
        if(window.confirm("Are you sure you want to delete this company?")) {
            try {
                await apiDelete(`/api/companies/${id}`);
                setCompanies(prev => prev.filter(c => c.id !== id)); // update local state
            } catch (err) {
                setError(err.message || "Failed to delete company");
            }
        }
    };

    return (
        <div className="container mt-4">
            <div className="d-flex justify-content-between align-items-center mb-3">
            <h2>Companies</h2>
            <p><Link to="/companies/new" className="btn btn-primary">+ Add company</Link></p>
            </div>
            {error && <div className="alter alter-danger">{error}</div>}            
            <table className='table table-striped table-hover'>
                <thead className='table-dark'>
                    <tr>
                        <th>Company Name</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {companies.map(company => (
                        <tr key={company.id}>
                            <td>{company.name}</td>
                            <td>
                                <Link to={`/companies/${company.id}/edit`} className="btn btn-sm btn-warning me-2">Edit</Link>
                                <button onClick={() => handleDelete(company.id)} className="btn btn-sm btn-danger">Delete</button>
                                <Link to={`/companies/${company.id}/jobs`} className="btn btn-sm btn-info ms-2">Jobs</Link>
                            </td>
                        </tr>
                    ))}
                </tbody>
            </table>           
            
        </div>
        );
}

export default CompanyList;