'use client';

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

export default function SuperAdminDashboard() {
    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('#sa-dropdown-wrapper')) {
                setShowDropdown(false);
            }
        };
        document.addEventListener('click', handleClick);
        return () => document.removeEventListener('click', handleClick);
    }, []);

    if (status === 'loading') return (
        <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <p style={{ fontFamily: 'Helvetica', fontSize: '18px', color: '#555' }}>Loading...</p>
        </div>
    );

    const menuItems = [
        { id: 'overview', label: 'Dashboard', icon: '⊞' },
        { id: 'users', label: 'Manage Users', icon: '👥' },
        { id: 'casestudies', label: 'Case Studies', icon: '📁' },
        { id: 'masterclass', label: 'Masterclasses', icon: '🎓' },
        { id: 'settings', label: 'Site Settings', icon: '⚙️' },
    ];

    return (
        <div style={{ minHeight: '100vh', background: '#f1f1f1', fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', display: 'flex', flexDirection: 'column' }}>

            {/* ── WordPress-style Top Bar ── */}
            <div style={{ background: '#1d2327', height: '32px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 16px', position: 'sticky', top: 0, zIndex: 200, flexShrink: 0 }}>
                {/* Left */}
                <div style={{ display: 'flex', alignItems: 'center' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '6px', padding: '0 12px', height: '32px', cursor: 'pointer' }}
                        onMouseEnter={e => (e.currentTarget.style.background = '#2c3338')}
                        onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}
                    >
                        <img src="/Nyra-logo.png" alt="NYRA" style={{ height: '18px', objectFit: 'contain', filter: 'brightness(0) invert(1)', opacity: 0.7 }} />
                    </div>
                    <div style={{ color: '#a7aaad', fontSize: '13px', padding: '0 12px', height: '32px', display: 'flex', alignItems: 'center', cursor: 'pointer', borderLeft: '1px solid #3c434a' }}
                        onMouseEnter={e => { (e.currentTarget.style.background = '#2c3338'); (e.currentTarget.style.color = '#fff'); }}
                        onMouseLeave={e => { (e.currentTarget.style.background = 'transparent'); (e.currentTarget.style.color = '#a7aaad'); }}
                    >
                        Nyra Leadership
                    </div>
                    <div style={{ color: '#a7aaad', fontSize: '13px', padding: '0 12px', height: '32px', display: 'flex', alignItems: 'center', cursor: 'pointer' }}
                        onMouseEnter={e => { (e.currentTarget.style.background = '#2c3338'); (e.currentTarget.style.color = '#fff'); }}
                        onMouseLeave={e => { (e.currentTarget.style.background = 'transparent'); (e.currentTarget.style.color = '#a7aaad'); }}
                        onClick={() => window.open('/', '_blank')}
                    >
                        Visit Site
                    </div>
                </div>

                {/* Right — Howdy dropdown */}
                <div id="sa-dropdown-wrapper" style={{ position: 'relative' }}>
                    <div
                        style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '0 12px', height: '32px', cursor: 'pointer', color: '#a7aaad', fontSize: '13px' }}
                        onClick={() => setShowDropdown(!showDropdown)}
                        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>

                    {showDropdown && (
                        <div
                            onClick={e => e.stopPropagation()}
                            style={{ position: 'absolute', right: 0, top: '32px', background: '#1d2327', border: '1px solid #3c434a', minWidth: '200px', zIndex: 300, boxShadow: '0 3px 5px rgba(0,0,0,0.3)' }}
                        >
                            {/* Profile header */}
                            <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 }}>Super 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
                                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'); }}
                                onClick={() => signOut({ callbackUrl: '/my-account' })}
                            >
                                Log Out
                            </div>
                        </div>
                    )}
                </div>
            </div>

            <div style={{ display: 'flex', flex: 1 }}>

                {/* ── Sidebar ── */}
                <div style={{ width: '160px', 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 }}>Super Admin</p>
                        <p style={{ color: '#72aee6', fontSize: '11px', margin: '2px 0 0' }}>Full Access</p>
                    </div>
                    {menuItems.map((item) => (
                        <div
                            key={item.id}
                            onClick={() => setActiveTab(item.id)}
                            style={{
                                padding: '10px 16px',
                                cursor: 'pointer',
                                display: 'flex',
                                alignItems: 'center',
                                gap: '8px',
                                fontSize: '13px',
                                color: activeTab === item.id ? '#fff' : '#a7aaad',
                                background: activeTab === item.id ? '#0073aa' : 'transparent',
                                borderLeft: activeTab === item.id ? '3px solid #72aee6' : '3px solid transparent',
                                transition: 'all 0.15s',
                            }}
                            onMouseEnter={e => { if (activeTab !== item.id) { (e.currentTarget.style.background = '#3c434a'); (e.currentTarget.style.color = '#fff'); } }}
                            onMouseLeave={e => { if (activeTab !== item.id) { (e.currentTarget.style.background = 'transparent'); (e.currentTarget.style.color = '#a7aaad'); } }}
                        >
                            <span style={{ fontSize: '14px', flexShrink: 0 }}>{item.icon}</span>
                            <span>{item.label}</span>
                        </div>
                    ))}
                </div>

                {/* ── Content ── */}
                <div style={{ flex: 1, padding: '20px 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: 'Case Studies', value: '12', color: '#b53855', icon: '📁' },
                                    { label: 'Masterclasses', value: '5', color: '#2c3338', icon: '🎓' },
                                    { label: 'Active Admins', value: '1', 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', letterSpacing: '0.05em', borderBottom: '1px solid #c3c4c7', paddingBottom: '10px' }}>Quick Actions</h2>
                                <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap', paddingTop: '10px' }}>
                                    {['Add New User', 'Add Case Study', 'Add Masterclass', 'View Reports'].map((action) => (
                                        <button key={action} style={{ padding: '6px 14px', background: '#0073aa', color: '#fff', border: 'none', cursor: 'pointer', fontSize: '13px', fontWeight: 600 }}>
                                            {action}
                                        </button>
                                    ))}
                                </div>
                            </div>
                        </div>
                    )}

                    {activeTab === 'users' && (
                        <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 Users</h1>
                                <button style={{ padding: '6px 12px', background: '#0073aa', color: '#fff', border: 'none', cursor: 'pointer', fontWeight: 600, fontSize: '13px' }}>+ Add New User</button>
                            </div>
                            <div style={{ background: '#fff', border: '1px solid #c3c4c7', overflow: 'hidden' }}>
                                <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                                    <thead>
                                        <tr style={{ background: '#f6f7f7' }}>
                                            {['ID', 'Name', 'Email', 'Role', 'Created', '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>
                                        {[
                                            { id: 1, name: 'Super Admin', email: 'superadmin@nyra.com', role: 'Super Admin', roleColor: '#b53855', created: '2026-02-26' },
                                            { id: 2, name: 'Admin User', email: 'admin@nyra.com', role: 'Admin', roleColor: '#0073aa', created: '2026-02-26' },
                                            { id: 3, name: 'Test User', email: 'user@nyra.com', role: 'Subscriber', roleColor: '#CF87B0', created: '2026-02-26' },
                                        ].map((user) => (
                                            <tr key={user.id} style={{ borderBottom: '1px solid #f0f0f1' }}
                                                onMouseEnter={e => (e.currentTarget.style.background = '#f6f7f7')}
                                                onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}
                                            >
                                                <td style={{ padding: '12px 16px', fontSize: '13px', color: '#646970' }}>{user.id}</td>
                                                <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.created}</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' }}>Delete</button>
                                                </td>
                                            </tr>
                                        ))}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    )}

                    {activeTab === 'casestudies' && (
                        <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 }}>Case Studies</h1>
                                <button style={{ padding: '6px 12px', background: '#0073aa', color: '#fff', border: 'none', cursor: 'pointer', fontWeight: 600, fontSize: '13px' }}>+ Add Case Study</button>
                            </div>
                            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px' }}>
                                {['Leadership Development', 'Team Engagement', 'Communication Coaching', 'Structured Leadership', 'Executive Coaching', 'Culture Transformation'].map((title, i) => (
                                    <div key={i} style={{ background: '#fff', border: '1px solid #c3c4c7', overflow: 'hidden' }}>
                                        <div style={{ height: '4px', background: '#0073aa' }} />
                                        <div style={{ padding: '16px' }}>
                                            <h4 style={{ color: '#1d2327', margin: '0 0 6px', fontSize: '14px', fontWeight: 600 }}>{title}</h4>
                                            <p style={{ color: '#646970', fontSize: '13px', margin: '0 0 14px' }}>Case study description goes here.</p>
                                            <div style={{ display: 'flex', gap: '6px' }}>
                                                <button style={{ background: 'none', color: '#0073aa', border: 'none', cursor: 'pointer', fontSize: '13px', textDecoration: 'underline', padding: 0 }}>Edit</button>
                                                <span style={{ color: '#c3c4c7' }}>|</span>
                                                <button style={{ background: 'none', color: '#b32d2e', border: 'none', cursor: 'pointer', fontSize: '13px', textDecoration: 'underline', padding: 0 }}>Delete</button>
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    )}

                    {activeTab === 'masterclass' && (
                        <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 }}>Masterclasses</h1>
                                <button style={{ padding: '6px 12px', background: '#0073aa', color: '#fff', border: 'none', cursor: 'pointer', fontWeight: 600, fontSize: '13px' }}>+ Add Masterclass</button>
                            </div>
                            <div style={{ background: '#fff', border: '1px solid #c3c4c7', overflow: 'hidden' }}>
                                <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                                    <thead>
                                        <tr style={{ background: '#f6f7f7' }}>
                                            {['Title', 'Date', 'Price', 'Registrations', '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: 'Communicate to Differentiate', date: '8 Sep 2024', price: '₹99', reg: 24, status: 'Active' },
                                            { title: 'Leadership Essentials', date: '15 Oct 2024', price: '₹199', reg: 18, status: 'Active' },
                                            { title: 'Team Dynamics', date: '20 Nov 2024', price: '₹149', reg: 10, status: 'Draft' },
                                        ].map((mc, i) => (
                                            <tr key={i} style={{ borderBottom: '1px solid #f0f0f1' }}
                                                onMouseEnter={e => (e.currentTarget.style.background = '#f6f7f7')}
                                                onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}
                                            >
                                                <td style={{ padding: '12px 16px', fontSize: '13px', fontWeight: 600, color: '#0073aa' }}>{mc.title}</td>
                                                <td style={{ padding: '12px 16px', fontSize: '13px', color: '#3c434a' }}>{mc.date}</td>
                                                <td style={{ padding: '12px 16px', fontSize: '13px', color: '#3c434a' }}>{mc.price}</td>
                                                <td style={{ padding: '12px 16px', fontSize: '13px', color: '#3c434a' }}>{mc.reg}</td>
                                                <td style={{ padding: '12px 16px' }}>
                                                    <span style={{ background: mc.status === 'Active' ? '#edfaef' : '#fef9e7', color: mc.status === 'Active' ? '#2a6e35' : '#9a6700', padding: '3px 8px', fontSize: '12px', fontWeight: 600 }}>{mc.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' }}>Delete</button>
                                                </td>
                                            </tr>
                                        ))}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    )}

                    {activeTab === 'settings' && (
                        <div>
                            <h1 style={{ color: '#1d2327', marginTop: 0, fontSize: '23px', fontWeight: 400, borderBottom: '1px solid #c3c4c7', paddingBottom: '12px', marginBottom: '20px' }}>Site Settings</h1>
                            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
                                {[
                                    { title: 'General Settings', desc: 'Site name, logo, contact info', icon: '🌐' },
                                    { title: 'Email Settings', desc: 'SMTP configuration, email templates', icon: '📧' },
                                    { title: 'Payment Settings', desc: 'Razorpay keys, currency settings', icon: '💳' },
                                    { title: 'Security Settings', desc: 'Password policy, session timeout', icon: '🔒' },
                                ].map((s, i) => (
                                    <div key={i} style={{ background: '#fff', padding: '20px', border: '1px solid #c3c4c7', cursor: 'pointer' }}
                                        onMouseEnter={e => (e.currentTarget.style.background = '#f6f7f7')}
                                        onMouseLeave={e => (e.currentTarget.style.background = '#fff')}
                                    >
                                        <div style={{ fontSize: '26px', marginBottom: '10px' }}>{s.icon}</div>
                                        <h3 style={{ color: '#1d2327', margin: '0 0 6px', fontSize: '15px', fontWeight: 600 }}>{s.title}</h3>
                                        <p style={{ color: '#646970', fontSize: '13px', margin: '0 0 14px' }}>{s.desc}</p>
                                        <button style={{ padding: '6px 14px', background: '#0073aa', color: '#fff', border: 'none', cursor: 'pointer', fontSize: '13px', fontWeight: 600 }}>
                                            Configure
                                        </button>
                                    </div>
                                ))}
                            </div>
                        </div>
                    )}

                </div>
            </div>
        </div>
    );
}