import React from 'react';
import { MOCK_EMPLOYEES } from '../../constants';
import { Banknote, TrendingUp, Wallet, ArrowDownRight, PieChart, Calendar } from 'lucide-react';

export const PayrollModule: React.FC = () => {
    const totalPayroll = MOCK_EMPLOYEES.reduce((sum, e) => sum + e.salary, 0);
    const avgSalary = Math.round(totalPayroll / MOCK_EMPLOYEES.length);

    return (
        <div className="space-y-6 animate-fade-in">
            {/* Visual Header */}
            <div className="bg-gradient-to-br from-emerald-600 to-emerald-800 rounded-[2.5rem] p-8 text-white shadow-xl relative overflow-hidden">
                <Banknote className="absolute -top-4 -right-4 w-48 h-48 opacity-10 rotate-12" />
                <div className="relative z-10">
                    <p className="text-emerald-100 text-[10px] font-black uppercase tracking-[0.2em] mb-2">Фонд Оплаты Труда (Месяц)</p>
                    <h3 className="text-4xl font-black mb-6">{totalPayroll.toLocaleString()} ₽</h3>
                    
                    <div className="grid grid-cols-2 gap-8">
                        <div>
                            <p className="text-[9px] text-emerald-200 font-bold uppercase mb-1">Средний оклад</p>
                            <p className="text-xl font-black">{avgSalary.toLocaleString()} ₽</p>
                        </div>
                        <div>
                            <p className="text-[9px] text-emerald-200 font-bold uppercase mb-1">Выплата в срок</p>
                            <p className="text-xl font-black text-white flex items-center gap-2">
                                100% <TrendingUp className="w-5 h-5 text-emerald-300" />
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            {/* List by Department */}
            <div className="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
                <div className="p-4 bg-slate-50 border-b border-slate-200 flex justify-between items-center">
                    <h3 className="font-black text-slate-700 text-[10px] uppercase tracking-widest">Детализация начислений</h3>
                    <div className="flex items-center gap-1.5 text-[10px] font-black text-primary-600 uppercase">
                        <Calendar className="w-3.5 h-3.5"/> Май 2024
                    </div>
                </div>
                <div className="divide-y divide-slate-100">
                    {MOCK_EMPLOYEES.map(emp => (
                        <div key={emp.id} className="p-4 flex items-center justify-between hover:bg-slate-50 transition-colors">
                            <div className="flex items-center gap-3">
                                <div className="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center font-bold text-slate-500 text-xs">{emp.name[0]}</div>
                                <div>
                                    <p className="text-xs font-bold text-slate-800">{emp.name}</p>
                                    <p className="text-[9px] text-slate-400 font-bold uppercase">{emp.position}</p>
                                </div>
                            </div>
                            <div className="text-right">
                                <p className="text-sm font-black text-slate-900">{emp.salary.toLocaleString()} ₽</p>
                                <span className="text-[8px] font-black text-emerald-500 uppercase">Оклад + Премия</span>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
            
            <div className="flex items-center gap-3 p-4 bg-blue-50 rounded-2xl border border-blue-100">
                <PieChart className="w-5 h-5 text-blue-500 shrink-0" />
                <p className="text-[11px] text-blue-700 leading-snug font-medium">
                    Расходы на персонал составляют 42% от операционного бюджета УК. Рекомендуемый лимит: не более 45%.
                </p>
            </div>
        </div>
    );
};