import { useCallback, useEffect, useState } from 'react'
import { ArrowLeft, Loader2 } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import { Checkbox } from '@/components/ui/checkbox'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { ReportError } from '@/components/ui/reporting'
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog'
import { useNavigation } from '@/contexts/navigation-context'
import { registrationAccessRequest } from './use-registration-access'
import { ActivityHistory as History, activityTimezoneLabel, formatActivityDate as date, type RegistrationEvent as Event } from './activity-history'

type Registration = { id: number; name: string; username: string; email: string; status: string; mode: string; source: string; revision: number; createdAt: string; updatedAt: string; expired: boolean }
type Listing = { items: Registration[]; total: number; pages: number; timezone: string }
type Detail = { registration: Registration; fields: { key: string; label: string; value: string }[]; fieldsLabel: string; attachments: { name: string; url: string }[]; events: Event[]; profileUrl: string; timezone: string }
const statuses: Record<string, string> = { needs_review: 'Needs review', all: 'All tracked', pending_verification: 'Pending verification', pending_approval: 'Pending approval', verified: 'Verified', approved: 'Approved', rejected: 'Rejected' }
const message = (reason: unknown) => reason instanceof Error ? reason.message : 'The request failed. Please try again.'

export function RegistrationReview({ activity = false, blocked }: { activity?: boolean; blocked: boolean }) {
  const { currentTab, navigateTo } = useNavigation()
  const selectedId = !activity ? Number(currentTab?.match(/^registrations\/(\d+)$/)?.[1] || 0) : 0
  const [listing, setListing] = useState<Listing | null>(null)
  const [detail, setDetail] = useState<Detail | null>(null)
  const [events, setEvents] = useState<Event[]>([])
  const [timezone, setTimezone] = useState('UTC')
  const [page, setPage] = useState(1)
  const [status, setStatus] = useState('needs_review')
  const [search, setSearch] = useState('')
  const [query, setQuery] = useState('')
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [action, setAction] = useState('note')
  const [note, setNote] = useState('')
  const [applicantMessage, setApplicantMessage] = useState('')
  const [notify, setNotify] = useState(false)
  const [confirm, setConfirm] = useState(false)
  const load = useCallback(async (signal?: AbortSignal) => {
    setLoading(true); setError(null)
    try {
      if (activity) {
        const result = await registrationAccessRequest<{ items: Event[]; timezone: string }>(`activity?page=${page}`, undefined, signal)
        if (!Array.isArray(result.items)) throw Error('Activity is unavailable. Please retry.')
        setEvents(result.items); setTimezone(result.timezone)
      } else if (selectedId) {
        const result = await registrationAccessRequest<Detail>(`registrations/${selectedId}`, undefined, signal)
        if (!result.registration || !Array.isArray(result.fields)) throw Error('Registration details are unavailable.')
        setDetail(result); setTimezone(result.timezone); setAction(result.registration.status === 'pending_approval' ? 'approve' : result.registration.status === 'rejected' ? 'reopen' : 'note')
        setNote(''); setApplicantMessage(''); setNotify(false)
      } else {
        const result = await registrationAccessRequest<Listing>(`registrations?${new URLSearchParams({ page: String(page), status, search: query })}`, undefined, signal)
        if (!Array.isArray(result.items)) throw Error('Registrations are unavailable. Please retry.')
        setListing(result); setTimezone(result.timezone)
      }
    } catch (reason) { if (!signal?.aborted) setError(message(reason)) }
    finally { if (!signal?.aborted) setLoading(false) }
  }, [activity, page, selectedId, status, query])
  useEffect(() => { const controller = new AbortController(); void load(controller.signal); return () => controller.abort() }, [load])
  const decide = async () => {
    if (!detail || saving || blocked) return
    setSaving(true); setError(null)
    try {
      const result = await registrationAccessRequest<Detail>(`registrations/${selectedId}/decision`, { revision: detail.registration.revision, action, note, message: applicantMessage, notify })
      setDetail(result); setNote(''); setApplicantMessage(''); setNotify(false); setAction('note')
    } catch (reason) { setError(message(reason)) }
    finally { setSaving(false) }
  }
  if (blocked) return <Card className="max-w-4xl shadow-none"><CardContent className="pt-6 text-sm">Save or discard the workspace changes before reviewing accounts. Review actions use saved access settings.</CardContent></Card>
  const row = detail?.registration
  const actions = row ? ['note', ...(row.status === 'pending_approval' ? ['approve', 'reject'] : row.status === 'rejected' ? ['reopen'] : row.status === 'pending_verification' ? ['resend', 'verify'] : [])] : []
  return <div className="max-w-5xl space-y-6" aria-busy={loading || saving}>
    {selectedId > 0 && <Button variant="ghost" disabled={saving} onClick={() => navigateTo('customers/registration-access', 'registrations')}><ArrowLeft className="mr-2 size-4" />Back to registrations</Button>}
    {error && <ReportError message={error} onRetry={() => load()} />}
    {loading ? <p className="flex items-center gap-2 text-sm text-muted-foreground" role="status"><Loader2 className="size-4 animate-spin" />Loading {activity ? 'activity' : 'registrations'}…</p> : activity ? <Card className="shadow-none"><CardHeader><CardTitle>Registration activity</CardTitle><CardDescription>Registrations, account decisions and access setting changes from the last 90 days. Times in {activityTimezoneLabel(timezone)}.</CardDescription></CardHeader><CardContent><History items={events} timezone={timezone} /><div className="mt-6 flex flex-wrap items-center justify-between gap-3 border-t pt-4"><p className="text-xs text-muted-foreground">Page {page}</p><div className="flex gap-2"><Button variant="outline" size="sm" disabled={page === 1} onClick={() => setPage(value => value - 1)}>Previous</Button><Button variant="outline" size="sm" disabled={events.length < 20} onClick={() => setPage(value => value + 1)}>Next</Button></div></div></CardContent></Card> : selectedId && row ? <>
      <Card className="shadow-none"><CardHeader><CardTitle>{row.name || row.username}</CardTitle><CardDescription>{row.email} · @{row.username}</CardDescription></CardHeader><CardContent className="space-y-5">
        <dl className="grid gap-4 text-sm sm:grid-cols-3"><div><dt className="text-muted-foreground">Access status</dt><dd className="mt-1 font-medium">{statuses[row.status]}{row.expired ? ' · Link expired' : ''}</dd></div><div><dt className="text-muted-foreground">Registration source</dt><dd className="mt-1">{row.source === 'unknown' ? 'Unknown' : row.source === 'wordpress' ? 'WordPress registration' : 'WooCommerce registration'}</dd></div><div><dt className="text-muted-foreground">Registered</dt><dd className="mt-1">{date(row.createdAt, timezone)}</dd></div></dl>
        {row.mode === 'admin_approval' && <p className="text-sm text-muted-foreground">Administrator approval is separate from email verification. Approval does not prove the customer confirmed this email address.</p>}
        <Button asChild variant="link" className="h-auto p-0"><a href={detail.profileUrl}>Open WordPress user profile</a></Button>
      </CardContent></Card>
      <Card className="shadow-none"><CardHeader><CardTitle>{detail.fieldsLabel}</CardTitle><CardDescription>Passwords, hidden fields and sensitive values are excluded.</CardDescription></CardHeader><CardContent>{detail.fields.length ? <dl className="divide-y">{detail.fields.map(field => <div key={field.key} className="grid gap-1 py-3 first:pt-0 sm:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] sm:gap-6"><dt className="text-sm font-medium">{field.label}</dt><dd className="whitespace-pre-wrap break-words text-sm">{field.value || '—'}</dd></div>)}</dl> : <p className="text-sm text-muted-foreground">No safe registration field values are available.</p>}</CardContent></Card>
      {!!detail.attachments?.length && <Card className="shadow-none"><CardHeader><CardTitle>Current protected attachments</CardTitle><CardDescription>Authorized downloads from the registration form. These are current files, not historical copies.</CardDescription></CardHeader><CardContent><ul className="space-y-3">{detail.attachments.map(file => <li key={file.url}><a href={file.url} className="text-sm text-primary underline underline-offset-4">{file.name}</a></li>)}</ul></CardContent></Card>}
      <Card className="shadow-none"><CardHeader><CardTitle>Review action</CardTitle><CardDescription>Rejecting retains the account. Reopening returns it to review without granting access.</CardDescription></CardHeader><CardContent className="space-y-4">
        <div className="space-y-2"><Label htmlFor="registration-review-action">Action</Label><Select value={action} onValueChange={setAction} disabled={saving}><SelectTrigger id="registration-review-action" className="max-w-sm"><SelectValue /></SelectTrigger><SelectContent>{actions.map(value => <SelectItem key={value} value={value}>{({ note: 'Add internal note', approve: 'Approve account', reject: 'Reject application', reopen: 'Reopen for review', resend: 'Resend verification email', verify: 'Mark verified (administrator override)' } as Record<string, string>)[value]}</SelectItem>)}</SelectContent></Select></div>
        <div className="space-y-2"><Label htmlFor="registration-review-note">Internal note{['note', 'verify'].includes(action) ? ' (required)' : ''}</Label><Textarea id="registration-review-note" maxLength={2000} value={note} onChange={event => setNote(event.target.value)} disabled={saving} /><p className="text-xs text-muted-foreground">For administrators only. Never included in applicant emails.</p></div>
        {action === 'reject' && <div className="space-y-2"><Label htmlFor="registration-review-message">Message to applicant (optional)</Label><Textarea id="registration-review-message" maxLength={2000} value={applicantMessage} onChange={event => setApplicantMessage(event.target.value)} disabled={saving} /><p className="text-xs text-muted-foreground">Add {'{{rejection_message}}'} to the rejection email in Emails to include this text.</p></div>}
        {['approve', 'reject'].includes(action) && <label className="flex items-center gap-2 text-sm"><Checkbox checked={notify} disabled={saving} onCheckedChange={value => setNotify(value === true)} />Queue the configured applicant email, if enabled</label>}
        <Button disabled={saving || !!error || (['note', 'verify'].includes(action) && !note.trim())} onClick={() => setConfirm(true)}>{saving ? 'Saving…' : 'Continue'}</Button>
      </CardContent></Card>
      <Card className="shadow-none"><CardHeader><CardTitle>Recent activity</CardTitle><CardDescription>Times in {activityTimezoneLabel(timezone)}</CardDescription></CardHeader><CardContent><History items={detail.events} timezone={timezone} /></CardContent></Card>
    </> : !error && <Card className="shadow-none"><CardHeader><CardTitle>Tracked registrations</CardTitle><CardDescription>Only accounts tracked by Swift Commerce. This is not the full WordPress user list.</CardDescription></CardHeader><CardContent className="space-y-5">
      <form className="flex flex-wrap items-end gap-3" onSubmit={event => { event.preventDefault(); setPage(1); setQuery(search) }}><div className="min-w-48 flex-1 space-y-2"><Label htmlFor="registration-review-search">Username or email</Label><Input id="registration-review-search" value={search} onChange={event => setSearch(event.target.value)} /></div><div className="space-y-2"><Label htmlFor="registration-review-status">Status</Label><Select value={status} onValueChange={value => { setStatus(value); setPage(1) }}><SelectTrigger id="registration-review-status" className="w-52"><SelectValue /></SelectTrigger><SelectContent>{Object.entries(statuses).map(([value, label]) => <SelectItem key={value} value={value}>{label}</SelectItem>)}</SelectContent></Select></div><Button type="submit" variant="outline">Search</Button></form>
      {listing?.items.length ? <div className="overflow-x-auto"><table className="w-full text-left text-sm"><thead className="border-b text-muted-foreground"><tr><th className="py-3 pr-4 font-medium">Account</th><th className="p-3 font-medium">Access status</th><th className="p-3 font-medium">Source</th><th className="p-3 font-medium">Latest change</th><th className="py-3 pl-3"><span className="sr-only">Actions</span></th></tr></thead><tbody className="divide-y">{listing.items.map(item => <tr key={item.id}><td className="py-4 pr-4"><p className="font-medium">{item.name || item.username}</p><p className="text-muted-foreground">{item.email}</p></td><td className="p-3">{statuses[item.status]}{item.expired && <span className="block text-xs text-muted-foreground">Link expired</span>}</td><td className="p-3 capitalize">{item.source}</td><td className="whitespace-nowrap p-3">{date(item.updatedAt, timezone)}</td><td className="py-4 pl-3"><Button variant="outline" size="sm" onClick={() => navigateTo('customers/registration-access', `registrations/${item.id}`)}>Review</Button></td></tr>)}</tbody></table></div> : <p className="py-6 text-sm text-muted-foreground">No registrations match this view.</p>}
      <div className="flex flex-wrap items-center justify-between gap-3"><p className="text-xs text-muted-foreground">{listing?.total || 0} accounts · Page {page}</p><div className="flex gap-2"><Button variant="outline" size="sm" disabled={page === 1} onClick={() => setPage(value => value - 1)}>Previous</Button><Button variant="outline" size="sm" disabled={!listing || page >= listing.pages} onClick={() => setPage(value => value + 1)}>Next</Button></div></div>
    </CardContent></Card>}
    <AlertDialog open={confirm} onOpenChange={setConfirm}><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Confirm action for {row?.username}</AlertDialogTitle><AlertDialogDescription>{action === 'reject' ? 'Reject this application and retain its account with access restricted?' : action === 'approve' ? 'Grant account access by administrator approval?' : action === 'verify' ? 'Override the email check? This does not mean the customer confirmed their address.' : action === 'reopen' ? 'Return this rejected account to pending review? Access remains restricted.' : action === 'resend' ? 'Request a new verification email for this account?' : 'Save this internal note?'} {notify && ['approve', 'reject'].includes(action) ? 'The configured email will be queued if enabled.' : 'No approval or rejection email will be queued.'}</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction onClick={() => void decide()}>Confirm</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialog>
  </div>
}