import React from 'react';
import { motion } from 'framer-motion';
import { FolderOpen, Plus, Sparkles } from 'lucide-react';

interface EmptyProjectsStateProps {
    onCreateClick: () => void;
}

const EmptyProjectsState: React.FC<EmptyProjectsStateProps> = ({ onCreateClick }) => {
    return (
        <motion.div 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, ease: 'easeOut' }}
            className="glass-card"
            style={{ 
                textAlign: 'center', 
                padding: '6rem 3rem', 
                color: 'var(--text-muted)', 
                display: 'flex', 
                flexDirection: 'column', 
                alignItems: 'center', 
                gap: '1.5rem', 
                background: 'linear-gradient(145deg, rgba(30, 41, 59, 0.4) 0%, rgba(15, 23, 42, 0.2) 100%)',
                border: '1px dashed rgba(59, 130, 246, 0.3)',
                boxShadow: '0 20px 40px rgba(0, 0, 0, 0.2)',
                borderRadius: '24px',
                position: 'relative',
                overflow: 'hidden'
            }}
        >
            {/* Tło - dekoracyjna poświata */}
            <div style={{ position: 'absolute', top: '-100px', left: '50%', transform: 'translateX(-50%)', width: '300px', height: '300px', background: 'radial-gradient(circle, rgba(59,130,246,0.15) 0%, transparent 70%)', filter: 'blur(40px)', zIndex: 0 }}/>

            <motion.div 
                animate={{ y: [0, -10, 0] }}
                transition={{ repeat: Infinity, duration: 4, ease: "easeInOut" }}
                style={{ 
                    background: 'linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(16, 185, 129, 0.1))', 
                    padding: '1.8rem', 
                    borderRadius: '50%', 
                    marginBottom: '0.5rem',
                    border: '1px solid rgba(255, 255, 255, 0.05)',
                    boxShadow: '0 0 30px rgba(59, 130, 246, 0.1)',
                    position: 'relative',
                    zIndex: 1
                }}
            >
                <FolderOpen size={56} color="var(--accent-blue)" style={{ opacity: 0.9 }} />
                <motion.div
                    animate={{ rotate: 360 }}
                    transition={{ repeat: Infinity, duration: 20, ease: "linear" }}
                    style={{ position: 'absolute', top: -10, right: -10 }}
                >
                    <Sparkles size={24} color="var(--accent-green)" />
                </motion.div>
            </motion.div>

            <h3 className="display-font" style={{ fontSize: '2rem', color: 'var(--text-primary)', fontWeight: 800, margin: 0, zIndex: 1 }}>
                Witaj w GrantForge!
            </h3>
            
            <p style={{ maxWidth: '500px', lineHeight: 1.6, fontSize: '1.1rem', zIndex: 1 }}>
                Nie masz jeszcze żadnych aktywnych projektów dotacyjnych. Zacznij swoją podróż, pozwalając naszej sztucznej inteligencji wygenerować dla Ciebie pierwszy wniosek optymalizowany pod kątem sukcesu.
            </p>
            
            <motion.button 
                whileHover={{ scale: 1.05, boxShadow: '0 0 30px rgba(16, 185, 129, 0.6)' }}
                whileTap={{ scale: 0.95 }}
                className="btn btn-primary"
                onClick={onCreateClick}
                style={{ 
                    marginTop: '2rem', 
                    padding: '1.2rem 2.5rem', 
                    fontSize: '1.15rem', 
                    background: 'linear-gradient(90deg, var(--accent-green), #3b82f6)', 
                    border: 'none', 
                    color: '#000', 
                    fontWeight: 900,
                    borderRadius: '12px',
                    display: 'flex',
                    alignItems: 'center',
                    gap: '0.6rem',
                    cursor: 'pointer',
                    zIndex: 1
                }}
            >
                <Plus size={24} /> Stwórz Pierwszy Projekt
            </motion.button>
        </motion.div>
    );
};

export default EmptyProjectsState;