import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import axios from 'axios';

const OnboardingConfirmPage = () => {
    const { token } = useParams();
    const [status, setStatus] = useState('loading'); // loading | success | error | already
    const [data, setData] = useState(null);
    const [message, setMessage] = useState('');

    useEffect(() => {
        axios.get(`/api/onboarding/confirm/${token}`)
            .then(res => {
                setData(res.data.data);
                setStatus('success');
            })
            .catch(err => {
                const msg = err.response?.data?.message || 'Fehler';
                if (msg.includes('bereits')) {
                    setStatus('already');
                } else {
                    setStatus('error');
                    setMessage(msg);
                }
            });
    }, [token]);

    return (
        <div style={{
            minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center',
            background: 'linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%)',
            padding: '20px',
        }}>
            <div style={{
                background: '#fff', borderRadius: 16, padding: '48px 40px', maxWidth: 480, width: '100%',
                textAlign: 'center', boxShadow: '0 20px 60px rgba(0,0,0,.15)',
            }}>
                {status === 'loading' && (
                    <>
                        <div style={{ fontSize: '3rem', marginBottom: 16 }}>⏳</div>
                        <h2 style={{ margin: 0, color: '#374151' }}>Wird verarbeitet...</h2>
                    </>
                )}
                {status === 'success' && (
                    <>
                        <div style={{ fontSize: '4rem', marginBottom: 16 }}>✅</div>
                        <h2 style={{ margin: '0 0 12px', color: '#16a34a', fontSize: '1.5rem' }}>Übergabe bestätigt!</h2>
                        {data?.name && (
                            <p style={{ color: '#374151', fontSize: '1rem', margin: '0 0 8px' }}>
                                Vielen Dank, <strong>{data.name}</strong>!
                            </p>
                        )}
                        <p style={{ color: '#6b7280', fontSize: '0.9rem', margin: '8px 0 0', lineHeight: 1.6 }}>
                            Ihr Onboarding{data?.department ? ` in der Abteilung ${data.department}` : ''} wurde erfolgreich als abgeschlossen markiert.
                        </p>
                        <div style={{
                            marginTop: 24, padding: '16px', background: '#f0fdf4', borderRadius: 8,
                            border: '1px solid #bbf7d0',
                        }}>
                            <p style={{ margin: 0, color: '#15803d', fontSize: '0.875rem', fontWeight: 600 }}>
                                Willkommen im Team!
                            </p>
                        </div>
                    </>
                )}
                {status === 'already' && (
                    <>
                        <div style={{ fontSize: '3rem', marginBottom: 16 }}>ℹ️</div>
                        <h2 style={{ margin: '0 0 12px', color: '#0369a1', fontSize: '1.4rem' }}>Bereits bestätigt</h2>
                        <p style={{ color: '#6b7280', fontSize: '0.9rem' }}>
                            Ihre Übergabe wurde bereits bestätigt. Dieser Link ist nicht mehr aktiv.
                        </p>
                    </>
                )}
                {status === 'error' && (
                    <>
                        <div style={{ fontSize: '3rem', marginBottom: 16 }}>❌</div>
                        <h2 style={{ margin: '0 0 12px', color: '#dc2626', fontSize: '1.4rem' }}>Ungültiger Link</h2>
                        <p style={{ color: '#6b7280', fontSize: '0.9rem' }}>
                            {message || 'Dieser Bestätigungslink ist ungültig oder abgelaufen.'}
                        </p>
                        <p style={{ color: '#9ca3af', fontSize: '0.8rem', marginTop: 12 }}>
                            Bitte wenden Sie sich an Ihre IT-Abteilung.
                        </p>
                    </>
                )}
                <p style={{ color: '#d1d5db', fontSize: '0.75rem', marginTop: 32, marginBottom: 0 }}>
                    Cereda Systems GmbH · IT-Nexus
                </p>
            </div>
        </div>
    );
};

export default OnboardingConfirmPage;
