import { Link, usePage } from '@inertiajs/react';
import { useState } from 'react';
import {
    ClipboardCheck,
    BookOpen,
    Bell,
    HelpCircle,
    ChevronRight,
    Pencil,
} from 'lucide-react';
import StudentLayout from '@/Layouts/StudentLayout';
import { Head } from '@inertiajs/react';

function getCsrfToken() {
    if (typeof document === 'undefined') return '';
    const meta = document.querySelector('meta[name="csrf-token"]');
    return meta?.getAttribute('content') || '';
}

function SettingsItem({ icon: Icon, iconBg, iconColor, label, href, hasToggle, toggleValue, onToggle }) {
    if (hasToggle) {
        return (
            <div className="flex items-center justify-between p-4 bg-white rounded-2xl border border-outline-variant/10">
                <div className="flex items-center gap-4">
                    <div className={`w-10 h-10 rounded-full flex items-center justify-center ${iconBg}`}>
                        <Icon className={`w-5 h-5 ${iconColor}`} />
                    </div>
                    <span className="font-bold text-primary tracking-tight">{label}</span>
                </div>
                <label className="relative inline-flex items-center cursor-pointer">
                    <input
                        type="checkbox"
                        checked={toggleValue}
                        onChange={onToggle}
                        className="sr-only peer"
                    />
                    <div className="w-11 h-6 bg-surface-high rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-secondary" />
                </label>
            </div>
        );
    }

    return (
        <Link
            href={href || '#'}
            className="flex items-center justify-between p-4 bg-white rounded-2xl border border-outline-variant/10 hover:bg-surface-low transition-all active:scale-[0.98]"
        >
            <div className="flex items-center gap-4">
                <div className={`w-10 h-10 rounded-full flex items-center justify-center ${iconBg}`}>
                    <Icon className={`w-5 h-5 ${iconColor}`} />
                </div>
                <span className="font-bold text-primary tracking-tight">{label}</span>
            </div>
            <ChevronRight className="w-5 h-5 text-slate-400" />
        </Link>
    );
}

export default function Profile({ user, status }) {
    const [notificationsEnabled, setNotificationsEnabled] = useState(true);

    return (
        <StudentLayout title="Perfil" activeSidebarKey="settings">
            <Head title="Perfil" />

            <div className="px-4 lg:px-8 pt-4 lg:pt-6 pb-24 lg:pb-8 max-w-md mx-auto">
                <section className="flex flex-col items-center text-center space-y-4 mb-10">
                    <div className="relative">
                        <img
                            src="https://api.dicebear.com/9.x/notionists/svg?seed=carlos&backgroundColor=002753"
                            alt={user.name}
                            className="w-24 h-24 rounded-full border-4 border-surface-low object-cover bg-surface-low"
                        />
                        <button className="absolute bottom-0 right-0 bg-tertiary-300 p-2 rounded-full shadow-lg">
                            <Pencil className="w-4 h-4 text-tertiary-700" />
                        </button>
                    </div>
                    <div>
                        <h1 className="text-2xl font-extrabold text-primary tracking-tight">{user.name}</h1>
                        <p className="text-slate-500 font-medium text-sm">
                            Aluno Nível {user.level} • Categoria {user.category}
                        </p>
                    </div>
                </section>

                <div className="grid grid-cols-2 gap-4 mb-10">
                    <div className="bg-white p-5 rounded-2xl shadow-sm flex flex-col items-center justify-center border border-outline-variant/10">
                        <span className="text-3xl font-black text-primary">{user.xp}</span>
                        <span className="text-[10px] uppercase tracking-widest text-slate-500 font-bold">XP Total</span>
                    </div>
                    <div className="bg-white p-5 rounded-2xl shadow-sm flex flex-col items-center justify-center border border-outline-variant/10">
                        <span className="text-3xl font-black text-secondary">{user.study_streak_days}</span>
                        <span className="text-[10px] uppercase tracking-widest text-slate-500 font-bold">Dias Seguidos</span>
                    </div>
                </div>

                <nav className="space-y-6">
                    <h2 className="text-xs uppercase tracking-widest text-slate-500 font-bold px-1">Configurações</h2>
                    <div className="space-y-3">
                        <SettingsItem
                            icon={ClipboardCheck}
                            iconBg="bg-secondary-50"
                            iconColor="text-secondary"
                            label="Minha Prova"
                            href={route('student.profile.edit')}
                        />
                        <SettingsItem
                            icon={BookOpen}
                            iconBg="bg-tertiary-50"
                            iconColor="text-tertiary-600"
                            label="Estudos"
                            href="#"
                        />
                        <SettingsItem
                            icon={Bell}
                            iconBg="bg-amber-50"
                            iconColor="text-amber-500"
                            label="Alertas"
                            hasToggle
                            toggleValue={notificationsEnabled}
                            onToggle={() => setNotificationsEnabled(!notificationsEnabled)}
                        />
                        <SettingsItem
                            icon={HelpCircle}
                            iconBg="bg-surface-low"
                            iconColor="text-slate-500"
                            label="Ajuda"
                            href="#"
                        />
                    </div>
                </nav>

                <section className="pt-6 space-y-4">
                    <form method="post" action={route('logout')}>
                        <input type="hidden" name="_token" value={getCsrfToken()} />
                        <button
                            type="submit"
                            className="w-full py-4 text-slate-500 font-bold text-sm tracking-widest uppercase hover:text-error transition-colors"
                        >
                            Sair da Conta
                        </button>
                    </form>
                </section>
            </div>
        </StudentLayout>
    );
}
