import React from 'react';
import { useNavigate } from 'react-router-dom';

const SystemPage = () => {
    const navigate = useNavigate();

    const cards = [
        {
            icon: '🩺',
            title: 'Server Health',
            description: 'Echtzeit-Status aller Services — API, Datenbank, Auth und Antwortzeit',
            path: '/health',
            color: 'var(--success)',
        },
        {
            icon: '🔧',
            title: 'Wartungskalender',
            description: 'Überfällige und anstehende Asset-Prüfungen gruppiert nach Dringlichkeit',
            path: '/maintenance',
            color: 'var(--warning)',
        },
        {
            icon: '⚙️',
            title: 'Einstellungen',
            description: 'Ticket-Kategorien und Vorlagen verwalten — anpassen, hinzufügen, löschen',
            path: '/settings',
            color: 'var(--cereda-accent)',
        },
        {
            icon: '📖',
            title: 'API Dokumentation',
            description: '78 Endpunkte in 9 Kategorien — durchsuchen, aufklappen, testen',
            path: '/api-docs',
            color: 'var(--cereda-primary)',
        },
        {
            icon: '📄',
            title: 'Dokumentation',
            description: 'Vollständige IT Nexus Systemdokumentation — Rollen, Features, Workflows',
            path: '/docs',
            color: 'var(--warning)',
        },
        {
            icon: '⏰',
            title: 'Cronjobs',
            description: 'Geplante Hintergrundaufgaben verwalten — Status, Logs und manuelle Ausführung',
            path: '/settings',
            color: 'var(--cereda-primary)',
        },
    ];

    return (
        <div style={{ padding: '40px 24px', maxWidth: '800px', margin: '0 auto' }}>
            <div style={{ marginBottom: '32px' }}>
                <h1 style={{ fontSize: '24px', fontWeight: '700', color: 'var(--text-primary)', margin: 0, display: 'flex', alignItems: 'center', gap: '10px' }}>
                    ⚙️ System
                </h1>
                <p style={{ color: 'var(--text-muted)', fontSize: '14px', marginTop: '6px' }}>
                    Administration und Systeminformationen
                </p>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '16px' }}>
                {cards.map(card => (
                    <button
                        key={card.path}
                        onClick={() => navigate(card.path)}
                        style={{
                            background: 'var(--bg-card)',
                            border: '1px solid var(--border-color)',
                            borderRadius: 'var(--radius-xl)',
                            padding: '28px 24px',
                            textAlign: 'left',
                            cursor: 'pointer',
                            transition: 'var(--transition)',
                            display: 'flex',
                            flexDirection: 'column',
                            gap: '12px',
                        }}
                        onMouseEnter={e => {
                            e.currentTarget.style.borderColor = card.color;
                            e.currentTarget.style.boxShadow = `0 4px 20px ${card.color}22`;
                            e.currentTarget.style.transform = 'translateY(-2px)';
                        }}
                        onMouseLeave={e => {
                            e.currentTarget.style.borderColor = 'var(--border-color)';
                            e.currentTarget.style.boxShadow = 'none';
                            e.currentTarget.style.transform = 'translateY(0)';
                        }}
                    >
                        <div style={{
                            width: '52px',
                            height: '52px',
                            borderRadius: '14px',
                            background: `${card.color}20`,
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            fontSize: '24px',
                        }}>
                            {card.icon}
                        </div>
                        <div>
                            <div style={{ fontWeight: '700', fontSize: '16px', color: 'var(--text-primary)', marginBottom: '4px' }}>
                                {card.title}
                            </div>
                            <div style={{ fontSize: '13px', color: 'var(--text-muted)', lineHeight: '1.5' }}>
                                {card.description}
                            </div>
                        </div>
                        <div style={{ marginTop: 'auto', color: card.color, fontSize: '13px', fontWeight: '600' }}>
                            Öffnen →
                        </div>
                    </button>
                ))}
            </div>
        </div>
    );
};

export default SystemPage;
