import { useState } from 'react';
import { Badge, Button, DataTable, EmptyState, Input, Spinner } from '@cameleer/design-system';
import type { Column } from '@cameleer/design-system';
import { ScrollText, ChevronLeft, ChevronRight } from 'lucide-react';
import type { AuditLogEntry, AuditLogPage, AuditLogFilters, VendorTenantSummary } from '../types/api';

const AUDIT_ACTIONS = [
  'AUTH_REGISTER', 'AUTH_LOGIN', 'AUTH_LOGIN_FAILED', 'AUTH_LOGOUT',
  'TENANT_CREATE', 'TENANT_UPDATE', 'TENANT_SUSPEND', 'TENANT_REACTIVATE', 'TENANT_DELETE',
  'ENVIRONMENT_CREATE', 'ENVIRONMENT_UPDATE', 'ENVIRONMENT_DELETE',
  'APP_CREATE', 'APP_DEPLOY', 'APP_PROMOTE', 'APP_ROLLBACK', 'APP_SCALE', 'APP_STOP', 'APP_DELETE',
  'SECRET_CREATE', 'SECRET_READ', 'SECRET_UPDATE', 'SECRET_DELETE', 'SECRET_ROTATE',
  'CONFIG_UPDATE',
  'TEAM_INVITE', 'TEAM_REMOVE', 'TEAM_ROLE_CHANGE',
  'LICENSE_GENERATE', 'LICENSE_REVOKE',
];

function actionColor(action: string): 'success' | 'error' | 'warning' | 'auto' | 'primary' {
  if (action.startsWith('AUTH_')) return 'auto';
  if (action.startsWith('TENANT_')) return 'primary';
  if (action.startsWith('TEAM_')) return 'warning';
  if (action.startsWith('LICENSE_')) return 'success';
  return 'auto';
}

function formatTime(iso: string): string {
  const d = new Date(iso);
  return d.toLocaleString(undefined, {
    month: 'short', day: 'numeric',
    hour: '2-digit', minute: '2-digit', second: '2-digit',
  });
}

const selectStyle: React.CSSProperties = {
  padding: '6px 10px',
  borderRadius: 6,
  border: '1px solid var(--border)',
  background: 'var(--bg-surface)',
  color: 'var(--text-primary)',
  fontSize: '0.8125rem',
};

interface AuditLogTableProps {
  data: AuditLogPage | undefined;
  isLoading: boolean;
  filters: AuditLogFilters;
  onFiltersChange: (filters: AuditLogFilters) => void;
  showTenantColumn: boolean;
  showTenantFilter: boolean;
  tenants?: VendorTenantSummary[];
}

