/**
 * Log Page Shell
 * Enterprise Logging System — Admin Dashboard
 *
 * Wraps a log page with the header (title + description + export) and
 * the filter bar + table + loading/error states.
 */

'use client';

import type { ReactNode } from 'react';
import { LogExportButtons } from './LogExportButtons';
import type { LogTypeName } from '@/types/logging.types';

interface LogPageShellProps {
  title: string;
  description: string;
  logType: LogTypeName;
  filters: ReactNode;
  table: ReactNode;
  loading?: boolean;
  error?: string | null;
  exportFrom?: string;
  exportTo?: string;
  actions?: ReactNode;
}

export function LogPageShell({
  title,
  description,
  logType,
  filters,
  table,
  loading,
  error,
  exportFrom,
  exportTo,
  actions,
}: LogPageShellProps) {
  return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-start justify-between gap-4">
        <div>
          <h1 className="text-xl font-semibold text-slate-100">{title}</h1>
          <p className="mt-1 text-sm text-slate-400">{description}</p>
        </div>
        <div className="flex items-center gap-2">
          <LogExportButtons type={logType} from={exportFrom} to={exportTo} />
          {actions}
        </div>
      </div>

      {filters}

      {error && (
        <div className="rounded-xl border border-rose-500/20 bg-rose-500/10 p-4 text-sm text-rose-300">
          {error}
        </div>
      )}

      <div className="relative">
        {loading && (
          <div className="absolute inset-0 z-10 flex items-center justify-center rounded-xl bg-slate-950/60 backdrop-blur-sm">
            <div className="flex items-center gap-2 text-sm text-slate-300">
              <span className="h-4 w-4 animate-spin rounded-full border-2 border-slate-500 border-t-emerald-400" />
              Loading logs...
            </div>
          </div>
        )}
        {table}
      </div>
    </div>
  );
}