import { useParams, Navigate, Link } from 'react-router-dom'
import { ADMIN_GROUPS } from '../config/adminNav'

export default function AdminGroupHubPage() {
  const { groupId } = useParams()
  const group = ADMIN_GROUPS.find((g) => g.id === groupId)

  if (!group) {
    return <Navigate to="/admin" replace />
  }

  return (
    <div>
      <h2 className="page-title" style={{ margin: '0 0 8px', fontSize: 18 }}>
        {group.label}
      </h2>
      <p style={{ fontSize: 13, color: 'var(--text2)', marginBottom: 18, lineHeight: 1.6 }}>
        {group.description}
      </p>
      <p style={{ fontSize: 12, fontWeight: 600, color: 'var(--text3)', marginBottom: 12 }}>
        Bereich wählen · {group.items.length}{' '}
        {group.items.length === 1 ? 'Seite' : 'Seiten'}
      </p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {group.items.map((item) => (
          <Link
            key={item.to}
            to={item.to}
            className="card section-gap"
            style={{
              margin: 0,
              textDecoration: 'none',
              color: 'inherit',
              borderColor: 'var(--accent)',
              borderWidth: 2,
              display: 'block',
            }}
          >
            <div style={{ fontWeight: 700, fontSize: 15, color: 'var(--accent)', marginBottom: 4 }}>
              {item.label}
            </div>
            {item.description && (
              <div style={{ fontSize: 12, color: 'var(--text2)', lineHeight: 1.5 }}>
                {item.description}
              </div>
            )}
          </Link>
        ))}
      </div>
      <div style={{ marginTop: 20 }}>
        <Link to="/admin" className="btn btn-secondary" style={{ fontSize: 13 }}>
          ← Zur Übersicht
        </Link>
      </div>
    </div>
  )
}