import { useState, useEffect, useCallback } from 'react'
import { Download, ChevronDown, ChevronRight, FileText } from 'lucide-react'
import { DataTable, Pagination, PageHeader, EmptyState } from '@/components/admin'
import type { Column } from '@/components/admin'
import { adminApi } from '@/api/admin'
import { toast } from '@/lib/toast'
import { cn } from '@/lib/utils'
import type { AuditLogEntry } from '@/types/admin'

export function AuditLogsPage() {
  const [logs, setLogs] = useState<AuditLogEntry[]>([])
  const [loading, setLoading] = useState(true)
  const [page, setPage] = useState(1)
  const [total, setTotal] = useState(0)
  const [expandedId, setExpandedId] = useState<string | null>(null)
  const [actionFilter, setActionFilter] = useState('')
  const [resourceFilter, setResourceFilter] = useState('')
  const pageSize = 25

  const fetchLogs = useCallback(async () => {
    setLoading(true)
    try {
      const data = await adminApi.listAuditLogs({
        page,
        per_page: pageSize,
        action: actionFilter || undefined,
        resource_type: resourceFilter || undefined,
      })
      setLogs(data.items || [])
      setTotal(data.total || 0)
    } catch {
      toast.error('Failed to load audit logs')
    } finally {
      setLoading(false)
    }
  }, [page, actionFilter, resourceFilter])

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

  const handleExport = async () => {
    try {
      const response = await adminApi.exportAuditLogs({
        action: actionFilter || undefined,
        resource_type: resourceFilter || undefined,
      } as Record<string, string>)
      const blob = new Blob([response.data], { type: 'text/csv' })
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = `audit-logs-${new Date().toISOString().split('T')[0]}.csv`
      a.click()
      URL.revokeObjectURL(url)
      toast.success('Export downloaded')
    } catch {
      toast.error('Failed to export audit logs')
    }
  }

  const columns: Column<AuditLogEntry>[] = [
    {
      key: 'expand',
      header: '',
      className: 'w-8',
      render: (log) => (
        <button
          onClick={() => setExpandedId(expandedId === log.id ? null : log.id)}
          className="p-1 text-muted-foreground hover:text-foreground"
        >
          {expandedId === log.id ? (
            <ChevronDown className="h-4 w-4" />
          ) : (
            <ChevronRight className="h-4 w-4" />
          )}
        </button>
      ),
    },
    {
      key: 'action',
      header: 'Action',
      render: (log) => (
        <span className="text-sm font-medium text-foreground">{log.action}</span>
      ),
    },
    {
      key: 'resource',
      header: 'Resource',
      render: (log) => (
        <span className="text-sm text-muted-foreground">
          {log.resource_type}{log.resource_id ? ` (${log.resource_id.slice(0, 8)}...)` : ''}
        </span>
      ),
    },
    {
      key: 'user',
      header: 'User',
      render: (log) => (
        <span className="text-sm text-muted-foreground">{log.user_email || 'System'}</span>
      ),
    },
    {
      key: 'created_at',
      header: 'Time',
      render: (log) => (
        <span className="text-sm text-muted-foreground">
          {new Date(log.created_at).toLocaleString()}
        </span>
      ),
    },
  ]

  return (
    <div className="space-y-6">
      <PageHeader
        title="Audit Logs"
        description="Review platform activity and changes"
        action={
          <button
            onClick={handleExport}
            className={cn(
              'flex items-center gap-2 rounded-md border border-border px-4 py-2 text-sm font-medium',
              'text-muted-foreground hover:bg-accent hover:text-foreground'
            )}
          >
            <Download className="h-4 w-4" />
            Export CSV
          </button>
        }
      />

      <div className="flex flex-wrap gap-3">
        <input
          type="text"
          value={actionFilter}
          onChange={(e) => { setActionFilter(e.target.value); setPage(1) }}
          placeholder="Filter by action..."
          className={cn(
            'h-9 rounded-md border border-border bg-card px-3 text-sm text-foreground',
            'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20'
          )}
        />
        <input
          type="text"
          value={resourceFilter}
          onChange={(e) => { setResourceFilter(e.target.value); setPage(1) }}
          placeholder="Filter by resource type..."
          className={cn(
            'h-9 rounded-md border border-border bg-card px-3 text-sm text-foreground',
            'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20'
          )}
        />
      </div>

      <DataTable
        columns={columns}
        data={logs}
        keyExtractor={(log) => log.id}
        isLoading={loading}
        emptyState={
          <EmptyState
            icon={<FileText className="h-12 w-12" />}
            title="No audit logs"
            description="Activity will appear here as actions are taken on the platform."
          />
        }
      />

      {/* Expanded details row */}
      {expandedId && logs.find(l => l.id === expandedId)?.details && (
        <div className="rounded-md border border-border bg-accent p-4">
          <h4 className="mb-2 text-sm font-medium text-foreground">Details</h4>
          <pre className="overflow-x-auto rounded bg-card p-3 text-xs text-muted-foreground">
            {JSON.stringify(logs.find(l => l.id === expandedId)?.details, null, 2)}
          </pre>
        </div>
      )}

      <Pagination
        page={page}
        totalPages={Math.ceil(total / pageSize)}
        total={total}
        pageSize={pageSize}
        onPageChange={setPage}
      />
    </div>
  )
}

export default AuditLogsPage