'use client';

import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { Search, Eye } from 'lucide-react';
import DataTable from '@/components/ui/DataTable';
import Badge from '@/components/ui/Badge';
import { auditApi } from '@/lib/api';
import { formatDateTime } from '@/lib/utils';

export default function AuditLogsPage() {
  const [filters, setFilters] = useState({ search: '', action: '', entityType: '' });

  const { data, isLoading } = useQuery({
    queryKey: ['audit-logs', filters],
    queryFn: () => auditApi.getLogs(filters),
  });

  const columns = [
    {
      key: 'action',
      label: 'Action',
      sortable: true,
      render: (log: any) => (
        <Badge>{log.action}</Badge>
      ),
    },
    {
      key: 'user',
      label: 'User',
      render: (log: any) => (
        <div>
          <div className="font-medium">{log.user?.fullName || 'System'}</div>
          <div className="text-sm text-muted-foreground">{log.user?.email || 'N/A'}</div>
        </div>
      ),
    },
    {
      key: 'entityType',
      label: 'Entity Type',
      render: (log: any) => log.entityType,
    },
    {
      key: 'entityId',
      label: 'Entity ID',
      render: (log: any) => (
        <span className="font-mono text-sm">{log.entityId?.substring(0, 8)}...</span>
      ),
    },
    {
      key: 'createdAt',
      label: 'Timestamp',
      sortable: true,
      render: (log: any) => formatDateTime(log.createdAt),
    },
  ];

  const actions = [
    {
      label: 'View Details',
      onClick: (log: any) => {
        window.location.href = `/audit/${log.id}`;
      },
      variant: 'secondary' as const,
      icon: Eye,
    },
  ];

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-foreground">Audit Logs</h1>
          <p className="text-muted-foreground">Track all system activities and changes</p>
        </div>
      </div>

      <div className="card">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div>
            <label className="label">Search</label>
            <input
              type="text"
              placeholder="Search logs..."
              className="input"
              value={filters.search}
              onChange={(e) => setFilters({ ...filters, search: e.target.value })}
            />
          </div>
          <div>
            <label className="label">Action</label>
            <select
              className="input"
              value={filters.action}
              onChange={(e) => setFilters({ ...filters, action: e.target.value })}
            >
              <option value="">All Actions</option>
              <option value="CREATE">Create</option>
              <option value="UPDATE">Update</option>
              <option value="DELETE">Delete</option>
              <option value="LOGIN">Login</option>
              <option value="LOGOUT">Logout</option>
            </select>
          </div>
          <div>
            <label className="label">Entity Type</label>
            <select
              className="input"
              value={filters.entityType}
              onChange={(e) => setFilters({ ...filters, entityType: e.target.value })}
            >
              <option value="">All Types</option>
              <option value="Booking">Booking</option>
              <option value="User">User</option>
              <option value="Payment">Payment</option>
              <option value="Ticket">Ticket</option>
            </select>
          </div>
        </div>
      </div>

      <DataTable
        data={data?.items || []}
        columns={columns}
        actions={actions}
        loading={isLoading}
        emptyMessage="No audit logs found"
      />
    </div>
  );
}
