import React, { useContext } from 'react';
import { AuthContext } from '../../contexts/AuthContext';
import { LanguageContext } from '../../contexts/LanguageContext';

const GoCLayout = ({ children }) => {
    const { user, logout } = useContext(AuthContext);
    const { t, toggleLanguage, language } = useContext(LanguageContext);

    return (
        <div className="flex flex-col min-h-screen font-sans text-gray-800">
            {/* Top Bar (Language/Auth) */}
            <div className="bg-white border-b border-gray-200">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="flex justify-end py-1 space-x-4 text-sm text-goc-link underline">
                        {/* Language Toggle */}
                        <button onClick={toggleLanguage} className="hover:text-goc-link-hover" lang={language === 'en' ? 'fr' : 'en'}>
                            {t('lang.switch')}
                        </button>

                        {user ? (
                            <button onClick={logout} className="hover:text-goc-link-hover">{t('nav.sign_out')}</button>
                        ) : (
                            <a href="/login" className="hover:text-goc-link-hover">{t('nav.sign_in')}</a>
                        )}
                    </div>
                </div>
            </div>

            {/* Header (Wordmark) */}
            <header className="bg-white py-6 border-b-4 border-goc-blue">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center">
                    <div className="flex items-center">
                        {/* Wordmark (Using text for now, should be SVG) */}
                        <div className="flex items-center space-x-2">
                            <img src="https://www.canada.ca/etc/designs/canada/wet-boew/assets/sig-blk-en.svg" alt="Government of Canada" className="h-8" />
                        </div>
                    </div>
                </div>
            </header>

            {/* Breadcrumbs (Placeholder) */}
            <div className="bg-white border-b border-gray-200 py-3">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-sm text-gray-500">
                    Canada.ca &gt; Time Tracker &gt; <span className="text-gray-900">Dashboard</span>
                </div>
            </div>

            {/* Main Content */}
            <main className="flex-grow bg-white">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
                    {/* Title Area */}
                    <div className="mb-8 border-b border-goc-red pb-2">
                        <h1 className="text-3xl font-bold font-sans">{t('app.title')}</h1>
                    </div>
                    {children}
                </div>
            </main>

            {/* Footer */}
            <footer className="bg-goc-blue text-white mt-auto">
                {/* Main Footer Links */}
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                        <div>
                            <h3 className="font-bold mb-4">{t('footer.about')}</h3>
                            <ul className="space-y-2 text-sm text-white opacity-90">
                                <li><a href="#" className="hover:underline">{t('footer.terms')}</a></li>
                                <li><a href="#" className="hover:underline">{t('footer.privacy')}</a></li>
                            </ul>
                        </div>
                        <div>
                            <h3 className="font-bold mb-4">{t('footer.contact')}</h3>
                            <ul className="space-y-2 text-sm text-white opacity-90">
                                <li><a href="#" className="hover:underline">{t('footer.dept')}</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                {/* Canada Wordmark Footer */}
                <div className="bg-goc-blue border-t border-gray-600">
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-end">
                        <img src="https://www.canada.ca/etc/designs/canada/wet-boew/assets/wmms-blk.svg" alt="Symbol of the Government of Canada" className="h-8 filter invert grayscale brightness-200" />
                    </div>
                </div>
            </footer>
        </div>
    );
};

export default GoCLayout;
