import { Link } from 'react-router-dom'
import { Inbox } from 'lucide-react'
import { useOrgInbox } from '../context/OrgInboxContext'

/**
 * Desktop-Dashboard: Hinweis auf offene Beitrittsanträge (nur ab 1024px sichtbar via CSS).
 */
export default function DashboardOrgInboxWidget() {
  const { canAccessOrgInbox, inboxJoinRequests, inboxCount } = useOrgInbox()

  if (!canAccessOrgInbox) return null

  const preview = (inboxJoinRequests || []).slice(0, 5)

  return (
    <section
      className="dashboard-org-inbox-widget"
      aria-labelledby="dash-org-inbox-title"
    >
      <div className="dashboard-org-inbox-widget__inner card">
        <div className="dashboard-org-inbox-widget__head">
          <h2 id="dash-org-inbox-title" className="dashboard-org-inbox-widget__title">
            <Inbox size={20} strokeWidth={2} aria-hidden className="dashboard-org-inbox-widget__icon" />
            Posteingang
          </h2>
          {inboxCount > 0 ? (
            <span className="dashboard-org-inbox-widget__badge" aria-live="polite">
              {inboxCount}
            </span>
          ) : null}
        </div>
        <p className="muted dashboard-org-inbox-widget__lead">
          {inboxCount === 0
            ? 'Keine offenen Beitrittsanträge.'
            : `${inboxCount} offene Beitrittsantrag${inboxCount === 1 ? '' : 'e'}.`}
        </p>
        {preview.length > 0 ? (
          <ul className="dashboard-org-inbox-widget__list">
            {preview.map((req) => (
              <li key={`${req.club_id}-${req.id}`} className="dashboard-org-inbox-widget__item">
                <span className="dashboard-org-inbox-widget__club">{req.club_name || 'Verein'}</span>
                <span className="dashboard-org-inbox-widget__applicant">
                  {req.applicant_name || req.applicant_email || 'Bewerber/in'}
                </span>
              </li>
            ))}
          </ul>
        ) : null}
        <div className="dashboard-org-inbox-widget__footer">
          <Link to="/inbox" className="btn btn-secondary" style={{ textDecoration: 'none' }}>
            Zum Posteingang
          </Link>
        </div>
      </div>
    </section>
  )
}