'use client';
import { useState } from 'react';
import Link from 'next/link';
import styles from './ham.module.css';
import shared from '../shared/components.module.css';

// Mock data
const MOCK_STATS = {
    totalEmployees: 247,
    presentToday: 231,
    onLeaveToday: 12,
    pendingApprovals: 8,
    upcomingBirthdays: 5,
    reviewsDue: 15,
    payrollStatus: 'Processed'
};

const MOCK_BIRTHDAYS = [
    { id: 1, name: 'Rahul Sharma', date: 'Tomorrow', department: 'Engineering' },
    { id: 2, name: 'Priya Patel', date: 'Dec 23', department: 'Marketing' },
    { id: 3, name: 'Amit Kumar', date: 'Dec 25', department: 'Sales' }
];

const MOCK_RECENT_ACTIVITIES = [
    { id: 1, type: 'leave', message: 'Vikram Singh applied for leave', time: '10 mins ago' },
    { id: 2, type: 'attendance', message: 'Sarah Williams checked in', time: '25 mins ago' },
    { id: 3, type: 'review', message: 'Performance review completed for John Doe', time: '1 hour ago' },
    { id: 4, type: 'employee', message: 'New employee onboarded: Jane Smith', time: '2 hours ago' }
];

export default function HAMDashboard() {
    const [stats] = useState(MOCK_STATS);

    return (
        <div className={styles.hamContainer}>
            <div className={styles.sectionHeader}>
                <div>
                    <h1 className={styles.pageTitle}>HAM Dashboard</h1>
                    <p className={styles.pageSubtitle}>Human Asset Management Overview</p>
                </div>
            </div>

            {/* Stats Widgets */}
            <div className={styles.widgetsGrid}>
                <div className={styles.widget}>
                    <span className={styles.widgetIcon}>👥</span>
                    <div className={styles.widgetValue}>{stats.totalEmployees}</div>
                    <div className={styles.widgetLabel}>Total Employees</div>
                    <div className={`${styles.widgetChange} ${styles.positive}`}>
                        ↑ 5 this month
                    </div>
                </div>

                <div className={styles.widget}>
                    <span className={styles.widgetIcon}>✅</span>
                    <div className={styles.widgetValue}>{stats.presentToday}</div>
                    <div className={styles.widgetLabel}>Present Today</div>
                    <div className={`${styles.widgetChange} ${styles.positive}`}>
                        {((stats.presentToday / stats.totalEmployees) * 100).toFixed(1)}% attendance
                    </div>
                </div>

                <div className={styles.widget}>
                    <span className={styles.widgetIcon}>🏖️</span>
                    <div className={styles.widgetValue}>{stats.onLeaveToday}</div>
                    <div className={styles.widgetLabel}>On Leave Today</div>
                </div>

                <div className={styles.widget}>
                    <span className={styles.widgetIcon}>⏳</span>
                    <div className={styles.widgetValue}>{stats.pendingApprovals}</div>
                    <div className={styles.widgetLabel}>Pending Approvals</div>
                    <Link href="/dashboard/ham/leave" style={{ fontSize: '0.85rem', color: '#ffd700', marginTop: '0.5rem', display: 'block' }}>
                        View All →
                    </Link>
                </div>

                <div className={styles.widget}>
                    <span className={styles.widgetIcon}>🎂</span>
                    <div className={styles.widgetValue}>{stats.upcomingBirthdays}</div>
                    <div className={styles.widgetLabel}>Upcoming Birthdays</div>
                </div>

                <div className={styles.widget}>
                    <span className={styles.widgetIcon}>📊</span>
                    <div className={styles.widgetValue}>{stats.reviewsDue}</div>
                    <div className={styles.widgetLabel}>Reviews Due</div>
                    <Link href="/dashboard/ham/performance" style={{ fontSize: '0.85rem', color: '#ffd700', marginTop: '0.5rem', display: 'block' }}>
                        View All →
                    </Link>
                </div>

                <div className={styles.widget}>
                    <span className={styles.widgetIcon}>💰</span>
                    <div className={styles.widgetValue} style={{ fontSize: '1.5rem' }}>{stats.payrollStatus}</div>
                    <div className={styles.widgetLabel}>Payroll Status</div>
                    <div className={`${styles.widgetChange} ${styles.positive}`}>
                        December 2024
                    </div>
                </div>
            </div>

            {/* Quick Actions */}
            <div className={styles.section}>
                <h3 style={{ color: '#ffd700', marginBottom: '1rem' }}>Quick Actions</h3>
                <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
                    <Link href="/dashboard/ham/employees">
                        <button className={styles.btnPrimary}>+ Add Employee</button>
                    </Link>
                    <Link href="/dashboard/ham/attendance">
                        <button className={styles.btnSecondary}>Mark Attendance</button>
                    </Link>
                    <Link href="/dashboard/ham/leave">
                        <button className={styles.btnSecondary}>Approve Leaves</button>
                    </Link>
                    <Link href="/dashboard/ham/payroll">
                        <button className={styles.btnSecondary}>View Payroll</button>
                    </Link>
                </div>
            </div>

            {/* Two Column Layout */}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))', gap: '1.5rem' }}>
                {/* Upcoming Birthdays */}
                <div className={styles.section}>
                    <h3 style={{ color: '#ffd700', marginBottom: '1rem' }}>🎂 Upcoming Birthdays</h3>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
                        {MOCK_BIRTHDAYS.map(birthday => (
                            <div key={birthday.id} style={{
                                padding: '1rem',
                                background: 'rgba(255,255,255,0.03)',
                                borderRadius: '8px',
                                display: 'flex',
                                justifyContent: 'space-between',
                                alignItems: 'center'
                            }}>
                                <div>
                                    <div style={{ fontWeight: 600, color: '#fff' }}>{birthday.name}</div>
                                    <div style={{ fontSize: '0.85rem', color: '#888' }}>{birthday.department}</div>
                                </div>
                                <div style={{ color: '#ffd700', fontWeight: 600 }}>{birthday.date}</div>
                            </div>
                        ))}
                    </div>
                </div>

                {/* Recent Activities */}
                <div className={styles.section}>
                    <h3 style={{ color: '#ffd700', marginBottom: '1rem' }}>📋 Recent Activities</h3>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
                        {MOCK_RECENT_ACTIVITIES.map(activity => (
                            <div key={activity.id} style={{
                                padding: '1rem',
                                background: 'rgba(255,255,255,0.03)',
                                borderRadius: '8px',
                                borderLeft: '3px solid #ffd700'
                            }}>
                                <div style={{ fontWeight: 600, color: '#fff', marginBottom: '0.3rem' }}>
                                    {activity.message}
                                </div>
                                <div style={{ fontSize: '0.8rem', color: '#888' }}>{activity.time}</div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
}