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

function JobList() {
    const [jobs, setJobs] = React.useState([]);
    const [error,setError]=React.useState(null);

    React.useEffect(() => {
        apiGet('/api/jobs')
            .then(setJobs)
                .catch(error => setError(error.message));
    }, []);

    const handleDelete = async (id) => {
        if(window.confirm("Are you sure you want to delete this job?")) {
            try {
                await apiDelete(`/api/jobs/${id}`);
                setJobs(prev => prev.filter(j => j.id !== id)); // update local state
            } catch (err) {
                setError(err.message || "Failed to delete job");
            }
        }
    };

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

export default JobList;