import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import { isAxiosError } from 'axios';
import { useLocale } from '@/app/providers/LocaleProvider';
import { AppLayout } from '@/shared/components/layout/AppLayout';
import { AdminPageShell } from '@/features/admin/components/AdminPageShell';
import {
  AdminPanel,
  Badge,
  Button,
  PanelLoadingState,
  Table,
  Th,
  Td,
  Tr,
  TableWrap,
  TablePagination} from '@/shared/components/ui';
import { api } from '@/shared/utils/api';
import { API_ENDPOINTS } from '@/shared/constants/apiEndpoints';

const MetaCount = styled.span`
  font-size: ${({ theme }) => theme.typography.fontSize.sm};
  color: ${({ theme }) => theme.colors.text.tertiary};
`;

type AuditLogRow = {
  id: string;
  event_label: string;
  auditable_type: string;
  auditable_id: string;
  user?: { name: string; email: string } | null;
  created_at_human?: string | null;
};

type AuditLogsIndex = {
  data: AuditLogRow[];
  meta?: { current_page?: number; last_page?: number; total?: number };
};

type LoadErrorCode = 'forbidden' | 'unauthorized' | 'unexpected' | 'generic' | null;

function isAuditLogsIndex(val: unknown): val is AuditLogsIndex {
  return typeof val === 'object' && val !== null && Array.isArray((val as AuditLogsIndex).data);
}

const AdminAuditLogsPage: React.FC = () => {
  const { t } = useLocale();
  const [logs, setLogs] = useState<AuditLogRow[]>([]);
  const [page, setPage] = useState(1);
  const [lastPage, setLastPage] = useState(1);
  const [total, setTotal] = useState<number | null>(null);
  const [loading, setLoading] = useState(true);
  const [loadError, setLoadError] = useState<LoadErrorCode>(null);

  const loadErrorMessage =
    loadError === 'forbidden'
      ? t('admin:audit.forbidden')
      : loadError === 'unauthorized'
        ? t('admin:audit.unauthorized')
        : loadError === 'unexpected'
          ? t('admin:audit.unexpectedResponse')
          : loadError === 'generic'
            ? t('admin:audit.loadError')
            : null;

  useEffect(() => {
    let cancelled = false;

    async function load(p: number) {
      setLoading(true);
      setLoadError(null);
      try {
        const raw: unknown = await api.get(`${API_ENDPOINTS.AUDIT_LOGS.LIST}?page=${p}&per_page=20`);
        if (cancelled) {
          return;
        }
        if (!isAuditLogsIndex(raw)) {
          setLoadError('unexpected');
          setLogs([]);
          setTotal(null);
          return;
        }
        setLogs(raw.data);
        const lp = raw.meta?.last_page ?? 1;
        const cur = raw.meta?.current_page ?? p;
        setLastPage(Math.max(1, lp));
        setPage(Math.min(Math.max(1, cur), Math.max(1, lp)));
        setTotal(typeof raw.meta?.total === 'number' ? raw.meta.total : raw.data.length);
      } catch (err) {
        if (cancelled) {
          return;
        }
        setLogs([]);
        setTotal(null);
        if (isAxiosError(err) && err.response?.status === 403) {
          setLoadError('forbidden');
        } else if (isAxiosError(err) && err.response?.status === 401) {
          setLoadError('unauthorized');
        } else {
          setLoadError('generic');
        }
      } finally {
        if (!cancelled) {
          setLoading(false);
        }
      }
    }

    void load(page);

    return () => {
      cancelled = true;
    };
  }, [page]);

  return (
    <AppLayout>
      <AdminPageShell
        title={t('admin:audit.title')}
        subtitle={t('admin:audit.subtitle', { defaultValue: 'Review security and configuration changes.' })}
        backLabel={t('settings:title')}
        toolbar={
          total !== null ? (
            <MetaCount>{t('admin:audit.total', { count: total })}</MetaCount>
          ) : undefined
        }
      >
      <AdminPanel>
        {loadErrorMessage && (
          <p role="alert" style={{ margin: '0 0 16px', color: '#DC2626', fontSize: '0.9375rem' }}>
            {loadErrorMessage}
          </p>
        )}
        {loading && logs.length === 0 && !loadError ? (
          <PanelLoadingState />
        ) : logs.length === 0 && !loading ? (
          !loadError ? (
            <p style={{ color: 'var(--text-secondary)', margin: 0 }}>{t('admin:audit.empty')}</p>
          ) : null
        ) : (
          <>
            <TableWrap>
              <Table>
                <thead>
                  <tr>
                    <Th>{t('admin:audit.columns.when')}</Th>
                    <Th>{t('admin:audit.columns.event')}</Th>
                    <Th>{t('admin:audit.columns.resource')}</Th>
                    <Th>{t('admin:audit.columns.user')}</Th>
                  </tr>
                </thead>
                <tbody>
                  {logs.map((row) => (
                    <Tr key={row.id}>
                      <Td>{row.created_at_human ?? '—'}</Td>
                      <Td>
                        <Badge variant="gray" size="sm">
                          {row.event_label}
                        </Badge>
                      </Td>
                      <Td>
                        {row.auditable_type} #{row.auditable_id}
                      </Td>
                      <Td>{row.user?.name ?? t('admin:audit.systemUser')}</Td>
                    </Tr>))}
                </tbody>
              </Table>
            </TableWrap>
            <TablePagination>
              <MetaCount>
                {t('admin:audit.pagination.page', { current: page, last: lastPage })}
              </MetaCount>
              <div style={{ display: 'flex', gap: '0.75rem' }}>
                <Button
                  variant="outline"
                  size="sm"
                  disabled={loading || page <= 1}
                  onClick={() => setPage((p) => Math.max(1, p - 1))}
                >
                  {t('admin:audit.pagination.previous')}
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  disabled={loading || page >= lastPage}
                  onClick={() => setPage((p) => p + 1)}
                >
                  {t('admin:audit.pagination.next')}
                </Button>
              </div>
            </TablePagination>
          </>
        )}
      </AdminPanel>
      </AdminPageShell>
    </AppLayout>
  );
};

export default AdminAuditLogsPage;