import { useEffect, useState } from 'react';
import { fetchAssessments } from '../../api.js';
import './admin-shared.css';
import './AdminPendingActionsPage.css';

function AdminPendingActionsPage({ onAssignVideo }) {
  const [rows, setRows] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    fetchAssessments()
      .then((assessments) => {
        const pending = assessments.filter((a) => {
          const label = (a.assessment_status_name || '').toLowerCase();
          return label.includes('not started') || a.assessment_status_id === 1;
        });
        setRows(pending);
      })
      .catch((e) => setError(e.message))
      .finally(() => setLoading(false));
  }, []);

  return (
    <main className="dashboard-main admin-pending-page">
      <header className="admin-page-header admin-page-header--with-actions">
        <div>
          <div className="admin-page-badge">Assign videos</div>
          <h1>Assign Videos</h1>
          <p>Assessments that need executor and verifier assignment.</p>
        </div>
      </header>

      {error && <div style={{ color: 'var(--theme-red)', fontSize: 14 }}>{error}</div>}

      <section className="dashboard-section admin-pending-section">
        <div className="admin-table-toolbar">
          <div className="admin-table-meta">
            {loading ? 'Loading...' : `${rows.length} pending assessments`}
          </div>
        </div>

        <div className="admin-pending-table-wrapper">
          <table className="admin-pending-table">
            <thead>
              <tr>
                <th>ID</th>
                <th>Video Title</th>
                <th>Contract Details</th>
                <th>Capture Date</th>
                <th>Capture Time</th>
                <th>Remarks</th>
                <th>Status</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              {!loading && rows.length === 0 && (
                <tr><td colSpan={8} style={{ textAlign: 'center', color: 'var(--theme-gray-400)', padding: 24 }}>No pending assessments</td></tr>
              )}
              {rows.map((row) => (
                <tr key={row.assessment_id}>
                  <td>{row.assessment_id}</td>
                  <td>{row.video_title || '—'}</td>
                  <td>{(row.contract_details ?? row.contact_details) || '—'}</td>
                  <td>{row.video_capture_date || '—'}</td>
                  <td>{row.video_capture_time || '—'}</td>
                  <td>{row.remarks || '—'}</td>
                  <td>
                    <span className="status-pill status-pill--warning">
                      {row.assessment_status_name || 'Not Started'}
                    </span>
                  </td>
                  <td>
                    <button
                      type="button"
                      className="admin-action-button"
                      onClick={() => onAssignVideo?.(row)}
                    >
                      Assign
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>
    </main>
  );
}

export default AdminPendingActionsPage;
