litoral-central-frontend/src/features/settings/pages/SettingsPage.tsx

import {
    Bell,
    Lock,
    Palette,
    Save,
    User,
} from "lucide-react";

type SettingsPageProps = {
    theme: "dark" | "light";
};

const RADIUS = "rounded-[6px]";

export function SettingsPage({ theme }: SettingsPageProps) {
    const isDark = theme === "dark";

    return (
        <div
            className={
                isDark
                    ? "flex h-full flex-col bg-[#07101B] text-white"
                    : "flex h-full flex-col bg-[#F3F6FA] text-[#0F172A]"
            }
        >
            <div className="flex items-center justify-between px-10 pb-6 pt-8">
                <div>
                    <p
                        className={
                            isDark
                                ? "text-xs font-black uppercase tracking-[0.24em] text-[#7F8CA3]"
                                : "text-xs font-black uppercase tracking-[0.24em] text-slate-500"
                        }
                    >
                        Configuração
                    </p>

                    <h1
                        className={
                            isDark
                                ? "mt-3 text-[34px] font-black tracking-[-0.04em] text-white"
                                : "mt-3 text-[34px] font-black tracking-[-0.04em] text-[#0F172A]"
                        }
                    >
                        Definições
                    </h1>

                    <p
                        className={
                            isDark
                                ? "mt-3 max-w-[680px] text-sm leading-7 text-[#A8B3C7]"
                                : "mt-3 max-w-[680px] text-sm leading-7 text-slate-600"
                        }
                    >
                        Configure preferências da plataforma, segurança, notificações
                        e parâmetros gerais do sistema.
                    </p>
                </div>

                <div
                    className={
                        isDark
                            ? `${RADIUS} border border-[#263247] bg-[#0E1726] px-5 py-3 text-sm font-bold text-[#4FD1C5]`
                            : `${RADIUS} border border-[#D7DEE8] bg-white px-5 py-3 text-sm font-bold text-[#0F766E]`
                    }
                >
                    Temporário
                </div>
            </div>

            <div className="grid flex-1 grid-cols-[380px_minmax(0,1fr)] gap-6 px-10 pb-10">
                <aside
                    className={
                        isDark
                            ? `${RADIUS} border border-[#263247] bg-[#0E1726] p-6`
                            : `${RADIUS} border border-[#D7DEE8] bg-white p-6`
                    }
                >
                    <div className="space-y-5">
                        <SettingsCard theme={theme} icon={<User />} title="Perfil" value="Administrador" />
                        <SettingsCard theme={theme} icon={<Lock />} title="Segurança" value="Ativa" />
                        <SettingsCard theme={theme} icon={<Bell />} title="Notificações" value="Por configurar" />
                    </div>

                    <div
                        className={
                            isDark
                                ? "mt-8 border-t border-[#263247] pt-6"
                                : "mt-8 border-t border-[#D7DEE8] pt-6"
                        }
                    >
                        <button
                            type="button"
                            disabled
                            className={
                                isDark
                                    ? `flex h-[54px] w-full items-center justify-center gap-3 ${RADIUS} border border-[#2A3950] bg-[#111A2B] text-sm font-extrabold text-[#7F8CA3]`
                                    : `flex h-[54px] w-full items-center justify-center gap-3 ${RADIUS} border border-[#CBD5E1] bg-[#F8FAFC] text-sm font-extrabold text-slate-500`
                            }
                        >
                            <Save className="h-5 w-5" />
                            Guardar Alterações
                        </button>

                        <p
                            className={
                                isDark
                                    ? "mt-4 text-center text-xs leading-6 text-[#7F8CA3]"
                                    : "mt-4 text-center text-xs leading-6 text-slate-500"
                            }
                        >
                            As definições serão integradas futuramente com persistência
                            e validação completa.
                        </p>
                    </div>
                </aside>

                <section
                    className={
                        isDark
                            ? `${RADIUS} relative overflow-hidden border border-[#263247] bg-[#0B1220] p-8`
                            : `${RADIUS} relative overflow-hidden border border-[#D7DEE8] bg-white p-8`
                    }
                >
                    <div
                        className={
                            isDark
                                ? "absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(79,209,197,0.10),transparent_60%)]"
                                : "absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(15,118,110,0.08),transparent_60%)]"
                        }
                    />

                    <div className="relative max-w-[760px] space-y-6">
                        <SettingsSection
                            theme={theme}
                            icon={<Palette />}
                            title="Aparência"
                            description="Preferências visuais da plataforma."
                        />

                        <SettingsSection
                            theme={theme}
                            icon={<Bell />}
                            title="Alertas"
                            description="Configuração temporária para notificações operacionais."
                        />

                        <SettingsSection
                            theme={theme}
                            icon={<Lock />}
                            title="Acesso"
                            description="Gestão futura de permissões e autenticação."
                        />
                    </div>
                </section>
            </div>
        </div>
    );
}

function SettingsCard({
    theme,
    icon,
    title,
    value,
}: {
    theme: "dark" | "light";
    icon: React.ReactNode;
    title: string;
    value: string;
}) {
    const isDark = theme === "dark";

    return (
        <div
            className={
                isDark
                    ? `${RADIUS} border border-[#263247] bg-[#111A2B] p-4`
                    : `${RADIUS} border border-[#D7DEE8] bg-[#F8FAFC] p-4`
            }
        >
            <div className="flex items-center gap-4">
                <div
                    className={
                        isDark
                            ? `grid h-12 w-12 place-items-center ${RADIUS} bg-[#13202F] text-[#4FD1C5]`
                            : `grid h-12 w-12 place-items-center ${RADIUS} bg-[#ECFDF5] text-[#0F766E]`
                    }
                >
                    {icon}
                </div>

                <div>
                    <p className={isDark ? "text-xs font-bold uppercase tracking-[0.18em] text-[#7F8CA3]" : "text-xs font-bold uppercase tracking-[0.18em] text-slate-500"}>
                        {title}
                    </p>
                    <h3 className={isDark ? "mt-1 text-sm font-black text-white" : "mt-1 text-sm font-black text-[#0F172A]"}>
                        {value}
                    </h3>
                </div>
            </div>
        </div>
    );
}

function SettingsSection({
    theme,
    icon,
    title,
    description,
}: {
    theme: "dark" | "light";
    icon: React.ReactNode;
    title: string;
    description: string;
}) {
    const isDark = theme === "dark";

    return (
        <div
            className={
                isDark
                    ? `${RADIUS} border border-[#263247] bg-[#111A2B] p-5`
                    : `${RADIUS} border border-[#D7DEE8] bg-[#F8FAFC] p-5`
            }
        >
            <div className="flex items-center gap-4">
                <div className={isDark ? "text-[#4FD1C5]" : "text-[#0F766E]"}>
                    {icon}
                </div>

                <div>
                    <h2 className={isDark ? "text-base font-black text-white" : "text-base font-black text-[#0F172A]"}>
                        {title}
                    </h2>
                    <p className={isDark ? "mt-1 text-sm text-[#A8B3C7]" : "mt-1 text-sm text-slate-600"}>
                        {description}
                    </p>
                </div>
            </div>
        </div>
    );
}

export default SettingsPage;