import React, { useEffect, useState } from 'react';
import { Link, useNavigate, useLocation } from 'react-router-dom';

export default function CareerProfileList() {
  const [rows, setRows] = useState([]);
  const nav              = useNavigate();
  const token            = localStorage.getItem('token');

  useEffect(() => {
    fetch('/api/premium/career-profile/all', {
      headers: { Authorization: `Bearer ${token}` }
    })
      .then(r => r.json())
      .then(d => setRows(d.careerProfiles || []));
  }, [token]);

  async function remove(id) {
    if (!window.confirm('Delete this career profile?')) return;
    await fetch(`/api/premium/career-profile/${id}`, {
      method : 'DELETE',
      headers: { Authorization: `Bearer ${token}` }
    });
    setRows(rows.filter(r => r.id !== id));
  }

  return (
    <div className="max-w-4xl mx-auto space-y-4">
      <h2 className="text-2xl font-semibold">Career Profiles</h2>

      <button
        onClick={() => nav('/profile/careers/new/edit')}
        className="px-3 py-2 bg-blue-600 text-white rounded"
      >
        + New Career Profile
      </button>

      <table className="w-full border mt-4 text-sm">
        <thead className="bg-gray-100">
          <tr>
            <th className="p-2 text-left">Title</th>
            <th className="p-2 text-left">Status</th>
            <th className="p-2">Start</th>
            <th className="p-2"></th>
          </tr>
        </thead>
        <tbody>
          {rows.map(r => (
            <tr key={r.id} className="border-t">
              <td className="p-2">{r.scenario_title || r.career_name}</td>
              <td className="p-2">{r.status}</td>
              <td className="p-2">{r.start_date}</td>
              <td className="p-2 space-x-2">
                <Link
                  to={`/profile/careers/${r.id}/edit`}
                  className="underline text-blue-600"
                >
                  edit
                </Link>
                <button
                  onClick={() => remove(r.id)}
                  className="text-red-600 underline"
                >
                  delete
                </button>
              </td>
            </tr>
          ))}
          {rows.length === 0 && (
            <tr>
              <td colSpan={5} className="p-4 text-center text-gray-500">
                No career profiles yet
              </td>
            </tr>
          )}
        </tbody>
      </table>
    </div>
  );
}