import React, { useEffect, useRef, useState } from 'react';
import axios from 'axios';
import Icon from './Icon';
import { Avatar } from './ui';
import { NAV } from './Sidebar';

const ALL_ITEMS = NAV.flatMap(g => g.items);

type TopbarProps = { route: string; onMenuClick?: () => void };

const Topbar = ({ route, onMenuClick }: TopbarProps) => {
    const item = ALL_ITEMS.find(i => i.id === route);
    const group = NAV.find(g => g.items.some(i => i.id === route));
    const crumb = group && group.label ? group.label : 'Home';

    const [menuOpen, setMenuOpen] = useState(false);
    const wrapRef = useRef<HTMLDivElement>(null);

    /* ---- Change-password modal state ---- */
    const [cpOpen, setCpOpen] = useState(false);
    const [cpNew, setCpNew] = useState('');
    const [cpNew2, setCpNew2] = useState('');
    const [cpLoading, setCpLoading] = useState(false);
    const [cpError, setCpError] = useState<string | null>(null);
    const [cpSuccess, setCpSuccess] = useState(false);

    useEffect(() => {
        if (!menuOpen) return;
        const onDoc = (e: MouseEvent) => {
            if (wrapRef.current && !wrapRef.current.contains(e.target as Node)) {
                setMenuOpen(false);
            }
        };
        document.addEventListener('mousedown', onDoc);
        return () => document.removeEventListener('mousedown', onDoc);
    }, [menuOpen]);

    /* Close modal on Escape */
    useEffect(() => {
        if (!cpOpen) return;
        const onKey = (e: KeyboardEvent) => {
            if (e.key === 'Escape') closeCp();
        };
        document.addEventListener('keydown', onKey);
        return () => document.removeEventListener('keydown', onKey);
    }, [cpOpen]);

    const openCp = () => {
        setMenuOpen(false);
        setCpNew(''); setCpNew2('');
        setCpError(null); setCpSuccess(false);
        setCpOpen(true);
    };

    const closeCp = () => {
        if (cpLoading) return;
        setCpOpen(false);
    };

    const submitCp = async (e: React.FormEvent) => {
        e.preventDefault();
        setCpError(null);
        setCpSuccess(false);

        if (!cpNew || !cpNew2) {
            setCpError('Fill in all fields.');
            return;
        }
        if (cpNew.length < 6) {
            setCpError('New password must be at least 6 characters.');
            return;
        }
        if (cpNew !== cpNew2) {
            setCpError('New passwords do not match.');
            return;
        }

        setCpLoading(true);
        try {
            await axios.post('/password/change', {
                new_password: cpNew,
                new_password_confirmation: cpNew2,
            });
            setCpSuccess(true);
            setCpNew(''); setCpNew2('');
            setTimeout(() => setCpOpen(false), 1200);
        } catch (err: any) {
            setCpError(err.response?.data?.message || 'Could not change password. Try again.');
        } finally {
            setCpLoading(false);
        }
    };

    const handleLogout = async () => {
        setMenuOpen(false);
        try {
            await axios.post('/logout');
        } finally {
            location.reload();
        }
    };

    return (
        <header className="topbar">
            <button className="topbar__menu" onClick={onMenuClick} aria-label="Toggle navigation">
                <Icon name="menu" size={20} />
            </button>
            <div className="topbar__crumbs">
                <span className="crumb">{crumb}</span>
                <Icon name="chevron" size={13} className="crumb__sep" />
                <span className="crumb crumb--cur">{item ? item.label : ''}</span>
            </div>

            <div className="topbar__tools">
                <div className="topbar__user" ref={wrapRef}>
                    <button
                        className="topbar__avatar-btn"
                        onClick={() => setMenuOpen(o => !o)}
                        aria-label="Account menu">
                        <Avatar name="Admin" size={32} />
                    </button>
                    {menuOpen && (
                        <div className="topbar__pop">
                            <div className="topbar__pop-head">
                                <Avatar name="Admin" size={32} />
                                <div>
                                    <div className="topbar__pop-name">Admin</div>
                                    <div className="topbar__pop-role">Flameowl Studio</div>
                                </div>
                            </div>
                            <button className="topbar__pop-item" onClick={openCp}>
                                <Icon name="settings" size={15} />
                                <span>Change password</span>
                            </button>
                            <button className="topbar__pop-item topbar__pop-item--danger" onClick={handleLogout}>
                                <Icon name="logout" size={15} />
                                <span>Logout</span>
                            </button>
                        </div>
                    )}
                </div>
            </div>

            {cpOpen && (
                <div className="cp-overlay" onClick={closeCp}>
                    <div className="cp-modal" onClick={e => e.stopPropagation()}>
                        <div className="cp-modal__head">
                            <div>
                                <h2 className="cp-modal__title">Change password</h2>
                                <p className="cp-modal__sub">Pick a new password for your account.</p>
                            </div>
                            <button className="cp-modal__close" onClick={closeCp} aria-label="Close">
                                <Icon name="x" size={18} />
                            </button>
                        </div>

                        <form className="cp-form" onSubmit={submitCp}>
                            <div className="cp-field">
                                <label htmlFor="cp-new">New password</label>
                                <input
                                    id="cp-new" type="password" autoComplete="new-password"
                                    value={cpNew} onChange={e => setCpNew(e.target.value)}
                                    autoFocus disabled={cpLoading}
                                />
                            </div>
                            <div className="cp-field">
                                <label htmlFor="cp-new2">Confirm new password</label>
                                <input
                                    id="cp-new2" type="password" autoComplete="new-password"
                                    value={cpNew2} onChange={e => setCpNew2(e.target.value)}
                                    disabled={cpLoading}
                                />
                            </div>

                            {cpError && (
                                <div className="cp-msg cp-msg--error">
                                    <Icon name="x" size={14} stroke={2.4} />
                                    <span>{cpError}</span>
                                </div>
                            )}
                            {cpSuccess && (
                                <div className="cp-msg cp-msg--ok">
                                    <Icon name="check" size={14} stroke={2.4} />
                                    <span>Password changed.</span>
                                </div>
                            )}

                            <div className="cp-modal__foot">
                                <button type="button" className="btn btn--ghost btn--sm"
                                    onClick={closeCp} disabled={cpLoading}>
                                    Cancel
                                </button>
                                <button type="submit" className="btn btn--primary btn--sm" disabled={cpLoading}>
                                    {cpLoading ? 'Saving…' : 'Change password'}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            )}
        </header>
    );
};

export default Topbar;