import React, { useEffect, useState } from 'react';
import ViolationForm from './components/ViolationForm';

const styles = {
    body: {
        fontFamily: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif",
        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        minHeight: '100vh',
        padding: '20px',
        margin: 0,
    },
    container: {
        maxWidth: '1200px',
        margin: '0 auto',
        background: 'white',
        borderRadius: '12px',
        boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
        overflow: 'hidden',
    },
    header: {
        background: 'linear-gradient(135deg, #2c3e50 0%, #34495e 100%)',
        color: 'white',
        padding: '30px',
        textAlign: 'center',
    },
    statusBar: {
        fontSize: '11px',
        color: '#aaa',
        marginTop: '6px',
    }
};

export default function App() {
    const [apiStatus, setApiStatus] = useState('checking...');

    useEffect(() => {
        fetch('/api/health')
            .then(r => r.json())
            .then(() => setApiStatus('● API connected'))
            .catch(() => setApiStatus('⚠ API unreachable'));
    }, []);

    return (
        <div style={styles.body}>
            <div style={styles.container}>
                <div style={styles.header}>
                    <h1 style={{ margin: 0, fontSize: '28px' }}>CPAS Violation Documentation System</h1>
                    <p style={{ margin: '8px 0 0', fontSize: '14px', opacity: 0.9 }}>
                        Generate Individual Violation Records with Contextual Fields
                    </p>
                    <p style={styles.statusBar}>{apiStatus}</p>
                </div>
                <ViolationForm />
            </div>
        </div>
    );
}