import React, { useState, useEffect } from 'react';
import { api } from '../api';

const PersonalizedDashboard = () => {
    const [user, setUser] = useState(null);
    const [dashboardData, setDashboardData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [recentActivities, setRecentActivities] = useState([]);

    useEffect(() => {
        loadUserData();
        loadDashboardData();
        loadRecentActivities();
    }, []);

    const loadUserData = () => {
        const userData = localStorage.getItem('user_data');
        if (userData) {
            setUser(JSON.parse(userData));
        }
    };

    const loadDashboardData = async () => {
        try {
            // 실제 API에서 대시보드 데이터 로드
            const response = await api.get('/dashboard/stats');
            if (response.data && response.data.success) {
                // API 데이터와 목 데이터를 병합 (quickActions 등 누락된 필드 보완)
                const mockData = generateMockDataByRole();
                const mergedData = {
                    ...mockData,
                    ...response.data.stats,
                    // quickActions가 없으면 목 데이터의 것을 사용
                    quickActions: response.data.stats.quickActions || mockData?.quickActions || []
                };
                setDashboardData(mergedData);
            } else {
                // API 실패 시 목 데이터 사용
                console.log('대시보드 API 응답이 없어 목 데이터를 사용합니다.');
                const mockData = generateMockDataByRole();
                setDashboardData(mockData);
            }
        } catch (error) {
            console.log('대시보드 API가 구현되지 않아 목 데이터를 사용합니다:', error.response?.status);
            // 에러 시 목 데이터 사용
            const mockData = generateMockDataByRole();
            setDashboardData(mockData);
        } finally {
            setLoading(false);
        }
    };

    const loadRecentActivities = async () => {
        try {
            // 실제 API에서 활동 이력 로드
            const response = await api.get('/dashboard/activities?limit=5');
            if (response.data.success && response.data.activities.length > 0) {
                setRecentActivities(response.data.activities);
            } else {
                // API 실패 시 목 데이터 사용
                const mockActivities = generateMockActivitiesByRole();
                setRecentActivities(mockActivities);
            }
        } catch (error) {
            console.log('활동 이력 API가 구현되지 않아 목 데이터를 사용합니다:', error.response?.status);
            // 에러 시 목 데이터 사용
            const mockActivities = generateMockActivitiesByRole();
            setRecentActivities(mockActivities);
        }
    };

    const generateMockDataByRole = () => {
        if (!user) return null;

        const baseData = {
            admin: {
                title: "시스템 관리자",
                subtitle: "전체 시스템을 관리하고 모니터링합니다",
                metrics: [
                    { label: "전체 프로젝트 수", value: 45, icon: "📋", color: "#667eea" },
                    { label: "활성 사용자 수", value: 12, icon: "👥", color: "#48bb78" },
                    { label: "시스템 상태", value: "정상", icon: "🟢", color: "#38b2ac" },
                    { label: "오늘 업로드", value: 8, icon: "📤", color: "#ed8936" }
                ],
                quickActions: [
                    { title: "사용자 관리", icon: "👤", path: "/admin/users", color: "#667eea" },
                    { title: "시스템 설정", icon: "⚙️", path: "/admin/settings", color: "#48bb78" },
                    { title: "백업 관리", icon: "💾", path: "/admin/backup", color: "#ed8936" },
                    { title: "활동 로그", icon: "📊", path: "/admin/logs", color: "#9f7aea" }
                ]
            },
            manager: {
                title: "프로젝트 매니저",
                subtitle: "팀 프로젝트를 관리하고 진행상황을 모니터링합니다",
                metrics: [
                    { label: "담당 프로젝트", value: 8, icon: "📋", color: "#667eea" },
                    { label: "팀 진행률", value: "87%", icon: "📈", color: "#48bb78" },
                    { label: "승인 대기", value: 3, icon: "⏳", color: "#ed8936" },
                    { label: "이번 주 완료", value: 5, icon: "✅", color: "#38b2ac" }
                ],
                quickActions: [
                    { title: "프로젝트 생성", icon: "➕", path: "/projects/new", color: "#667eea" },
                    { title: "팀 관리", icon: "👥", path: "/team", color: "#48bb78" },
                    { title: "진행 상황", icon: "📊", path: "/progress", color: "#38b2ac" },
                    { title: "승인 처리", icon: "✅", path: "/approvals", color: "#ed8936" }
                ]
            },
            designer: {
                title: "설계 담당자",
                subtitle: "BOM 파일을 관리하고 자재를 분류합니다",
                metrics: [
                    { label: "내 BOM 파일", value: 15, icon: "📄", color: "#667eea" },
                    { label: "분류 완료율", value: "92%", icon: "🎯", color: "#48bb78" },
                    { label: "검증 대기", value: 7, icon: "⏳", color: "#ed8936" },
                    { label: "이번 주 업로드", value: 12, icon: "📤", color: "#9f7aea" }
                ],
                quickActions: [
                    { title: "BOM 업로드", icon: "📤", path: "/upload", color: "#667eea" },
                    { title: "자재 분류", icon: "🔧", path: "/materials", color: "#48bb78" },
                    { title: "리비전 관리", icon: "🔄", path: "/revisions", color: "#38b2ac" },
                    { title: "분류 검증", icon: "✅", path: "/verify", color: "#ed8936" }
                ]
            },
            purchaser: {
                title: "구매 담당자",
                subtitle: "구매 요청을 처리하고 발주를 관리합니다",
                metrics: [
                    { label: "구매 요청", value: 23, icon: "🛒", color: "#667eea" },
                    { label: "발주 완료", value: 18, icon: "✅", color: "#48bb78" },
                    { label: "입고 대기", value: 5, icon: "📦", color: "#ed8936" },
                    { label: "이번 달 금액", value: "₩2.3M", icon: "💰", color: "#9f7aea" }
                ],
                quickActions: [
                    { title: "구매 확정", icon: "🛒", path: "/purchase", color: "#667eea" },
                    { title: "발주 관리", icon: "📋", path: "/orders", color: "#48bb78" },
                    { title: "공급업체", icon: "🏢", path: "/suppliers", color: "#38b2ac" },
                    { title: "입고 처리", icon: "📦", path: "/receiving", color: "#ed8936" }
                ]
            },
            user: {
                title: "일반 사용자",
                subtitle: "할당된 업무를 수행하고 프로젝트에 참여합니다",
                metrics: [
                    { label: "내 업무", value: 6, icon: "📋", color: "#667eea" },
                    { label: "완료율", value: "75%", icon: "📈", color: "#48bb78" },
                    { label: "대기 중", value: 2, icon: "⏳", color: "#ed8936" },
                    { label: "이번 주 활동", value: 12, icon: "🎯", color: "#9f7aea" }
                ],
                quickActions: [
                    { title: "내 업무", icon: "📋", path: "/my-tasks", color: "#667eea" },
                    { title: "프로젝트 보기", icon: "👁️", path: "/projects", color: "#48bb78" },
                    { title: "리포트 다운로드", icon: "📊", path: "/reports", color: "#38b2ac" },
                    { title: "도움말", icon: "❓", path: "/help", color: "#9f7aea" }
                ]
            }
        };

        return baseData[user.role] || baseData.user;
    };

    const generateMockActivitiesByRole = () => {
        if (!user) return [];

        const activities = {
            admin: [
                { type: "system", message: "새 사용자 3명이 등록되었습니다", time: "30분 전", icon: "👥" },
                { type: "backup", message: "일일 백업이 완료되었습니다", time: "2시간 전", icon: "💾" },
                { type: "alert", message: "시스템 리소스 사용률 85%", time: "4시간 전", icon: "⚠️" },
                { type: "update", message: "데이터베이스 인덱스가 최적화되었습니다", time: "6시간 전", icon: "🔧" }
            ],
            manager: [
                { type: "approval", message: "냉동기 프로젝트 구매 승인 완료", time: "1시간 전", icon: "✅" },
                { type: "meeting", message: "주간 팀 미팅 일정이 등록되었습니다", time: "3시간 전", icon: "📅" },
                { type: "progress", message: "BOG 시스템 프로젝트 90% 진행", time: "5시간 전", icon: "📈" },
                { type: "task", message: "김설계님에게 새 업무가 할당되었습니다", time: "1일 전", icon: "👤" }
            ],
            designer: [
                { type: "upload", message: "다이아프램 펌프 BOM 파일을 업로드했습니다", time: "45분 전", icon: "📤" },
                { type: "classify", message: "스테인리스 파이프 127개 자재 분류 완료", time: "2시간 전", icon: "🔧" },
                { type: "revision", message: "드라이어 시스템 Rev.2 업데이트", time: "4시간 전", icon: "🔄" },
                { type: "verify", message: "볼트 분류 검증 5건 완료", time: "1일 전", icon: "✅" }
            ],
            purchaser: [
                { type: "purchase", message: "스테인리스 파이프 구매 확정", time: "20분 전", icon: "🛒" },
                { type: "order", message: "ABC 공급업체에 발주서 전송", time: "1시간 전", icon: "📋" },
                { type: "receive", message: "밸브 15개 입고 처리 완료", time: "3시간 전", icon: "📦" },
                { type: "quote", message: "새 견적서 3건 접수", time: "5시간 전", icon: "💰" }
            ],
            user: [
                { type: "task", message: "자재 검증 업무 2건 완료", time: "1시간 전", icon: "✅" },
                { type: "view", message: "냉동기 프로젝트 진행상황 확인", time: "3시간 전", icon: "👁️" },
                { type: "download", message: "월간 리포트 다운로드", time: "6시간 전", icon: "📊" },
                { type: "help", message: "도움말 페이지 방문", time: "1일 전", icon: "❓" }
            ]
        };

        return activities[user.role] || activities.user;
    };

    const handleQuickAction = (action) => {
        // 실제 네비게이션 구현 (향후)
        console.log(`네비게이션: ${action.path}`);
        alert(`${action.title} 기능은 곧 구현될 예정입니다.`);
    };

    const handleLogout = () => {
        localStorage.removeItem('access_token');
        localStorage.removeItem('user_data');
        window.location.reload();
    };

    if (loading || !user || !dashboardData) {
        return (
            <div style={{
                minHeight: '100vh',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                background: '#f7fafc'
            }}>
                <div style={{ textAlign: 'center' }}>
                    <div style={{ fontSize: '48px', marginBottom: '16px' }}>⏳</div>
                    <div>대시보드를 불러오는 중...</div>
                </div>
            </div>
        );
    }

    return (
        <div style={{
            minHeight: '100vh',
            background: '#f7fafc',
            fontFamily: 'Arial, sans-serif'
        }}>
            {/* 네비게이션 바 */}
            <nav style={{
                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                padding: '16px 24px',
                color: 'white',
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'
            }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                    <span style={{ fontSize: '24px' }}>🚀</span>
                    <div>
                        <h1 style={{ margin: '0', fontSize: '20px', fontWeight: '700' }}>TK-MP System</h1>
                        <span style={{ fontSize: '12px', opacity: '0.9' }}>통합 프로젝트 관리</span>
                    </div>
                </div>
                
                <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
                    <div style={{ textAlign: 'right' }}>
                        <div style={{ fontSize: '14px', fontWeight: '600' }}>{user.name || user.username}</div>
                        <div style={{ fontSize: '12px', opacity: '0.9' }}>
                            {dashboardData.title}
                        </div>
                    </div>
                    <button
                        onClick={handleLogout}
                        style={{
                            padding: '8px 16px',
                            background: 'rgba(255, 255, 255, 0.2)',
                            color: 'white',
                            border: 'none',
                            borderRadius: '6px',
                            cursor: 'pointer',
                            fontSize: '14px'
                        }}
                    >
                        로그아웃
                    </button>
                </div>
            </nav>

            {/* 메인 콘텐츠 */}
            <main style={{ padding: '32px 24px' }}>
                <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
                    {/* 개인별 맞춤 배너 */}
                    <div style={{
                        background: `linear-gradient(135deg, ${dashboardData.metrics[0].color}20 0%, ${dashboardData.metrics[1].color}20 100%)`,
                        borderRadius: '16px',
                        padding: '32px',
                        marginBottom: '32px',
                        border: `1px solid ${dashboardData.metrics[0].color}40`
                    }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: '16px', marginBottom: '16px' }}>
                            <div style={{ fontSize: '48px' }}>
                                {user.role === 'admin' ? '👑' : 
                                 user.role === 'manager' ? '👨‍💼' :
                                 user.role === 'designer' ? '🎨' :
                                 user.role === 'purchaser' ? '🛒' : '👤'}
                            </div>
                            <div>
                                <h2 style={{ 
                                    margin: '0 0 8px 0', 
                                    fontSize: '28px', 
                                    fontWeight: '700',
                                    color: '#2d3748'
                                }}>
                                    안녕하세요, {user.name || user.username}님! 👋
                                </h2>
                                <p style={{ 
                                    margin: '0', 
                                    fontSize: '16px', 
                                    color: '#4a5568',
                                    fontWeight: '500'
                                }}>
                                    {dashboardData.subtitle}
                                </p>
                            </div>
                        </div>
                    </div>

                    {/* 핵심 지표 카드들 */}
                    <div style={{ 
                        display: 'grid', 
                        gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', 
                        gap: '24px',
                        marginBottom: '32px'
                    }}>
                        {(dashboardData.metrics || []).map((metric, index) => (
                            <div key={index} 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',
                                cursor: 'pointer'
                            }}
                            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'
                                        }}>
                                            {metric.label}
                                        </div>
                                        <div style={{ 
                                            fontSize: '32px', 
                                            fontWeight: '700', 
                                            color: metric.color
                                        }}>
                                            {metric.value}
                                        </div>
                                    </div>
                                    <div style={{ 
                                        fontSize: '32px',
                                        opacity: 0.8
                                    }}>
                                        {metric.icon}
                                    </div>
                                </div>
                            </div>
                        ))}
                    </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: 'grid', gap: '12px' }}>
                                {(dashboardData.quickActions || []).map((action, index) => (
                                    <button 
                                        key={index} 
                                        onClick={() => handleQuickAction(action)}
                                        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',
                                            textAlign: 'left'
                                        }}
                                        onMouseEnter={(e) => {
                                            e.target.style.background = `${action.color}10`;
                                            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 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' }}>
                                {recentActivities.map((activity, index) => (
                                    <div key={index} style={{
                                        display: 'flex',
                                        alignItems: 'flex-start',
                                        gap: '12px',
                                        padding: '12px',
                                        borderRadius: '8px',
                                        background: '#f7fafc',
                                        border: '1px solid #e2e8f0'
                                    }}>
                                        <span style={{ fontSize: '16px' }}>
                                            {activity.icon}
                                        </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>
                </div>
            </main>
        </div>
    );
};

export default PersonalizedDashboard;