import { Link } from 'react-router-dom'

export function GateContributionsSection({ contributions, initiativeId, loading, error }) {
  if (loading) return <p className="muted">Ist-Beiträge werden geladen…</p>
  if (error) return <p className="error">{error}</p>
  if (!contributions) return null

  const { counts } = contributions
  if (counts.total === 0) {
    return (
      <section className="card gate-contributions">
        <h2>Ist-Beiträge</h2>
        <p className="section-lead muted">
          Noch keine Verknüpfung — ordne Backlog, Projekte, Arbeitspakete oder Aufgaben diesem Gate zu.
        </p>
      </section>
    )
  }

  return (
    <section className="card gate-contributions">
      <h2>Ist-Beiträge</h2>
      <p className="section-lead muted">
        Operative Arbeit, die auf diesen Zielzustand einzahlt ({counts.total} Verknüpfung
        {counts.total === 1 ? '' : 'en'}).
      </p>
      <div className="gate-contributions-grid">
        {contributions.actions?.length > 0 && (
          <div>
            <h3>Arbeitspakete</h3>
            <ul className="item-list compact-list">
              {contributions.actions.map((item) => (
                <li key={item.id}>
                  <Link
                    to={`/initiatives/${initiativeId}/actions/${item.id}`}
                    className="link-button"
                  >
                    {item.title}
                  </Link>
                  <span className="muted"> — {item.status}</span>
                </li>
              ))}
            </ul>
          </div>
        )}
        {contributions.backlog_items?.length > 0 && (
          <div>
            <h3>Backlog</h3>
            <ul className="item-list compact-list">
              {contributions.backlog_items.map((item) => (
                <li key={item.id}>
                  {item.title}
                  <span className="muted"> — {item.status}</span>
                </li>
              ))}
            </ul>
          </div>
        )}
        {contributions.projects?.length > 0 && (
          <div>
            <h3>Projekte</h3>
            <ul className="item-list compact-list">
              {contributions.projects.map((item) => (
                <li key={item.id}>
                  {item.title}
                  <span className="muted"> — {item.status}</span>
                </li>
              ))}
            </ul>
          </div>
        )}
        {contributions.tasks?.length > 0 && (
          <div>
            <h3>Aufgaben</h3>
            <ul className="item-list compact-list">
              {contributions.tasks.map((item) => (
                <li key={item.id}>
                  <Link
                    to={`/initiatives/${initiativeId}/actions/${item.action_id}`}
                    className="link-button"
                  >
                    {item.title}
                  </Link>
                  <span className="muted"> ({item.action_title})</span>
                </li>
              ))}
            </ul>
          </div>
        )}
      </div>
    </section>
  )
}