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

function formatDateTime(value) {
  if (!value) return '—'
  const date = new Date(value)
  if (Number.isNaN(date.getTime())) return '—'
  return new Intl.DateTimeFormat('en', { dateStyle: 'medium', timeStyle: 'short' }).format(date)
}

function Field({ label, children }) {
  return (
    <div className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">
      <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">{label}</div>
      <div className="mt-2 text-sm leading-7 text-slate-100">{children}</div>
    </div>
  )
}

export default function StaffApplicationShow({ title, item, backUrl }) {
  const payload = item?.payload || {}

  return (
    <AdminLayout title={title || 'Staff Application'} subtitle="Read the full submission in a moderation-friendly layout.">
      <Head title="Moderation · Staff Application" />

      <section className="rounded-[32px] border border-white/10 bg-[radial-gradient(circle_at_top_left,rgba(34,211,238,0.12),transparent_34%),linear-gradient(180deg,rgba(15,23,42,0.96),rgba(2,6,23,0.92))] p-6 shadow-[0_24px_70px_rgba(2,6,23,0.32)]">
        <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
          <div>
            <p className="text-[11px] font-semibold uppercase tracking-[0.28em] text-sky-200/80">Moderation surface</p>
            <h1 className="mt-3 text-3xl font-semibold tracking-[-0.04em] text-white">{item?.name || 'Staff application'}</h1>
            <p className="mt-2 max-w-3xl text-sm leading-relaxed text-slate-300">Topic: {String(item?.topic || 'contact').replaceAll('_', ' ')} • Received {formatDateTime(item?.created_at)}</p>
          </div>

          <div className="flex flex-wrap gap-3">
            <Link href={backUrl} className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.05] px-5 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-white transition hover:bg-white/[0.09]">
              Back
            </Link>
            {item?.email ? (
              <a href={`mailto:${item.email}`} className="inline-flex items-center gap-2 rounded-full border border-sky-300/20 bg-sky-400/12 px-5 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-sky-50 transition hover:bg-sky-400/18">
                Email
              </a>
            ) : null}
          </div>
        </div>
      </section>

      <div className="mt-8 grid gap-6 xl:grid-cols-[1.35fr_0.85fr]">
        <div className="space-y-4">
          <div className="grid gap-4 md:grid-cols-2">
            <Field label="Name">{item?.name || '—'}</Field>
            <Field label="Email">{item?.email || '—'}</Field>
            <Field label="Role">{item?.role || '—'}</Field>
            <Field label="Portfolio">{item?.portfolio ? <a href={item.portfolio} className="text-sky-300 hover:text-sky-200" target="_blank" rel="noreferrer">{item.portfolio}</a> : '—'}</Field>
          </div>

          <div className="rounded-[28px] border border-white/10 bg-[#08111d] p-5 shadow-[0_18px_48px_rgba(2,6,23,0.2)]">
            <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">Message</div>
            <div className="mt-3 whitespace-pre-wrap rounded-2xl border border-white/10 bg-slate-950/60 px-4 py-4 text-sm leading-7 text-slate-100">
              {item?.message || 'No message included.'}
            </div>
          </div>
        </div>

        <aside className="space-y-4">
          <div className="rounded-[28px] border border-white/10 bg-[#08111d] p-5 shadow-[0_18px_48px_rgba(2,6,23,0.2)]">
            <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">Metadata</div>
            <div className="mt-4 space-y-3 text-sm text-slate-200">
              <div><span className="font-semibold text-white">Received:</span> {formatDateTime(item?.created_at)}</div>
              <div><span className="font-semibold text-white">IP:</span> {item?.ip || '—'}</div>
              <div><span className="font-semibold text-white">User agent:</span> {item?.user_agent || '—'}</div>
              <div><span className="font-semibold text-white">ID:</span> {item?.id || '—'}</div>
            </div>
          </div>

          <div className="rounded-[28px] border border-white/10 bg-[#08111d] p-5 shadow-[0_18px_48px_rgba(2,6,23,0.2)]">
            <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">Payload</div>
            <pre className="mt-3 max-h-[420px] overflow-auto rounded-2xl border border-white/10 bg-slate-950/70 px-4 py-4 text-xs leading-6 text-slate-200">
              {JSON.stringify(payload, null, 2)}
            </pre>
          </div>
        </aside>
      </div>
    </AdminLayout>
  )
}
