/**
 * SystemPageTemplate - Master template for system/admin pages (logs, status, monitoring)
 * 
 * Usage:
 * <SystemPageTemplate
 *   title="System Status"
 *   statusCards={statusConfig}
 *   logs={logsData}
 *   charts={monitoringCharts}
 * />
 */

import React, { ReactNode } from 'react';

interface StatusCard {
  title: string;
  value: string | number;
  status: 'success' | 'warning' | 'error' | 'info';
  description?: string;
  icon?: ReactNode;
}

interface LogEntry {
  timestamp: string;
  level: 'info' | 'warning' | 'error' | 'success';
  message: string;
  module?: string;
}

interface SystemPageTemplateProps {
  title: string;
  subtitle?: string;
  statusCards?: StatusCard[];
  logs?: LogEntry[];
  charts?: ReactNode[];
  className?: string;
}

export default function SystemPageTemplate({
  title,
  subtitle,
  statusCards = [],
  logs = [],
  charts = [],
  className = '',
}: SystemPageTemplateProps) {
  const getStatusColor = (status: string) => {
    switch (status) {
      case 'success':
        return 'bg-success-50 text-success-600 dark:bg-success-500/15 dark:text-success-500';
      case 'warning':
        return 'bg-warning-50 text-warning-600 dark:bg-warning-500/15 dark:text-warning-500';
      case 'error':
        return 'bg-error-50 text-error-600 dark:bg-error-500/15 dark:text-error-500';
      default:
        return 'bg-blue-light-50 text-blue-light-500 dark:bg-blue-light-500/15 dark:text-blue-light-500';
    }
  };

  const getLogLevelColor = (level: string) => {
    switch (level) {
      case 'error':
        return 'text-error-600 dark:text-error-500';
      case 'warning':
        return 'text-warning-600 dark:text-warning-500';
      case 'success':
        return 'text-success-600 dark:text-success-500';
      default:
        return 'text-blue-light-600 dark:text-blue-light-500';
    }
  };

  return (
    <div className={className}>
      {/* Page Header */}
      <div className="mb-6">
        <h2 className="text-xl font-semibold text-gray-800 dark:text-white/90 mb-1">{title}</h2>
        {subtitle && (
          <p className="text-sm text-gray-500 dark:text-gray-400">{subtitle}</p>
        )}
      </div>

      {/* Status Cards */}
      {statusCards.length > 0 && (
        <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-6">
          {statusCards.map((card, index) => (
            <div
              key={index}
              className="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] sm:p-6"
            >
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">
                    {card.title}
                  </p>
                  <p className="text-2xl font-semibold text-gray-800 dark:text-white/90">
                    {card.value}
                  </p>
                </div>
                {card.icon && (
                  <div className={`flex h-14 w-14 items-center justify-center rounded-[10.5px] ${getStatusColor(card.status)}`}>
                    {card.icon}
                  </div>
                )}
              </div>
              {card.description && (
                <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">
                  {card.description}
                </p>
              )}
              <div className="mt-3">
                <span
                  className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getStatusColor(card.status)}`}
                >
                  {card.status}
                </span>
              </div>
            </div>
          ))}
        </div>
      )}

      {/* Charts */}
      {charts.length > 0 && (
        <div className="grid grid-cols-1 gap-6 lg:grid-cols-2 mb-6">
          {charts.map((chart, index) => (
            <div
              key={index}
              className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03] p-6"
            >
              {chart}
            </div>
          ))}
        </div>
      )}

      {/* Logs Table */}
      {logs.length > 0 && (
        <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03] overflow-hidden">
          <div className="border-b border-gray-100 px-6 py-5 dark:border-gray-800">
            <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
              System Logs
            </h3>
          </div>
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead className="border-b border-gray-100 bg-gray-50 dark:border-gray-800 dark:bg-white/[0.03]">
                <tr>
                  <th className="px-6 py-4 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                    Timestamp
                  </th>
                  <th className="px-6 py-4 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                    Level
                  </th>
                  <th className="px-6 py-4 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                    Module
                  </th>
                  <th className="px-6 py-4 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                    Message
                  </th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
                {logs.map((log, index) => (
                  <tr key={index} className="hover:bg-gray-50 dark:hover:bg-white/[0.03]">
                    <td className="px-6 py-4 text-sm text-gray-800 dark:text-white/90">
                      {log.timestamp}
                    </td>
                    <td className="px-6 py-4">
                      <span
                        className={`text-xs font-medium ${getLogLevelColor(log.level)}`}
                      >
                        {log.level.toUpperCase()}
                      </span>
                    </td>
                    <td className="px-6 py-4 text-sm text-gray-800 dark:text-white/90">
                      {log.module || '-'}
                    </td>
                    <td className="px-6 py-4 text-sm text-gray-800 dark:text-white/90">
                      {log.message}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}
    </div>
  );
}

