import React from 'react'
import { Head, router } from '@inertiajs/react'
import AdminLayout from '../../Layouts/AdminLayout'

const EVENT_LABELS = {
  login: 'Login',
  register: 'Register',
  forgot_password: 'Forgot password',
  reset_password: 'Reset password',
}

const STATUS_BADGES = {
  success: 'border-emerald-400/20 bg-emerald-400/10 text-emerald-200',
  failed: 'border-rose-400/20 bg-rose-400/10 text-rose-200',
}

function formatTimestamp(value) {
  if (!value) {
    return 'Unknown'
  }

  return new Intl.DateTimeFormat('en-GB', {
    dateStyle: 'medium',
    timeStyle: 'medium',
  }).format(new Date(value))
}

function formatLabel(value) {
  if (!value) {
    return 'Not recorded'
  }

  return value
    .replaceAll('_', ' ')
    .replace(/\b\w/g, (match) => match.toUpperCase())
}

function SummaryCard({ label, value, tone = 'slate' }) {
  const tones = {
    slate: 'border-white/[0.07] bg-white/[0.02] text-white',
    rose: 'border-rose-400/15 bg-rose-500/10 text-rose-100',
    sky: 'border-sky-400/15 bg-sky-500/10 text-sky-100',
  }

  return (
    <div className={`rounded-2xl border p-5 ${tones[tone] ?? tones.slate}`}>
      <p className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">{label}</p>
      <p className="mt-3 text-3xl font-semibold tracking-tight">{value}</p>
    </div>
  )
}

