import React, { useEffect, useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import apiFetch from '../auth/apiFetch.js';

export default function CareerProfileList() {
  const [rows, setRows] = useState([]);
const nav = useNavigate();

  useEffect(() => {
    (async () => {
      try {
        const r = await apiFetch('/api/premium/career-profile/all');
        if (!r.ok) {
          // apiFetch already fires session-expired on 401/403, just bail
          return;
        }
        const d = await r.json();
        setRows(d.careerProfiles || []);
      } catch (e) {
        console.error('Failed to load career profiles:', e);
      }
    })();
  }, []);

  async function remove(row) {
    if (!window.confirm('Delete this career profile?')) return;
    try {
      const r = await apiFetch(`/api/premium/career-profile/${encodeURIComponent(row.id)}`, {
        method: 'DELETE'
      });
      if (!r.ok) {
        // 401/403 handled by apiFetch
        const msg = await r.text().catch(() => 'Failed to delete');
        alert(msg || 'Failed to delete');
        return;
      }
      setRows(prev => prev.filter(x => x.id !== row.id));
    } catch (e) {
      console.error('Delete failed:', e);
      alert('Failed to delete');
    }
  }
    
    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/${encodeURIComponent(r.id)}/edit`}
                  className="underline text-blue-600"
                >edit</Link>
                <button
                  onClick={() => remove(r)}
                  className="text-red-600 underline"
                >
                  delete
                </button>
              </td>
            </tr>
          ))}
          {rows.length === 0 && (
            <tr>
              <td colSpan={5} className="p-6">
                <div className="text-center space-y-3">
                  <p className="text-gray-600">No career profiles yet.</p>
                  <div className="flex justify-center gap-2">
                    <Link to="/premium-onboarding" className="px-3 py-2 bg-gray-200 rounded">
                      Start Premium Onboarding
                    </Link>
                    <button
                      onClick={() => nav('/profile/careers/new/edit')}
                      className="px-3 py-2 bg-blue-600 text-white rounded"
                    >
                      + Create first profile
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          )}
        </tbody>
      </table>
    </div>
  );
}