import React, { useState, useEffect } from 'react';

const DashboardPage = ({ user }) => {
    const [stats, setStats] = useState({
        totalProjects: 0,
        activeProjects: 0,
        completedProjects: 0,
        totalMaterials: 0,
        pendingQuotes: 0,
        recentActivities: []
    });

    useEffect(() => {
        // 실제로는 API에서 데이터를 가져올 예정
        // 현재는 더미 데이터 사용
        setStats({
            totalProjects: 25,
            activeProjects: 8,
            completedProjects: 17,
            totalMaterials: 1250,
            pendingQuotes: 3,
            recentActivities: [
                { id: 1, type: 'project', message: '냉동기 프로젝트 #2024-001 생성됨', time: '2시간 전' },
                { id: 2, type: 'bom', message: 'BOG 시스템 BOM 업데이트됨', time: '4시간 전' },
                { id: 3, type: 'quote', message: '다이아프람 펌프 견적서 승인됨', time: '6시간 전' },
                { id: 4, type: 'material', message: '스테인리스 파이프 재고 부족 알림', time: '1일 전' },
                { id: 5, type: 'shipment', message: '드라이어 시스템 출하 완료', time: '2일 전' }
            ]
        });
    }, []);

    const getActivityIcon = (type) => {
        const icons = {
            project: '📋',
            bom: '🔧',
            quote: '💰',
            material: '📦',
            shipment: '🚚'
        };
        return icons[type] || '📌';
    };

    const StatCard = ({ title, value, icon, color = '#667eea' }) => (
        <div style={{
            background: 'white',
            borderRadius: '12px',
            padding: '24px',
            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
            border: '1px solid #e2e8f0',
            transition: 'transform 0.2s ease, box-shadow 0.2s ease'
        }}
        onMouseEnter={(e) => {
            e.currentTarget.style.transform = 'translateY(-2px)';
            e.currentTarget.style.boxShadow = '0 4px 16px rgba(0, 0, 0, 0.15)';
        }}
        onMouseLeave={(e) => {
            e.currentTarget.style.transform = 'translateY(0)';
            e.currentTarget.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.1)';
        }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div>
                    <div style={{ 
                        fontSize: '14px', 
                        color: '#718096', 
                        marginBottom: '8px',
                        fontWeight: '500'
                    }}>
                        {title}
                    </div>
                    <div style={{ 
                        fontSize: '32px', 
                        fontWeight: '700', 
                        color: '#2d3748' 
                    }}>
                        {value}
                    </div>
                </div>
                <div style={{ 
                    fontSize: '32px',
                    opacity: 0.8
                }}>
                    {icon}
                </div>
            </div>
        </div>
    );

    return (
        <div style={{ 
            padding: '32px',
            background: '#f7fafc',
            minHeight: '100vh'
        }}>
            <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
                {/* 헤더 */}
                <div style={{ marginBottom: '32px' }}>
                    <h1 style={{ 
                        fontSize: '28px', 
                        fontWeight: '700', 
                        color: '#2d3748',
                        margin: '0 0 8px 0'
                    }}>
                        안녕하세요, {user?.name}님! 👋
                    </h1>
                    <p style={{ 
                        color: '#718096', 
                        fontSize: '16px',
                        margin: '0'
                    }}>
                        오늘도 TK-MP 시스템과 함께 효율적인 업무를 시작해보세요.
                    </p>
                </div>

                {/* 통계 카드들 */}
                <div style={{ 
                    display: 'grid', 
                    gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', 
                    gap: '24px',
                    marginBottom: '32px'
                }}>
                    <StatCard 
                        title="전체 프로젝트" 
                        value={stats.totalProjects} 
                        icon="📋"
                        color="#667eea"
                    />
                    <StatCard 
                        title="진행중인 프로젝트" 
                        value={stats.activeProjects} 
                        icon="🚀"
                        color="#48bb78"
                    />
                    <StatCard 
                        title="완료된 프로젝트" 
                        value={stats.completedProjects} 
                        icon="✅"
                        color="#38b2ac"
                    />
                    <StatCard 
                        title="등록된 자재" 
                        value={stats.totalMaterials} 
                        icon="📦"
                        color="#ed8936"
                    />
                    <StatCard 
                        title="대기중인 견적" 
                        value={stats.pendingQuotes} 
                        icon="💰"
                        color="#9f7aea"
                    />
                </div>

                <div style={{ 
                    display: 'grid', 
                    gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))', 
                    gap: '24px'
                }}>
                    {/* 최근 활동 */}
                    <div style={{
                        background: 'white',
                        borderRadius: '12px',
                        padding: '24px',
                        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
                        border: '1px solid #e2e8f0'
                    }}>
                        <h3 style={{ 
                            fontSize: '18px', 
                            fontWeight: '600', 
                            color: '#2d3748',
                            margin: '0 0 20px 0'
                        }}>
                            📈 최근 활동
                        </h3>
                        <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                            {stats.recentActivities.map(activity => (
                                <div key={activity.id} style={{
                                    display: 'flex',
                                    alignItems: 'flex-start',
                                    gap: '12px',
                                    padding: '12px',
                                    borderRadius: '8px',
                                    background: '#f7fafc',
                                    border: '1px solid #e2e8f0'
                                }}>
                                    <span style={{ fontSize: '16px' }}>
                                        {getActivityIcon(activity.type)}
                                    </span>
                                    <div style={{ flex: 1 }}>
                                        <div style={{ 
                                            fontSize: '14px', 
                                            color: '#2d3748',
                                            marginBottom: '4px'
                                        }}>
                                            {activity.message}
                                        </div>
                                        <div style={{ 
                                            fontSize: '12px', 
                                            color: '#718096'
                                        }}>
                                            {activity.time}
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>

                    {/* 빠른 작업 */}
                    <div style={{
                        background: 'white',
                        borderRadius: '12px',
                        padding: '24px',
                        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
                        border: '1px solid #e2e8f0'
                    }}>
                        <h3 style={{ 
                            fontSize: '18px', 
                            fontWeight: '600', 
                            color: '#2d3748',
                            margin: '0 0 20px 0'
                        }}>
                            ⚡ 빠른 작업
                        </h3>
                        <div style={{ display: 'grid', gap: '12px' }}>
                            {[
                                { title: '새 프로젝트 등록', icon: '➕', color: '#667eea' },
                                { title: 'BOM 업로드', icon: '📤', color: '#48bb78' },
                                { title: '견적서 작성', icon: '📝', color: '#ed8936' },
                                { title: '자재 검색', icon: '🔍', color: '#38b2ac' }
                            ].map((action, index) => (
                                <button key={index} style={{
                                    display: 'flex',
                                    alignItems: 'center',
                                    gap: '12px',
                                    padding: '12px 16px',
                                    background: 'transparent',
                                    border: '1px solid #e2e8f0',
                                    borderRadius: '8px',
                                    cursor: 'pointer',
                                    transition: 'all 0.2s ease',
                                    fontSize: '14px',
                                    color: '#4a5568'
                                }}
                                onMouseEnter={(e) => {
                                    e.target.style.background = '#f7fafc';
                                    e.target.style.borderColor = action.color;
                                }}
                                onMouseLeave={(e) => {
                                    e.target.style.background = 'transparent';
                                    e.target.style.borderColor = '#e2e8f0';
                                }}>
                                    <span style={{ fontSize: '16px' }}>{action.icon}</span>
                                    <span>{action.title}</span>
                                </button>
                            ))}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default DashboardPage;






















