import { Link } from 'react-router-dom'
import { Shield } from 'lucide-react'
import { ADMIN_GROUPS, adminGroupHubPath } from '../config/adminNav'

export default function AdminHomePage() {
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
        <Shield size={20} color="var(--accent)" />
        <h1 className="page-title" style={{ margin: 0 }}>Adminbereich</h1>
      </div>
      <p style={{ fontSize: 13, color: 'var(--text2)', marginBottom: 18, lineHeight: 1.6 }}>
        Wähle links oder oben eine <strong>Gruppe</strong>. Die einzelnen Verwaltungsseiten erreichst du auf der
        folgenden Gruppenseite – wie bei der KI-Analyse (Kategorie → Detail).
      </p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {ADMIN_GROUPS.map((group) => (
          <Link
            key={group.id}
            to={adminGroupHubPath(group.id)}
            className="card section-gap"
            style={{
              margin: 0,
              textDecoration: 'none',
              color: 'inherit',
              display: 'block',
            }}
          >
            <div style={{ fontWeight: 700, fontSize: 15, marginBottom: 6 }}>{group.label}</div>
            <div style={{ fontSize: 12, color: 'var(--text2)', lineHeight: 1.5 }}>
              {group.description}
            </div>
            <div style={{ fontSize: 11, color: 'var(--text3)', marginTop: 8 }}>
              {group.items.length} {group.items.length === 1 ? 'Bereich' : 'Bereiche'}
            </div>
          </Link>
        ))}
      </div>
    </div>
  )
}
