import Link from 'next/link'
import type { AdminDashboardData } from '@/lib/admin-dashboard'

function formatDate(value: string | null): string {
  if (!value) return '—'
  return new Intl.DateTimeFormat('pl-PL', {
    dateStyle: 'medium',
    timeStyle: 'short',
    timeZone: 'Europe/Warsaw',
  }).format(new Date(value))
}

function maskEmail(email: string): string {
  const [localPart, domain] = email.split('@')
  if (!domain) return 'ukryty adres'
  const visible = localPart.length <= 2 ? localPart[0] ?? '' : localPart.slice(0, 2)
  return `${visible}…@${domain}`
}

function MetricCard({ label, value, detail }: { label: string; value: number; detail?: string }) {
  return (
    <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
      <p className="text-sm font-medium text-slate-600">{label}</p>
      <p className="mt-2 text-3xl font-bold tracking-tight text-slate-950">{value.toLocaleString('pl-PL')}</p>
      {detail ? <p className="mt-1 text-xs text-slate-500">{detail}</p> : null}
    </div>
  )
}

export default function AdminDashboard({ data }: { data: AdminDashboardData }) {
  return (
    <div className="min-h-screen bg-gradient-to-b from-slate-100 to-slate-200 px-4 pb-16 pt-28">
      <div className="mx-auto max-w-6xl">
        <div className="mb-8 flex flex-wrap items-start justify-between gap-4">
          <div>
            <p className="text-sm font-semibold uppercase tracking-[0.16em] text-blue-700">Administracja</p>
            <h1 className="mt-1 text-3xl font-bold tracking-tight text-slate-950">Pulpit Twoja Łódka</h1>
            <p className="mt-2 max-w-2xl text-sm text-slate-600">
              Statystyki biznesowe z bazy. Ruch na stronie i kanały pozyskania dodamy z Google Analytics w kolejnym etapie.
            </p>
          </div>
          <div className="flex flex-wrap gap-2">
            <Link
              href="/admin/import"
              className="rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700"
            >
              Import i moderacja OLX
            </Link>
            <Link
              href="/profil"
              className="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
            >
              Moje konto
            </Link>
          </div>
        </div>

        <section aria-labelledby="users-heading">
          <h2 id="users-heading" className="mb-3 text-lg font-bold text-slate-900">Użytkownicy</h2>
          <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
            <MetricCard label="Wszystkie konta" value={data.users.total} />
            <MetricCard label="Nowe konta — 24 h" value={data.users.last24Hours} />
            <MetricCard label="Nowe konta — 7 dni" value={data.users.last7Days} />
            <MetricCard label="Nowe konta — 30 dni" value={data.users.last30Days} />
          </div>
        </section>

        <section aria-labelledby="listings-heading" className="mt-8">
          <h2 id="listings-heading" className="mb-3 text-lg font-bold text-slate-900">Ogłoszenia</h2>
          <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
            <MetricCard label="Aktywne ogłoszenia" value={data.listings.active} detail={`łącznie zapisanych: ${data.listings.total}`} />
            <MetricCard label="Własne aktywne" value={data.listings.ownActive} detail={`opublikowane w 7 dni: ${data.listings.ownPublishedLast7Days}`} />
            <MetricCard label="Aktywne z importu" value={data.listings.importedActive} />
            <MetricCard label="Do moderacji" value={data.listings.pendingReview} detail={`importy oczekujące: ${data.imports.pending}`} />
          </div>
        </section>

        <div className="mt-8 grid gap-6 lg:grid-cols-2">
          <section className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm" aria-labelledby="imports-heading">
            <div className="flex items-center justify-between gap-4">
              <div>
                <h2 id="imports-heading" className="text-lg font-bold text-slate-900">Stan importu OLX</h2>
                <p className="mt-1 text-sm text-slate-600">Ostatnie wykrycie oferty: {formatDate(data.imports.lastSeenAt)}</p>
              </div>
              <Link href="/admin/import" className="text-sm font-semibold text-blue-700 hover:underline">
                Otwórz import →
              </Link>
            </div>
            <dl className="mt-5 grid grid-cols-2 gap-4 text-sm sm:grid-cols-4">
              <div><dt className="text-slate-500">Oczekujące</dt><dd className="mt-1 text-2xl font-bold text-amber-700">{data.imports.pending}</dd></div>
              <div><dt className="text-slate-500">Zatwierdzone</dt><dd className="mt-1 text-2xl font-bold text-emerald-700">{data.imports.approved}</dd></div>
              <div><dt className="text-slate-500">Odrzucone</dt><dd className="mt-1 text-2xl font-bold text-rose-700">{data.imports.rejected}</dd></div>
              <div><dt className="text-slate-500">Wygasłe</dt><dd className="mt-1 text-2xl font-bold text-slate-700">{data.imports.expired}</dd></div>
            </dl>
          </section>

          <section className="rounded-2xl border border-blue-200 bg-blue-50 p-6" aria-labelledby="analytics-heading">
            <h2 id="analytics-heading" className="text-lg font-bold text-slate-900">Co dodamy dalej</h2>
            <p className="mt-2 text-sm leading-relaxed text-slate-700">
              GA4 zbiera odsłony i źródła ruchu. Następny krok to zdarzenia: skuteczna rejestracja, rozpoczęcie formularza, publikacja oferty i kliknięcie kontaktu.
            </p>
            <p className="mt-3 text-sm font-medium text-blue-900">
              Dzięki temu zobaczymy faktyczną ścieżkę: wejście → konto → własne ogłoszenie.
            </p>
          </section>
        </div>

        <div className="mt-8 grid gap-6 lg:grid-cols-2">
          <section className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm" aria-labelledby="recent-users-heading">
            <h2 id="recent-users-heading" className="text-lg font-bold text-slate-900">Ostatnie rejestracje</h2>
            {data.recentUsers.length ? (
              <ul className="mt-4 divide-y divide-slate-100">
                {data.recentUsers.map((user) => (
                  <li key={`${user.email}-${user.createdAt ?? ''}`} className="flex items-center justify-between gap-4 py-3 text-sm">
                    <span className="min-w-0 truncate font-medium text-slate-800">{user.name?.trim() || maskEmail(user.email)}</span>
                    <time className="shrink-0 text-xs text-slate-500">{formatDate(user.createdAt)}</time>
                  </li>
                ))}
              </ul>
            ) : <p className="mt-4 text-sm text-slate-500">Brak zarejestrowanych użytkowników.</p>}
          </section>

          <section className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm" aria-labelledby="recent-listings-heading">
            <h2 id="recent-listings-heading" className="text-lg font-bold text-slate-900">Najnowsze ogłoszenia</h2>
            {data.recentListings.length ? (
              <ul className="mt-4 divide-y divide-slate-100">
                {data.recentListings.map((listing) => (
                  <li key={listing.slug} className="flex items-center justify-between gap-4 py-3 text-sm">
                    <div className="min-w-0">
                      <Link href={`/sklep/${listing.slug}`} className="block truncate font-medium text-slate-800 hover:text-blue-700 hover:underline">
                        {listing.title || 'Bez tytułu'}
                      </Link>
                      <span className="text-xs text-slate-500">{listing.source === 'own' ? 'Własne' : 'Import'} · {listing.status}</span>
                    </div>
                    <time className="shrink-0 text-xs text-slate-500">{formatDate(listing.publishedAt ?? listing.createdAt)}</time>
                  </li>
                ))}
              </ul>
            ) : <p className="mt-4 text-sm text-slate-500">Brak ogłoszeń w bazie.</p>}
          </section>
        </div>
      </div>
    </div>
  )
}