import {
    Monitor,
    ShieldCheck,
    Wifi,
    Wrench,
} from "lucide-react";

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

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

export function ConsolePage({ theme }: ConsolePageProps) {
    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"
                        }
                    >
                        Consola remota
                    </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]"
                        }
                    >
                        Consola VNC
                    </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"
                        }
                    >
                        Aceda remotamente ao controlador da instalação e acompanhe
                        o estado operacional em tempo real.
                    </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]`
                    }
                >
                    Em desenvolvimento
                </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">
                        <StatusCard
                            theme={theme}
                            icon={<Wifi className="h-5 w-5" />}
                            title="Ligação"
                            value="Desconectado"
                            color="blue"
                        />

                        <StatusCard
                            theme={theme}
                            icon={<ShieldCheck className="h-5 w-5" />}
                            title="Estado"
                            value="Seguro"
                            color="green"
                        />

                        <StatusCard
                            theme={theme}
                            icon={<Wrench className="h-5 w-5" />}
                            title="Controlador"
                            value="Aguardando sessão"
                            color="purple"
                        />
                    </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`
                            }
                        >
                            <Monitor className="h-5 w-5" />
                            Iniciar Sessão VNC
                        </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"
                            }
                        >
                            O módulo VNC será integrado futuramente para acesso remoto
                            completo à instalação.
                        </p>
                    </div>
                </aside>

                <section
                    className={
                        isDark
                            ? `${RADIUS} relative overflow-hidden border border-[#263247] bg-[#0B1220]`
                            : `${RADIUS} relative overflow-hidden border border-[#D7DEE8] bg-white`
                    }
                >
                    <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 flex h-full flex-col items-center justify-center px-10">
                        <div
                            className={
                                isDark
                                    ? "grid h-24 w-24 place-items-center rounded-2xl border border-[#2A3950] bg-[#111A2B]"
                                    : "grid h-24 w-24 place-items-center rounded-2xl border border-[#CBD5E1] bg-[#F8FAFC]"
                            }
                        >
                            <Monitor
                                className={
                                    isDark
                                        ? "h-12 w-12 text-[#4FD1C5]"
                                        : "h-12 w-12 text-[#0F766E]"
                                }
                            />
                        </div>

                        <h2
                            className={
                                isDark
                                    ? "mt-8 text-2xl font-black tracking-[-0.03em] text-white"
                                    : "mt-8 text-2xl font-black tracking-[-0.03em] text-[#0F172A]"
                            }
                        >
                            Consola indisponível
                        </h2>

                        <p
                            className={
                                isDark
                                    ? "mt-4 max-w-[560px] text-center text-sm leading-7 text-[#A8B3C7]"
                                    : "mt-4 max-w-[560px] text-center text-sm leading-7 text-slate-600"
                            }
                        >
                            Esta área irá permitir visualização e controlo remoto do
                            sistema através de ligação VNC segura diretamente pela
                            plataforma.
                        </p>
                    </div>
                </section>
            </div>
        </div>
    );
}

function StatusCard({
    theme,
    icon,
    title,
    value,
    color,
}: {
    theme: "dark" | "light";
    icon: React.ReactNode;
    title: string;
    value: string;
    color: "green" | "blue" | "purple";
}) {
    const isDark = theme === "dark";

    const colors = {
        green: isDark
            ? "bg-[#13202F] text-[#4FD1C5]"
            : "bg-[#ECFDF5] text-[#0F766E]",

        blue: isDark
            ? "bg-[#13202F] text-[#7DD3FC]"
            : "bg-[#EFF6FF] text-[#0369A1]",

        purple: isDark
            ? "bg-[#171B2B] text-[#A5B4FC]"
            : "bg-[#EEF2FF] text-[#4F46E5]",
    };

    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={`grid h-12 w-12 place-items-center ${RADIUS} ${colors[color]}`}
                >
                    {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>
    );
}

export default ConsolePage;