export default function AuthAudit({ logs, filters, eventOptions, statusOptions }) {
  const items = logs?.data ?? []
  const failedCount = items.filter((entry) => entry.status === 'failed').length
  const uniqueIpCount = new Set(items.map((entry) => entry.ip).filter(Boolean)).size

  const handleSearch = (event) => {
    event.preventDefault()
    const search = event.target.elements.search.value

    router.get('/moderation/auth-audit', {
      search,
      event: filters.event,
      status: filters.status,
    }, {
      preserveState: true,
      preserveScroll: true,
    })
  }

  const handleFilterChange = (key, value) => {
    router.get('/moderation/auth-audit', {
      search: filters.search,
      event: key === 'event' ? value : filters.event,
      status: key === 'status' ? value : filters.status,
    }, {
      preserveState: true,
      preserveScroll: true,
    })
  }

  return (
    <AdminLayout title="Auth Audit" subtitle="Review login, registration, forgot-password, and reset-password activity with IPs, timestamps, status, and failure reasons.">
      <Head title="Admin · Auth Audit" />

      <div className="grid gap-4 lg:grid-cols-3">
        <SummaryCard label="Visible records" value={items.length.toLocaleString()} tone="slate" />
        <SummaryCard label="Failures on page" value={failedCount.toLocaleString()} tone="rose" />
        <SummaryCard label="Unique IPs on page" value={uniqueIpCount.toLocaleString()} tone="sky" />
      </div>

      <div className="mt-6 rounded-[28px] border border-white/[0.07] bg-white/[0.02] p-5">
        <div className="flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between">
          <form onSubmit={handleSearch} className="flex flex-1 flex-col gap-3 md:flex-row">
            <label className="flex-1">
              <span className="mb-2 block text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Search</span>
              <input
                name="search"
                defaultValue={filters.search}
                placeholder="Email, username, IP, or failure reason"
                className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-white placeholder:text-slate-600 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
              />
            </label>
            <button type="submit" className="rounded-2xl bg-rose-500/80 px-5 py-3 text-sm font-semibold text-white transition hover:bg-rose-500">
              Search
            </button>
          </form>

          <div className="grid gap-3 md:grid-cols-2 xl:min-w-[26rem]">
            <label>
              <span className="mb-2 block text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Event</span>
              <select
                value={filters.event}
                onChange={(event) => handleFilterChange('event', event.target.value)}
                className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-white focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
              >
                {eventOptions.map((option) => (
                  <option key={option.value} value={option.value} className="bg-slate-950 text-white">
                    {option.label}
                  </option>
                ))}
              </select>
            </label>

            <label>
              <span className="mb-2 block text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Status</span>
              <select
                value={filters.status}
                onChange={(event) => handleFilterChange('status', event.target.value)}
                className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-white focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
              >
                {statusOptions.map((option) => (
                  <option key={option.value} value={option.value} className="bg-slate-950 text-white">
                    {option.label}
                  </option>
                ))}
              </select>
            </label>
          </div>
        </div>
      </div>

      <div className="mt-6 overflow-hidden rounded-[28px] border border-white/[0.07] bg-white/[0.02]">
        <div className="overflow-x-auto">
          <table className="w-full min-w-[980px] text-sm">
            <thead>
              <tr className="border-b border-white/[0.07] text-left text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">
                <th className="px-5 py-4">When</th>
                <th className="px-5 py-4">Event</th>
                <th className="px-5 py-4">Status</th>
                <th className="px-5 py-4">Identifier</th>
                <th className="px-5 py-4">User</th>
                <th className="px-5 py-4">IP</th>
                <th className="px-5 py-4">Reason</th>
                <th className="px-5 py-4">Details</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-white/[0.05]">
              {items.length === 0 ? (
                <tr>
                  <td colSpan={8} className="px-5 py-12 text-center text-slate-500">No auth audit records matched the current filters.</td>
                </tr>
              ) : items.map((entry) => (
                <tr key={entry.id} className="align-top transition hover:bg-white/[0.025]">
                  <td className="px-5 py-4 text-slate-300">{formatTimestamp(entry.created_at)}</td>
                  <td className="px-5 py-4 text-white">{EVENT_LABELS[entry.event_type] ?? formatLabel(entry.event_type)}</td>
                  <td className="px-5 py-4">
                    <span className={`inline-flex rounded-full border px-2.5 py-1 text-xs font-semibold uppercase tracking-[0.16em] ${STATUS_BADGES[entry.status] ?? 'border-white/10 bg-white/[0.04] text-white/70'}`}>
                      {entry.status}
                    </span>
                  </td>
                  <td className="px-5 py-4 text-slate-300">{entry.identifier || 'Not recorded'}</td>
                  <td className="px-5 py-4">
                    {entry.user ? (
                      <div>
                        <p className="font-medium text-white">{entry.user.name}</p>
                        <p className="text-xs text-slate-500">{entry.user.username ? `@${entry.user.username}` : entry.user.email}</p>
                      </div>
                    ) : <span className="text-slate-500">Unknown user</span>}
                  </td>
                  <td className="px-5 py-4 text-slate-300">{entry.ip || 'Unknown'}</td>
                  <td className="px-5 py-4 text-slate-300">{formatLabel(entry.reason)}</td>
                  <td className="px-5 py-4">
                    <details className="group w-72 max-w-full">
                      <summary className="cursor-pointer list-none text-sm font-medium text-sky-200 transition hover:text-sky-100">
                        View payload
                      </summary>
                      <div className="mt-3 space-y-3 rounded-2xl border border-white/10 bg-black/20 p-4 text-xs text-slate-300">
                        <div>
                          <p className="font-semibold uppercase tracking-[0.16em] text-slate-500">User agent</p>
                          <p className="mt-1 break-words leading-5 text-slate-300">{entry.user_agent || 'Not recorded'}</p>
                        </div>
                        <div>
                          <p className="font-semibold uppercase tracking-[0.16em] text-slate-500">Metadata</p>
                          <pre className="mt-1 overflow-x-auto whitespace-pre-wrap break-words rounded-xl bg-slate-950/70 p-3 text-[11px] leading-5 text-slate-300">{JSON.stringify(entry.metadata || {}, null, 2)}</pre>
                        </div>
                      </div>
                    </details>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {logs?.last_page > 1 ? (
          <div className="flex items-center justify-between border-t border-white/[0.06] px-5 py-4">
            <p className="text-xs text-slate-500">
              Showing {logs.from}–{logs.to} of {logs.total} audit records
            </p>
            <div className="flex gap-1">
              {logs.links.map((link, index) => (
                link.url ? (
                  <button
                    key={`${link.label}-${index}`}
                    type="button"
                    onClick={() => router.get(link.url, {}, { preserveScroll: true, preserveState: true })}
                    className={`rounded-lg px-3 py-1.5 text-xs transition ${link.active ? 'bg-rose-500/20 font-semibold text-rose-300' : 'text-slate-500 hover:bg-white/[0.06] hover:text-white'}`}
                    dangerouslySetInnerHTML={{ __html: link.label }}
                  />
                ) : (
                  <span key={`${link.label}-${index}`} className="rounded-lg px-3 py-1.5 text-xs text-slate-700" dangerouslySetInnerHTML={{ __html: link.label }} />
                )
              ))}
            </div>
          </div>
        ) : null}
      </div>
    </AdminLayout>
  )
}