import React, { useEffect, useState } from 'react';
import { Page } from '../types';
import { supabase } from '../supabaseClient';

interface DashboardProps {
    setPage: (page: Page) => void;
    session: any;
}

const Dashboard: React.FC<DashboardProps> = ({ setPage, session }) => {
    const [loading, setLoading] = useState(false);

    const handleLogout = async () => {
        setLoading(true);
        const { error } = await supabase.auth.signOut();
        setLoading(false);
        if (error) {
            alert('Error logging out: ' + error.message);
        } else {
            setPage(Page.HOME);
        }
    };

    return (
        <div className="min-h-screen bg-background-light dark:bg-background-dark pt-32 pb-12 px-6">
            <div className="max-w-7xl mx-auto">
                <div className="bg-white dark:bg-slate-900 p-8 rounded-3xl shadow-xl border border-slate-100 dark:border-slate-800 mb-8 flex flex-col md:flex-row justify-between items-center gap-6">
                    <div>
                        <h1 className="font-display text-3xl text-slate-900 dark:text-white mb-2">Willkommen zurück!</h1>
                        <p className="text-slate-500 dark:text-slate-400">
                            Eingeloggt als: <span className="font-medium text-primary">{session?.user?.email}</span>
                        </p>
                    </div>
                    <button
                        onClick={handleLogout}
                        disabled={loading}
                        className="px-6 py-3 bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 font-bold rounded-xl hover:bg-slate-200 dark:hover:bg-slate-700 transition-all"
                    >
                        {loading ? 'Logging out...' : 'Abmelden'}
                    </button>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    {/* Example User Content */}
                    <div className="p-8 bg-white dark:bg-slate-900 shape-squircle border border-slate-100 dark:border-slate-800 shadow-sm hover:shadow-md transition-shadow">
                        <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary mb-6">
                            <span className="material-symbols-outlined">menu_book</span>
                        </div>
                        <h3 className="font-display text-xl mb-2">Meine Kurse</h3>
                        <p className="text-sm text-slate-500 mb-4">Setze deine Reise fort, wo du aufgehört hast.</p>
                        <button className="text-primary font-bold text-sm hover:underline">Zum Kurs</button>
                    </div>

                    <div className="p-8 bg-white dark:bg-slate-900 shape-squircle border border-slate-100 dark:border-slate-800 shadow-sm hover:shadow-md transition-shadow">
                        <div className="w-12 h-12 bg-secondary/30 rounded-full flex items-center justify-center text-accent2 mb-6">
                            <span className="material-symbols-outlined">favorite</span>
                        </div>
                        <h3 className="font-display text-xl mb-2">Favoriten</h3>
                        <p className="text-sm text-slate-500 mb-4">Deine gespeicherten Artikel und Meditationen.</p>
                        <button className="text-primary font-bold text-sm hover:underline">Ansehen</button>
                    </div>

                    <div className="p-8 bg-white dark:bg-slate-900 shape-squircle border border-slate-100 dark:border-slate-800 shadow-sm hover:shadow-md transition-shadow">
                        <div className="w-12 h-12 bg-slate-100 dark:bg-slate-800 rounded-full flex items-center justify-center text-slate-500 mb-6">
                            <span className="material-symbols-outlined">settings</span>
                        </div>
                        <h3 className="font-display text-xl mb-2">Einstellungen</h3>
                        <p className="text-sm text-slate-500 mb-4">Verwalte dein Profil und Benachrichtigungen.</p>
                        <button className="text-primary font-bold text-sm hover:underline">Bearbeiten</button>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Dashboard;