export function AuditLogTable({
  data, isLoading, filters, onFiltersChange,
  showTenantColumn, showTenantFilter, tenants,
}: AuditLogTableProps) {

  const [searchInput, setSearchInput] = useState(filters.search ?? '');

  const tenantMap = new Map<string, string>();
  if (tenants) {
    for (const t of tenants) {
      tenantMap.set(t.id, t.name);
    }
  }

  function setFilter(patch: Partial<AuditLogFilters>) {
    onFiltersChange({ ...filters, page: 0, ...patch });
  }

  function handleSearchSubmit(e: React.FormEvent) {
    e.preventDefault();
    setFilter({ search: searchInput.trim() || undefined });
  }

  const columns: Column<AuditLogEntry>[] = [
    {
      key: 'createdAt',
      header: 'Time',
      render: (_v, row) => (
        <span style={{ fontSize: '0.8125rem', whiteSpace: 'nowrap' }}>
          {formatTime(row.createdAt)}
        </span>
      ),
    },
    {
      key: 'actorEmail',
      header: 'Actor',
      render: (_v, row) => (
        <span style={{ fontFamily: 'monospace', fontSize: '0.8125rem' }}>
          {row.actorEmail ?? '--'}
        </span>
      ),
    },
    ...(showTenantColumn ? [{
      key: 'tenantId' as keyof AuditLogEntry,
      header: 'Tenant',
      render: (_v: unknown, row: AuditLogEntry) => (
        <span style={{ fontSize: '0.8125rem' }}>
          {row.tenantId ? (tenantMap.get(row.tenantId) ?? row.tenantId.slice(0, 8)) : '--'}
        </span>
      ),
    }] : []),
    {
      key: 'action',
      header: 'Action',
      render: (_v, row) => <Badge label={row.action} color={actionColor(row.action)} />,
    },
    {
      key: 'resource',
      header: 'Resource',
      render: (_v, row) => (
        <span style={{ fontFamily: 'monospace', fontSize: '0.8125rem', maxWidth: 200, overflow: 'hidden', textOverflow: 'ellipsis', display: 'inline-block' }}>
          {row.resource ?? '--'}
        </span>
      ),
    },
    {
      key: 'result',
      header: 'Result',
      render: (_v, row) => (
        <Badge
          label={row.result}
          color={row.result === 'SUCCESS' ? 'success' : 'error'}
        />
      ),
    },
    {
      key: 'sourceIp',
      header: 'IP',
      render: (_v, row) => (
        <span style={{ fontFamily: 'monospace', fontSize: '0.8125rem' }}>
          {row.sourceIp ?? '--'}
        </span>
      ),
    },
  ];

  const currentPage = data?.page ?? 0;
  const totalPages = data?.totalPages ?? 0;
  const totalElements = data?.totalElements ?? 0;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      {/* Filter bar */}
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
        {showTenantFilter && tenants && (
          <select
            value={filters.tenantId ?? ''}
            onChange={(e) => setFilter({ tenantId: e.target.value || undefined })}
            style={selectStyle}
          >
            <option value="">All Tenants</option>
            {tenants.map((t) => (
              <option key={t.id} value={t.id}>{t.name}</option>
            ))}
          </select>
        )}

        <select
          value={filters.action ?? ''}
          onChange={(e) => setFilter({ action: e.target.value || undefined })}
          style={selectStyle}
        >
          <option value="">All Actions</option>
          {AUDIT_ACTIONS.map((a) => (
            <option key={a} value={a}>{a}</option>
          ))}
        </select>

        <select
          value={filters.result ?? ''}
          onChange={(e) => setFilter({ result: e.target.value || undefined })}
          style={selectStyle}
        >
          <option value="">All Results</option>
          <option value="SUCCESS">SUCCESS</option>
          <option value="FAILURE">FAILURE</option>
        </select>

        <form onSubmit={handleSearchSubmit} style={{ display: 'flex', gap: 4 }}>
          <Input
            placeholder="Search actor or resource..."
            value={searchInput}
            onChange={(e) => setSearchInput(e.target.value)}
            style={{ width: 200, fontSize: '0.8125rem' }}
          />
          <Button type="submit" variant="secondary">Search</Button>
        </form>
      </div>

      {/* Table */}
      {isLoading && (
        <div style={{ display: 'flex', justifyContent: 'center', padding: 48 }}>
          <Spinner />
        </div>
      )}

      {!isLoading && (!data || data.content.length === 0) && (
        <EmptyState
          icon={<ScrollText size={32} />}
          title="No audit events"
          description="No events match the current filters."
        />
      )}

      {!isLoading && data && data.content.length > 0 && (
        <>
          <DataTable columns={columns} data={data.content} />

          {/* Pagination */}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: '0.875rem' }}>
            <span style={{ color: 'var(--text-muted)' }}>
              {totalElements} event{totalElements !== 1 ? 's' : ''}
              {totalPages > 1 && ` \u00b7 Page ${currentPage + 1} of ${totalPages}`}
            </span>
            {totalPages > 1 && (
              <div style={{ display: 'flex', gap: 4 }}>
                <Button
                  variant="secondary"
                  disabled={currentPage === 0}
                  onClick={() => onFiltersChange({ ...filters, page: currentPage - 1 })}
                >
                  <ChevronLeft size={14} />
                  Prev
                </Button>
                <Button
                  variant="secondary"
                  disabled={currentPage >= totalPages - 1}
                  onClick={() => onFiltersChange({ ...filters, page: currentPage + 1 })}
                >
                  Next
                  <ChevronRight size={14} />
                </Button>
              </div>
            )}
          </div>
        </>
      )}
    </div>
  );
}
