/**
 * Login Logs Page
 * Enterprise Logging System — Super Admin Console
 *
 * Paginated login/authentication logs with event/status/date filters,
 * CSV/Excel/JSON export, and detail inspection.
 */

'use client';

import { useState } from 'react';
import { LogPageShell } from '@/components/logs/LogPageShell';
import { LogFilters } from '@/components/logs/LogFilters';
import { LoginLogsTable } from '@/components/logs/LoginLogsTable';
import { useLogsData } from '@/hooks/useLogsData';
import { loggingService } from '@/services/logging.service';
import type { LoginLog } from '@/types/logging.types';

const EVENT_OPTIONS = [
  { label: 'Login', value: 'LOGIN' },
  { label: 'Logout', value: 'LOGOUT' },
  { label: 'Failed Login', value: 'FAILED_LOGIN' },
  { label: 'Password Reset', value: 'PASSWORD_RESET' },
  { label: 'OTP Verification', value: 'OTP_VERIFICATION' },
  { label: '2FA', value: 'TWO_FA' },
  { label: 'Email Verification', value: 'EMAIL_VERIFICATION' },
];

const STATUS_OPTIONS = [
  { label: 'Success', value: 'SUCCESS' },
  { label: 'Failed', value: 'FAILED' },
  { label: 'Blocked', value: 'BLOCKED' },
  { label: 'Pending', value: 'PENDING' },
  { label: 'Expired', value: 'EXPIRED' },
];

export default function LoginLogsPage() {
  const [event, setEvent] = useState('');
  const [status, setStatus] = useState('');
  const [filters, setFilters] = useState<{ from?: string; to?: string }>({});

  const { data, meta, loading, error, applyFilters, changePage } = useLogsData<LoginLog>({
    type: 'login',
    fetcher: (params) => loggingService.getLoginLogs(params),
  });

  const handleApply = (f: any) => {
    setFilters({ from: f.from, to: f.to });
    applyFilters({ event: event || undefined, status: status || undefined, from: f.from, to: f.to });
  };

  return (
    <LogPageShell
      title="Login Logs"
      description="Authentication events — login, logout, failed attempts, OTP, 2FA, password resets, email verification."
      logType="login"
      loading={loading}
      error={error}
      exportFrom={filters.from}
      exportTo={filters.to}
      filters={
        <div className="space-y-3">
          <div className="grid gap-3 sm:grid-cols-2">
            <LogFilters
              onApply={handleApply}
              typeOptions={EVENT_OPTIONS}
              typeLabel="Event"
              typeValue={event}
              onTypeChange={setEvent}
              showQuery
              queryPlaceholder="Search email, user ID, IP..."
            />
            <LogFilters
              onApply={handleApply}
              typeOptions={STATUS_OPTIONS}
              typeLabel="Status"
              typeValue={status}
              onTypeChange={setStatus}
              showQuery={false}
            />
          </div>
        </div>
      }
      table={
        <LoginLogsTable
          logs={data}
          page={meta.page}
          totalPages={meta.totalPages}
          total={meta.total}
          limit={meta.limit}
          onPageChange={changePage}
        />
      }
    />
  );
}