'use client';

import { useSession, signOut } from 'next-auth/react';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';

export default function AdminDashboard() {
    const { data: session, status } = useSession();
    const router = useRouter();
    const [activeTab, setActiveTab] = useState('overview');
    const [showDropdown, setShowDropdown] = useState(false);

    useEffect(() => {
        if (status === 'unauthenticated') router.push('/my-account');
    }, [status]);

    useEffect(() => {
        const handleClick = (e: MouseEvent) => {
            const target = e.target as HTMLElement;
            if (!target.closest('#admin-dropdown-wrapper')) {
                setShowDropdown(false);
            }
        };
        document.addEventListener('click', handleClick);
        return () => document.removeEventListener('click', handleClick);
    }, []);

    const handleLogout = async () => {
        await signOut({ redirect: false });
        window.location.href = '/my-account';
    };

    if (status === 'loading') return (
        <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <p>Loading...</p>
        </div>
    );

    const menuItems = [
        { id: 'overview', label: 'Dashboard', icon: '⊞' },
        { id: 'content', label: 'Manage Content', icon: '📝' },
        { id: 'users', label: 'View Users', icon: '👥' },
        { id: 'blogs', label: 'Manage Blogs', icon: '📰' },
        { id: 'reports', label: 'View Reports', icon: '📈' },
    ];

    return (
        <div style={{ minHeight: '100vh', background: '#f1f1f1', fontFamily: 'sans-serif', display: 'flex', flexDirection: 'column' }}>

            {/* TOP BAR */}
            <div style={{ background: '#1d2327', height: '32px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 16px', position: 'sticky', top: 0, zIndex: 9999, flexShrink: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                    <span style={{ color: '#a7aaad', fontSize: '13px', padding: '0 12px' }}>Nyra Leadership — Admin</span>
                </div>
                <div id="admin-dropdown-wrapper" style={{ position: 'relative' }}>
                    {/* Trigger — avatar + name, no "Howdy" */}
                    <div onClick={() => setShowDropdown(!showDropdown)}
                        style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '0 12px', height: '32px', cursor: 'pointer', color: '#a7aaad', fontSize: '13px' }}
                        onMouseEnter={e => { (e.currentTarget.style.background = '#2c3338'); (e.currentTarget.style.color = '#fff'); }}
                        onMouseLeave={e => { (e.currentTarget.style.background = 'transparent'); (e.currentTarget.style.color = '#a7aaad'); }}>
                        <div style={{ width: '26px', height: '26px', borderRadius: '50%', background: '#3c434a', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="#a7aaad"><path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z" /></svg>
                        </div>
                        <span>{session?.user?.name}</span>
                        <span style={{ fontSize: '10px', marginLeft: '2px' }}>▼</span>
                    </div>

                    {/* Dropdown */}
                    {showDropdown && (
                        <div
                            style={{ position: 'absolute', right: 0, top: '32px', background: '#1d2327', border: '1px solid #3c434a', minWidth: '200px', zIndex: 9999, boxShadow: '0 3px 8px rgba(0,0,0,0.5)' }}>
                            {/* Profile info */}
                            <div style={{ padding: '12px 16px', borderBottom: '1px solid #3c434a', display: 'flex', gap: '12px', alignItems: 'center' }}>
                                <div style={{ width: '44px', height: '44px', borderRadius: '50%', background: '#3c434a', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="#a7aaad"><path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z" /></svg>
                                </div>
                                <div>
                                    <p style={{ color: '#fff', fontSize: '14px', fontWeight: 600, margin: 0 }}>{session?.user?.name}</p>
                                    <p style={{ color: '#a7aaad', fontSize: '12px', margin: 0 }}>Admin</p>
                                </div>
                            </div>
                            {/* Edit Profile */}
                            <div style={{ padding: '10px 16px', color: '#a7aaad', fontSize: '13px', cursor: 'pointer', borderBottom: '1px solid #3c434a' }}
                                onMouseEnter={e => { (e.currentTarget.style.background = '#2c3338'); (e.currentTarget.style.color = '#72aee6'); }}
                                onMouseLeave={e => { (e.currentTarget.style.background = 'transparent'); (e.currentTarget.style.color = '#a7aaad'); }}>
                                Edit Profile
                            </div>
                            {/* Log Out */}
                            <div
                                onClick={(e) => { e.stopPropagation(); handleLogout(); }}
                                style={{ padding: '10px 16px', color: '#a7aaad', fontSize: '13px', cursor: 'pointer' }}
                                onMouseEnter={e => { (e.currentTarget.style.background = '#2c3338'); (e.currentTarget.style.color = '#72aee6'); }}
                                onMouseLeave={e => { (e.currentTarget.style.background = 'transparent'); (e.currentTarget.style.color = '#a7aaad'); }}>
                                Log Out
                            </div>
                        </div>
                    )}
                </div>
            </div>

            {/* MAIN */}
            <div style={{ display: 'flex', flex: 1 }}>
                {/* SIDEBAR */}
                <div style={{ width: '200px', background: '#2c3338', minHeight: 'calc(100vh - 32px)', flexShrink: 0 }}>
                    <div style={{ padding: '14px 16px', borderBottom: '1px solid #3c434a' }}>
                        <p style={{ color: '#fff', fontWeight: 700, fontSize: '13px', margin: 0 }}>Admin Panel</p>
                        <p style={{ color: '#72aee6', fontSize: '11px', margin: '2px 0 0' }}>Role: Admin</p>
                    </div>
                    {menuItems.map((item) => (
                        <div key={item.id} onClick={() => setActiveTab(item.id)}
                            style={{ padding: '12px 16px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '10px', fontSize: '13px', color: activeTab === item.id ? '#fff' : '#a7aaad', background: activeTab === item.id ? '#0073aa' : 'transparent', borderLeft: activeTab === item.id ? '3px solid #72aee6' : '3px solid transparent' }}>
                            <span>{item.icon}</span><span>{item.label}</span>
                        </div>
                    ))}
                </div>

                {/* CONTENT */}
                <div style={{ flex: 1, padding: '24px', background: '#f1f1f1' }}>

                    {activeTab === 'overview' && (
                        <div>
                            <h1 style={{ color: '#1d2327', marginTop: 0, fontSize: '23px', fontWeight: 400, borderBottom: '1px solid #c3c4c7', paddingBottom: '12px', marginBottom: '20px' }}>Dashboard</h1>
                            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '16px', marginBottom: '24px' }}>
                                {[
                                    { label: 'Total Users', value: '3', color: '#0073aa', icon: '👥' },
                                    { label: 'Blog Posts', value: '8', color: '#b53855', icon: '📰' },
                                    { label: 'Content Pages', value: '15', color: '#2c3338', icon: '📝' },
                                    { label: 'Monthly Views', value: '1.2K', color: '#CF87B0', icon: '📈' },
                                ].map((stat) => (
                                    <div key={stat.label} style={{ background: '#fff', padding: '20px', border: '1px solid #c3c4c7', borderTop: `4px solid ${stat.color}` }}>
                                        <div style={{ fontSize: '24px', marginBottom: '6px' }}>{stat.icon}</div>
                                        <p style={{ fontSize: '26px', fontWeight: 700, color: stat.color, margin: '0 0 4px' }}>{stat.value}</p>
                                        <p style={{ fontSize: '13px', color: '#646970', margin: 0 }}>{stat.label}</p>
                                    </div>
                                ))}
                            </div>
                            <div style={{ background: '#fff', border: '1px solid #c3c4c7', padding: '20px' }}>
                                <h2 style={{ color: '#1d2327', marginTop: 0, fontSize: '14px', fontWeight: 600, textTransform: 'uppercase', borderBottom: '1px solid #c3c4c7', paddingBottom: '10px' }}>Recent Activity</h2>
                                {['New user registered', 'Blog post published', 'Case study updated', 'Masterclass registration'].map((activity, i) => (
                                    <div key={i} style={{ padding: '10px 0', borderBottom: '1px solid #f0f0f1', display: 'flex', alignItems: 'center', gap: '10px', fontSize: '13px', color: '#3c434a' }}>
                                        <span style={{ width: '6px', height: '6px', borderRadius: '50%', background: '#0073aa', flexShrink: 0, display: 'inline-block' }} />{activity}
                                    </div>
                                ))}
                            </div>
                        </div>
                    )}

                    {activeTab === 'content' && (
                        <div>
                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid #c3c4c7', paddingBottom: '12px', marginBottom: '20px' }}>
                                <h1 style={{ color: '#1d2327', margin: 0, fontSize: '23px', fontWeight: 400 }}>Manage Content</h1>
                                <button style={{ padding: '6px 12px', background: '#0073aa', color: '#fff', border: 'none', cursor: 'pointer', fontWeight: 600, fontSize: '13px' }}>+ Add Content</button>
                            </div>
                            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px' }}>
                                {['Home Page', 'About Us', 'Offerings', 'Case Studies', 'Testimonials', 'Contact'].map((page, i) => (
                                    <div key={i} style={{ background: '#fff', padding: '16px', border: '1px solid #c3c4c7', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                        <div>
                                            <p style={{ fontWeight: 600, color: '#1d2327', margin: '0 0 3px', fontSize: '14px' }}>{page}</p>
                                            <p style={{ color: '#646970', fontSize: '12px', margin: 0 }}>Last edited 2 days ago</p>
                                        </div>
                                        <button style={{ background: '#f6f7f7', color: '#2c3338', border: '1px solid #c3c4c7', padding: '5px 12px', cursor: 'pointer', fontSize: '12px' }}>Edit</button>
                                    </div>
                                ))}
                            </div>
                        </div>
                    )}

                    {activeTab === 'users' && (
                        <div>
                            <h1 style={{ color: '#1d2327', marginTop: 0, fontSize: '23px', fontWeight: 400, borderBottom: '1px solid #c3c4c7', paddingBottom: '12px', marginBottom: '20px' }}>Users</h1>
                            <div style={{ background: '#fff', border: '1px solid #c3c4c7', overflow: 'hidden' }}>
                                <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                                    <thead>
                                        <tr style={{ background: '#f6f7f7' }}>
                                            {['Username', 'Email', 'Role', 'Registered'].map((h) => (
                                                <th key={h} style={{ padding: '12px 16px', textAlign: 'left', fontSize: '13px', fontWeight: 600, color: '#1d2327', borderBottom: '1px solid #c3c4c7' }}>{h}</th>
                                            ))}
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {[
                                            { name: 'Super Admin', email: 'superadmin@nyra.com', role: 'Super Admin', roleColor: '#b53855', joined: '2026-02-26' },
                                            { name: 'Admin User', email: 'admin@nyra.com', role: 'Admin', roleColor: '#0073aa', joined: '2026-02-26' },
                                            { name: 'Test User', email: 'user@nyra.com', role: 'Subscriber', roleColor: '#CF87B0', joined: '2026-02-26' },
                                        ].map((user, i) => (
                                            <tr key={i} style={{ borderBottom: '1px solid #f0f0f1' }}>
                                                <td style={{ padding: '12px 16px', fontSize: '13px', fontWeight: 600, color: '#0073aa' }}>{user.name}</td>
                                                <td style={{ padding: '12px 16px', fontSize: '13px', color: '#3c434a' }}>{user.email}</td>
                                                <td style={{ padding: '12px 16px' }}>
                                                    <span style={{ background: user.roleColor + '15', color: user.roleColor, padding: '3px 8px', fontSize: '12px', fontWeight: 600 }}>{user.role}</span>
                                                </td>
                                                <td style={{ padding: '12px 16px', fontSize: '13px', color: '#646970' }}>{user.joined}</td>
                                            </tr>
                                        ))}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    )}

                    {activeTab === 'blogs' && (
                        <div>
                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid #c3c4c7', paddingBottom: '12px', marginBottom: '20px' }}>
                                <h1 style={{ color: '#1d2327', margin: 0, fontSize: '23px', fontWeight: 400 }}>Posts</h1>
                                <button style={{ padding: '6px 12px', background: '#0073aa', color: '#fff', border: 'none', cursor: 'pointer', fontWeight: 600, fontSize: '13px' }}>+ Add New Post</button>
                            </div>
                            <div style={{ background: '#fff', border: '1px solid #c3c4c7', overflow: 'hidden' }}>
                                <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                                    <thead>
                                        <tr style={{ background: '#f6f7f7' }}>
                                            {['Title', 'Author', 'Date', 'Status', 'Actions'].map((h) => (
                                                <th key={h} style={{ padding: '12px 16px', textAlign: 'left', fontSize: '13px', fontWeight: 600, color: '#1d2327', borderBottom: '1px solid #c3c4c7' }}>{h}</th>
                                            ))}
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {[
                                            { title: 'How to Build Leadership Skills', author: 'Admin', date: '2026-02-20', status: 'Published' },
                                            { title: 'Communication in the Workplace', author: 'Admin', date: '2026-02-15', status: 'Published' },
                                            { title: 'Team Engagement Strategies', author: 'Admin', date: '2026-02-10', status: 'Draft' },
                                        ].map((blog, i) => (
                                            <tr key={i} style={{ borderBottom: '1px solid #f0f0f1' }}>
                                                <td style={{ padding: '12px 16px', fontSize: '13px', fontWeight: 600, color: '#0073aa' }}>{blog.title}</td>
                                                <td style={{ padding: '12px 16px', fontSize: '13px', color: '#3c434a' }}>{blog.author}</td>
                                                <td style={{ padding: '12px 16px', fontSize: '13px', color: '#646970' }}>{blog.date}</td>
                                                <td style={{ padding: '12px 16px' }}>
                                                    <span style={{ background: blog.status === 'Published' ? '#edfaef' : '#fef9e7', color: blog.status === 'Published' ? '#2a6e35' : '#9a6700', padding: '3px 8px', fontSize: '12px', fontWeight: 600 }}>{blog.status}</span>
                                                </td>
                                                <td style={{ padding: '12px 16px', display: 'flex', gap: '6px' }}>
                                                    <button style={{ background: 'none', color: '#0073aa', border: 'none', padding: '0', cursor: 'pointer', fontSize: '13px', textDecoration: 'underline' }}>Edit</button>
                                                    <span style={{ color: '#c3c4c7' }}>|</span>
                                                    <button style={{ background: 'none', color: '#b32d2e', border: 'none', padding: '0', cursor: 'pointer', fontSize: '13px', textDecoration: 'underline' }}>Trash</button>
                                                </td>
                                            </tr>
                                        ))}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    )}

                    {activeTab === 'reports' && (
                        <div>
                            <h1 style={{ color: '#1d2327', marginTop: 0, fontSize: '23px', fontWeight: 400, borderBottom: '1px solid #c3c4c7', paddingBottom: '12px', marginBottom: '20px' }}>Reports</h1>
                            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
                                {[
                                    { title: 'User Growth', value: '+12%', desc: 'vs last month', color: '#0073aa', icon: '👥' },
                                    { title: 'Page Views', value: '1,248', desc: 'this month', color: '#b53855', icon: '👁️' },
                                    { title: 'Blog Engagement', value: '87%', desc: 'avg read rate', color: '#2c3338', icon: '📰' },
                                    { title: 'Masterclass Revenue', value: '₹9,801', desc: 'this month', color: '#CF87B0', icon: '💰' },
                                ].map((report, i) => (
                                    <div key={i} style={{ background: '#fff', padding: '24px', border: '1px solid #c3c4c7', borderLeft: `4px solid ${report.color}` }}>
                                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                                            <div>
                                                <p style={{ fontSize: '12px', color: '#646970', margin: '0 0 8px', textTransform: 'uppercase' }}>{report.title}</p>
                                                <p style={{ fontSize: '30px', fontWeight: 700, color: report.color, margin: '0 0 4px' }}>{report.value}</p>
                                                <p style={{ fontSize: '12px', color: '#9ca3af', margin: 0 }}>{report.desc}</p>
                                            </div>
                                            <span style={{ fontSize: '30px' }}>{report.icon}</span>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
}