import { Link } from 'react-router-dom'
import { scopedPath } from '../utils/routes.js'

const AREAS = [
  {
    to: '/plan/gates',
    title: 'Plan',
    description: 'Roadmap, Gates und Plan-Ist — methodenneutral pflegen.',
    countKey: 'roadmapItems',
  },
  {
    to: '/work/today',
    title: 'Ausführung',
    description: 'Arbeitspakete, Zuweisungen, Blocker am Objekt.',
    countKey: 'actionsOpen',
  },
  {
    to: '/plan/inbox',
    title: 'Eingang',
    description: 'Backlog triagieren und in Arbeitspakete überführen.',
    countKey: 'backlog',
  },
  {
    to: '/control/journey',
    title: 'Nachvollziehbarkeit',
    description: 'Entscheidungen, Reviews, Nachweise über die Zeit.',
    countKey: null,
  },
]

export function InitiativeNavCards({ initiativeId, counts = {} }) {
  return (
    <section className="initiative-nav-cards">
      <h2 className="initiative-nav-cards-title">Pflege & Planung</h2>
      <div className="initiative-nav-cards-grid">
        {AREAS.map((area) => {
          const hint =
            area.countKey === 'backlog' && counts.backlog
              ? `${counts.backlog} Backlog`
              : area.countKey === 'actionsOpen' && counts.actionsOpen
                ? `${counts.actionsOpen} offen`
                : area.countKey === 'roadmapItems' && counts.roadmapItems
                  ? `${counts.roadmapItems} Plan-Elemente`
                  : null
          return (
            <Link
              key={area.to}
              to={scopedPath(area.to, { initiativeId })}
              className="initiative-nav-card card"
            >
              <h3>{area.title}</h3>
              <p className="muted">{area.description}</p>
              {hint && <span className="initiative-nav-card-hint">{hint}</span>}
            </Link>
          )
        })}
      </div>
    </section>
  )
}