import { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import { getActorWorkload } from '../../api/workspace.js'
import { ModeShell } from '../../components/ModeShell.jsx'
import { LoadingState } from '../../components/LoadingState.jsx'
import { ErrorState } from '../../components/ErrorState.jsx'
import { scopedPath } from '../../utils/routes.js'

export function TeamPage() {
  const [rows, setRows] = useState(null)
  const [error, setError] = useState(null)

  useEffect(() => {
    let cancelled = false
    getActorWorkload()
      .then((data) => {
        if (!cancelled) setRows(data)
      })
      .catch((err) => {
        if (!cancelled) setError(err.message)
      })
    return () => {
      cancelled = true
    }
  }, [])

  return (
    <div className="app-page">
      <ModeShell modeKey="team" />
      {rows === null && !error && <LoadingState message="Lade Team-Auslastung …" />}
      {error && <ErrorState message={error} />}
      {rows && (
        <section className="card">
          <h2 className="card-title">Auslastung nach Actor</h2>
          {rows.length === 0 ? (
            <p className="muted">Keine Zuweisungen im Portfolio.</p>
          ) : (
            <ul className="team-workload-list">
              {rows.map((row) => (
                <li key={row.actor_id} className="team-workload-list__item">
                  <div>
                    <strong>{row.actor_name || row.actor_id}</strong>
                    <span className="muted">
                      {' '}
                      · {row.open_actions ?? 0} offen
                      {(row.blocked_actions ?? 0) > 0
                        ? ` · ${row.blocked_actions} blockiert`
                        : ''}
                    </span>
                  </div>
                  <Link to={scopedPath('/work/mine')} className="link-inline">
                    Queue ansehen
                  </Link>
                </li>
              ))}
            </ul>
          )}
          <p className="page-footer-link muted">
            AP1.9b erweitert Team um Filter nach Vorhaben und direkte Zuweisungslinks.
          </p>
        </section>
      )}
    </div>
  )
}