import React from 'react';
import { Target, Zap, AlertTriangle, ShieldCheck, TrendingUp } from 'lucide-react';
import { motion, Variants } from 'framer-motion';

const containerVariants: Variants = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: {
      staggerChildren: 0.15
    }
  }
};

const itemVariants: Variants = {
  hidden: { opacity: 0, y: 30, scale: 0.96 },
  show: { opacity: 1, y: 0, scale: 1, transition: { type: "spring", stiffness: 280, damping: 20 } }
};

const DashboardHome: React.FC = () => {
  return (
    <motion.div variants={containerVariants} initial="hidden" animate="show" style={{ display: 'flex', flexDirection: 'column', gap: '2.5rem' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: '2rem' }}>
            <motion.div variants={itemVariants} className="glass-card" style={{ borderLeft: '4px solid var(--accent-blue)', position: 'relative' }}>
                <div style={{ display: 'flex', gap: '1rem', alignItems: 'center', marginBottom: '1rem' }}>
                    <div style={{ background: 'rgba(59,130,246,0.1)', padding: '0.8rem', borderRadius: '10px' }}><Target color="var(--accent-blue)" /></div>
                    <div>
                        <div style={{ fontWeight: 'bold' }}>Dopasowanie Matcher</div>
                        <div style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>Top 1 Program</div>
                    </div>
                </div>
                <h2 className="display-font" style={{ fontSize: '1.8rem', color: 'var(--text-primary)' }}>Ścieżka SMART</h2>
                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginTop: '0.8rem' }}>
                   <div style={{ padding: '0.3rem 0.6rem', background: 'rgba(59, 130, 246, 0.15)', borderRadius: '6px', color: 'var(--accent-blue)', fontWeight: 700 }}>92% Match</div>
                   <span style={{ fontSize: '0.85rem', color: 'var(--text-muted)' }}>Automatyzacja MŚP</span>
                </div>
            </motion.div>

            <motion.div variants={itemVariants} className="glass-card" style={{ background: 'linear-gradient(135deg, rgba(16, 185, 129, 0.12), transparent)', border: '1px solid rgba(16, 185, 129, 0.5)', position: 'relative', boxShadow: '0 10px 40px rgba(16, 185, 129, 0.1)' }}>
                <div style={{ display: 'flex', gap: '1rem', alignItems: 'center', marginBottom: '1.2rem' }}>
                    <div style={{ background: 'rgba(16,185,129,0.25)', padding: '0.8rem', borderRadius: '12px' }}><Zap color="var(--accent-green)" size={28} /></div>
                    <div>
                        <div style={{ fontWeight: 800, fontSize: '1.05rem', color: 'var(--text-primary)' }}>Szanse Dofinansowania</div>
                        <div style={{ fontSize: '0.85rem', color: 'var(--accent-green)', fontWeight: 600 }}>Na start inwestycji</div>
                    </div>
                </div>
                <h2 className="display-font" style={{ fontSize: '3.5rem', color: 'var(--text-primary)', display: 'flex', alignItems: 'center', gap: '0.5rem', textShadow: '0 0 50px rgba(16, 185, 129, 0.5)', fontWeight: 900 }}>
                   <span style={{ background: 'linear-gradient(90deg, #10B981, #34D399)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>~2.4M</span>
                   <span style={{fontSize: '1.4rem', color: 'var(--text-muted)', fontWeight: 700}}>PLN</span>
                   <TrendingUp size={32} color="var(--accent-green)" style={{marginLeft: 'auto'}}/>
                </h2>
                <div style={{ display: 'flex', gap: '0.8rem', marginTop: '0.8rem', marginBottom: '1.5rem', flexWrap: 'wrap' }}>
                    <div style={{ fontSize: '0.85rem', background: 'rgba(16, 185, 129, 0.2)', color: 'var(--accent-green)', padding: '0.4rem 0.8rem', borderRadius: '6px', fontWeight: 800, display: 'flex', alignItems: 'center', gap: '0.4rem', boxShadow: '0 0 15px rgba(16, 185, 129, 0.25)' }}>
                         <TrendingUp size={14} /> Szansa Sukcesu: 88%
                    </div>
                    <div style={{ fontSize: '0.85rem', background: 'rgba(0, 0, 0, 0.4)', color: '#A7F3D0', padding: '0.4rem 0.8rem', borderRadius: '6px', fontWeight: 700, border: '1px solid rgba(16,185,129,0.3)' }}>
                         Intensywność wsparcia (Dotacja): 65%
                    </div>
                </div>

                <div style={{ padding: '0.9rem', marginBottom: '0.5rem', background: 'rgba(16, 185, 129, 0.05)', borderRadius: '8px', border: '1px solid rgba(16,185,129,0.1)', fontSize: '0.85rem', color: 'var(--text-secondary)', lineHeight: 1.5 }}>
                    Wartość dofinansowania może nieznacznie ewoluować po uzupełnieniu braków zadeklarowanych w module `Gap Analyzer`.
                </div>

                <motion.button 
                   whileHover={{ scale: 1.03, boxShadow: '0 0 35px rgba(16, 185, 129, 0.5)' }}
                   whileTap={{ scale: 0.97 }}
                   className="btn" 
                   style={{ 
                       width: '100%', 
                       marginTop: '1.5rem', 
                       background: 'linear-gradient(90deg, var(--accent-green), #059669)', 
                       color: '#fff', 
                       fontWeight: 800,
                       textTransform: 'uppercase',
                       letterSpacing: '1px',
                       boxShadow: '0 0 20px rgba(16, 185, 129, 0.3)'
                   }}>
                   Generuj pełny wniosek
                </motion.button>
            </motion.div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2rem' }}>
             <motion.div variants={itemVariants} className="glass-card" style={{ borderTop: '4px solid var(--accent-red)' }}>
                 <h3 style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '1.5rem', color: '#EF4444', fontWeight: 800 }}>
                    <AlertTriangle size={22} color="#EF4444"/> Ryzyka i Braki (Gap Analyzer)
                 </h3>
                 <ul style={{ display: 'flex', flexDirection: 'column', gap: '1rem', listStyle: 'none', padding: 0 }}>
                    <li style={{ padding: '1.2rem', background: 'rgba(239, 68, 68, 0.1)', borderRadius: '12px', borderLeft: '4px solid #F97316' }}>
                        <strong style={{ color: '#fff', fontSize: '1.05rem', letterSpacing: '0.5px' }}>Brak opisu redukcji śladu węglowego.</strong> 
                        <div style={{ fontSize: '0.95rem', color: '#fff', opacity: 0.9, marginTop: '0.6rem', lineHeight: '1.5', fontWeight: 500 }}>Wymóg zgodności z dyrektywą DNSH, wniosek może być obniżony o <span style={{ color: '#F87171', fontWeight: 800 }}>2 punkty</span> na starcie przez brak tego obszaru.</div>
                    </li>
                    <li style={{ padding: '1.2rem', background: 'rgba(239, 68, 68, 0.1)', borderRadius: '12px', borderLeft: '4px solid #EF4444' }}>
                        <strong style={{ color: '#fff', fontSize: '1.05rem', letterSpacing: '0.5px' }}>Niewystarczający opis algorytmu AI.</strong> 
                        <div style={{ fontSize: '0.95rem', color: '#fff', opacity: 0.9, marginTop: '0.6rem', lineHeight: '1.5', fontWeight: 500 }}>Critic zaleca <span style={{ color: '#F87171', fontWeight: 800 }}>szczegółowe rozpisanie architektury sieci</span> w sekcji technicznej przed wygenerowaniem rewizji.</div>
                    </li>
                 </ul>
             </motion.div>

             <motion.div variants={itemVariants} className="glass-card">
                 <h3 className="display-font" style={{ display: 'flex', alignItems: 'center', gap: '0.6rem', marginBottom: '1.5rem', color: 'var(--text-primary)', fontSize: '1.1rem' }}>
                     <ShieldCheck size={20} color="var(--accent-green)"/> Mocne Strony Aplikacji
                 </h3>
                 <ul style={{ display: 'flex', flexDirection: 'column', gap: '1rem', listStyle: 'none', padding: 0 }}>
                    <li style={{ padding: '1.2rem', background: 'rgba(16,185,129,0.08)', borderRadius: '12px', borderLeft: '4px solid var(--accent-green)' }}>
                        <strong style={{fontSize: '1.05rem', color: '#fff', letterSpacing: '0.5px'}}>Zgodność z Przemysłem 4.0.</strong> 
                        <div style={{ fontSize: '0.95rem', color: '#fff', opacity: 0.9, marginTop: '0.6rem', lineHeight: '1.5', fontWeight: 500 }}>System CNC w pełni asymiluje wytyczne dla robotyzacji, co znacząco <span style={{ color: '#34D399', fontWeight: 800 }}>podwyższa bazowy scorning</span> innowacyjności.</div>
                    </li>
                    <li style={{ padding: '1.2rem', background: 'rgba(16,185,129,0.08)', borderRadius: '12px', borderLeft: '4px solid var(--accent-green)' }}>
                        <strong style={{fontSize: '1.05rem', color: '#fff', letterSpacing: '0.5px'}}>Przewidywana Mierzalna Skalowalność.</strong> 
                        <div style={{ fontSize: '0.95rem', color: '#fff', opacity: 0.9, marginTop: '0.6rem', lineHeight: '1.5', fontWeight: 500 }}>Projekt gotowy do komercjalizacji na innych liniach produkcyjnych (zbadany rynek zbytu).</div>
                    </li>
                 </ul>
             </motion.div>
        </div>
    </motion.div>
  );
};

export default DashboardHome;