// src/app/(dashboard)/admin/page.tsx
'use client'

import { useState, useEffect, useCallback } from 'react'
import { useSession } from 'next-auth/react'
import { Badge, statusBadgeVariant } from '@/components/ui/Badge'
import { Button } from '@/components/ui/Button'
import { Spinner } from '@/components/ui/Spinner'

type Tab = 'jobs' | 'services' | 'audit'

interface JobPost {
  id: string; title: string; companyName: string; status: string; createdAt: string
  employer?: { name: string; email: string }
}
interface ServiceListing {
  id: string; title: string; category: string; status: string; createdAt: string
  provider?: { name: string; email: string }
}
interface AuditLog {
  id: string; action: string; entity: string; entityId?: string; details?: string; createdAt: string
  user?: { name: string; email: string; role: string }
}

export default function AdminPage() {
  const { data: session } = useSession()
  const [tab, setTab] = useState<Tab>('jobs')
  const [jobs, setJobs] = useState<JobPost[]>([])
  const [services, setServices] = useState<ServiceListing[]>([])
  const [logs, setLogs] = useState<AuditLog[]>([])
  const [loading, setLoading] = useState(false)
  const [statusFilter, setStatusFilter] = useState('')

  const isAdmin = session?.user?.role === 'ADMIN'

  const load = useCallback(async () => {
    if (!isAdmin) return
    setLoading(true)
    try {
      if (tab === 'jobs') {
        const q = statusFilter ? `?status=${statusFilter}` : ''
        const r = await fetch(`/api/admin/jobs${q}`)
        const d = await r.json()
        setJobs(d.jobs ?? [])
      } else if (tab === 'services') {
        const q = statusFilter ? `?status=${statusFilter}` : ''
        const r = await fetch(`/api/admin/services${q}`)
        const d = await r.json()
        setServices(d.services ?? [])
      } else {
        const r = await fetch('/api/admin/audit')
        const d = await r.json()
        setLogs(d.logs ?? [])
      }
    } finally {
      setLoading(false)
    }
  }, [isAdmin, tab, statusFilter])

  useEffect(() => { load() }, [load])

  async function changeStatus(type: 'jobs' | 'services', id: string, status: string) {
    const endpoint = type === 'jobs' ? `/api/jobs/${id}` : `/api/services/${id}`
    await fetch(endpoint, {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ status }),
    })
    await load()
  }

  if (!session || !isAdmin) {
    return (
      <div className="page-header">
        <h1 className="page-title">Access Denied</h1>
        <p className="page-subtitle">Admin access required.</p>
      </div>
    )
  }

  const statusOptions = ['', 'pending', 'approved', 'rejected', 'draft']

  return (
    <div>
      <div className="page-header">
        <h1 className="page-title">Admin Panel</h1>
        <p className="page-subtitle">Moderate job posts, service listings, and view audit logs.</p>
      </div>

      {/* Tabs */}
      <div className="flex gap-1 mb-6 bg-neutral-100 rounded-xl p-1 w-fit">
        {(['jobs', 'services', 'audit'] as Tab[]).map((t) => (
          <button
            key={t}
            onClick={() => { setTab(t); setStatusFilter('') }}
            className={`px-4 py-2 rounded-lg text-sm font-semibold transition-all ${
              tab === t ? 'bg-white text-neutral-900 shadow-sm' : 'text-neutral-500 hover:text-neutral-700'
            }`}
            style={{ fontFamily: 'Space Grotesk, sans-serif' }}
          >
            {t.charAt(0).toUpperCase() + t.slice(1)}
          </button>
        ))}
      </div>

      {/* Filter */}
      {tab !== 'audit' && (
        <div className="flex gap-2 mb-5 flex-wrap">
          {statusOptions.map((s) => (
            <button
              key={s || 'all'}
              onClick={() => setStatusFilter(s)}
              className={`px-3 py-1.5 rounded-full text-xs font-semibold transition-all ${
                statusFilter === s
                  ? 'bg-brand-600 text-white'
                  : 'bg-white border border-neutral-200 text-neutral-600 hover:border-brand-300'
              }`}
            >
              {s || 'All'}
            </button>
          ))}
        </div>
      )}

      {loading ? (
        <div className="flex justify-center py-12"><Spinner size="lg" /></div>
      ) : tab === 'jobs' ? (
        <div className="space-y-3">
          {jobs.length === 0 && <p className="text-neutral-500 text-sm">No job posts found.</p>}
          {jobs.map((job) => (
            <div key={job.id} className="card p-5 flex flex-col sm:flex-row sm:items-center gap-4">
              <div className="flex-1 min-w-0">
                <p className="font-semibold text-neutral-900 truncate">{job.title}</p>
                <p className="text-sm text-neutral-500">{job.companyName} · {job.employer?.email}</p>
                <p className="text-xs text-neutral-400 mt-1">{new Date(job.createdAt).toLocaleDateString()}</p>
              </div>
              <div className="flex items-center gap-2 flex-wrap">
                <Badge variant={statusBadgeVariant(job.status)}>{job.status}</Badge>
                {job.status !== 'approved' && (
                  <Button size="sm" variant="secondary" onClick={() => changeStatus('jobs', job.id, 'approved')}>Approve</Button>
                )}
                {job.status !== 'rejected' && (
                  <Button size="sm" variant="danger" onClick={() => changeStatus('jobs', job.id, 'rejected')}>Reject</Button>
                )}
              </div>
            </div>
          ))}
        </div>
      ) : tab === 'services' ? (
        <div className="space-y-3">
          {services.length === 0 && <p className="text-neutral-500 text-sm">No service listings found.</p>}
          {services.map((svc) => (
            <div key={svc.id} className="card p-5 flex flex-col sm:flex-row sm:items-center gap-4">
              <div className="flex-1 min-w-0">
                <p className="font-semibold text-neutral-900 truncate">{svc.title}</p>
                <p className="text-sm text-neutral-500">{svc.category} · {svc.provider?.email}</p>
                <p className="text-xs text-neutral-400 mt-1">{new Date(svc.createdAt).toLocaleDateString()}</p>
              </div>
              <div className="flex items-center gap-2 flex-wrap">
                <Badge variant={statusBadgeVariant(svc.status)}>{svc.status}</Badge>
                {svc.status !== 'approved' && (
                  <Button size="sm" variant="secondary" onClick={() => changeStatus('services', svc.id, 'approved')}>Approve</Button>
                )}
                {svc.status !== 'rejected' && (
                  <Button size="sm" variant="danger" onClick={() => changeStatus('services', svc.id, 'rejected')}>Reject</Button>
                )}
              </div>
            </div>
          ))}
        </div>
      ) : (
        <div className="space-y-2">
          {logs.length === 0 && <p className="text-neutral-500 text-sm">No audit logs found.</p>}
          {logs.map((log) => (
            <div key={log.id} className="card p-4">
              <div className="flex items-start justify-between gap-4">
                <div>
                  <span className="inline-flex items-center gap-1.5 text-sm font-semibold text-neutral-900">
                    <Badge variant="blue">{log.action}</Badge>
                    <span className="text-neutral-600">{log.entity}</span>
                  </span>
                  {log.details && <p className="text-xs text-neutral-500 mt-1">{log.details}</p>}
                  {log.user && (
                    <p className="text-xs text-neutral-400 mt-0.5">
                      by {log.user.name} ({log.user.email}) · {log.user.role}
                    </p>
                  )}
                </div>
                <p className="text-xs text-neutral-400 shrink-0">
                  {new Date(log.createdAt).toLocaleString()}
                </p>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}