'use client';

import { Card, CardHeader, CardContent } from '@/components/ui/Card';
import { SystemInfo as SystemInfoType } from '@/services/core/system-info';

interface SystemInfoProps {
  systemInfo: SystemInfoType | null;
  isLoading: boolean;
  onRefresh: () => void;
}

export function SystemInfo({
  systemInfo,
  isLoading,
  onRefresh,
}: SystemInfoProps) {
  return (
    <Card className="mt-8">
      <CardHeader>
        <div className="flex items-center justify-between">
          <h2 className="text-lg font-semibold">ℹ️ Informations système</h2>
          <button
            onClick={onRefresh}
            disabled={isLoading}
            className="text-xs px-2 py-1 bg-[var(--card)] border border-[var(--border)] rounded hover:bg-[var(--card-hover)] disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {isLoading ? '🔄 Chargement...' : '🔄 Actualiser'}
          </button>
        </div>
      </CardHeader>
      <CardContent>
        {systemInfo ? (
          <>
            <div className="grid grid-cols-1 md:grid-cols-4 gap-4 text-sm mb-4">
              <div>
                <p className="text-[var(--muted-foreground)]">Version</p>
                <p className="font-medium">
                  TowerControl v{systemInfo.version}
                </p>
              </div>
              <div>
                <p className="text-[var(--muted-foreground)]">Dernière maj</p>
                <p className="font-medium">{systemInfo.lastUpdate}</p>
              </div>
              <div>
                <p className="text-[var(--muted-foreground)]">Environnement</p>
                <p className="font-medium capitalize">
                  {systemInfo.environment}
                </p>
              </div>
              <div>
                <p className="text-[var(--muted-foreground)]">Uptime</p>
                <p className="font-medium">{systemInfo.uptime}</p>
              </div>
            </div>

            <div className="border-t border-[var(--border)] pt-4">
              <h3 className="text-sm font-medium mb-3 text-[var(--muted-foreground)]">
                Base de données
              </h3>
              <div className="grid grid-cols-1 md:grid-cols-4 gap-4 text-sm">
                <div>
                  <p className="text-[var(--muted-foreground)]">Tâches</p>
                  <p className="font-medium">
                    {systemInfo.database.totalTasks}
                  </p>
                </div>
                <div>
                  <p className="text-[var(--muted-foreground)]">Utilisateurs</p>
                  <p className="font-medium">
                    {systemInfo.database.totalUsers}
                  </p>
                </div>
                <div>
                  <p className="text-[var(--muted-foreground)]">Sauvegardes</p>
                  <p className="font-medium">
                    {systemInfo.database.totalBackups}
                  </p>
                </div>
                <div>
                  <p className="text-[var(--muted-foreground)]">Taille DB</p>
                  <p className="font-medium">
                    {systemInfo.database.databaseSize}
                  </p>
                </div>
              </div>
            </div>
          </>
        ) : (
          <div className="text-center py-4">
            <p className="text-[var(--muted-foreground)]">
              Chargement des informations système...
            </p>
          </div>
        )}
      </CardContent>
    </Card>
  );
}
