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 {
    canShowInboxNav,
    inboxJoinRequests,
    inboxClubCreationRequests,
    clubCreationRequestCount,
    inboxCount,
  } = useOrgInbox()

  if (!canShowInboxNav) return null

  const preview = [
    ...(inboxClubCreationRequests || []).map((req) => ({
      key: `creation-${req.id}`,
      club: req.proposed_name || 'Neuer Verein',
      applicant: req.applicant_name || req.applicant_email || 'Antragsteller/in',
      kind: 'creation',
    })),
    ...(inboxJoinRequests || []).map((req) => ({
      key: `${req.club_id}-${req.id}`,
      club: req.club_name || 'Verein',
      applicant: req.applicant_name || req.applicant_email || 'Bewerber/in',
      kind: 'join',
    })),
  ].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 Anträge.'
            : [
                clubCreationRequestCount > 0
                  ? `${clubCreationRequestCount} Gründungsantrag${clubCreationRequestCount === 1 ? '' : 'e'}`
                  : null,
                (inboxJoinRequests || []).length > 0
                  ? `${(inboxJoinRequests || []).length} Beitrittsantrag${(inboxJoinRequests || []).length === 1 ? '' : 'e'}`
                  : null,
              ]
                .filter(Boolean)
                .join(' · ')}
        </p>
        {preview.length > 0 ? (
          <ul className="dashboard-org-inbox-widget__list">
            {preview.map((req) => (
              <li key={req.key} className="dashboard-org-inbox-widget__item">
                <span className="dashboard-org-inbox-widget__club">
                  {req.kind === 'creation' ? 'Gründung: ' : ''}
                  {req.club}
                </span>
                <span className="dashboard-org-inbox-widget__applicant">{req.applicant}</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>
  )
}