import { ReactNode } from "react";
import Image from "next/image";

import { Command } from "lucide-react";

import { RedirectIfAuthenticated } from "@/components/auth/redirect-if-authenticated";

export default function Layout({ children }: Readonly<{ children: ReactNode }>) {
  return (
    <RedirectIfAuthenticated>
      <main>
        <div className="grid h-dvh justify-center p-2 lg:grid-cols-2">
          <div className="relative order-2 hidden h-full overflow-hidden rounded-3xl lg:flex">
            {/* Image de fond */}
            <Image
              src="/dashboard-analytics.jpg"
              alt="COOP-CA AMIFOND Dashboard"
              fill
              className="object-cover"
              priority
            />

            {/* Overlay avec gradient vert foncé */}
            <div className="absolute inset-0 z-10 bg-gradient-to-br from-green-950/98 via-emerald-950/95 to-teal-950/98" />

            {/* En-tête */}
            <div className="absolute top-10 z-20 space-y-3 px-10 text-white">
              <Command className="size-12 text-green-600" />
              <div>
                <h1 className="text-3xl font-bold">COOP-CA AMIFOND</h1>
                <p className="mt-1 text-sm text-green-200">Système de Gestion Coopératif</p>
              </div>
            </div>

            {/* Contenu central avec animation */}
            <div className="absolute inset-0 z-20 flex items-center justify-center px-10">
              <div className="max-w-lg space-y-6 text-center">
                <div className="space-y-3">
                  <h2 className="text-2xl font-semibold text-white">Plateforme Moderne d&apos;Épargne & Crédit</h2>
                  <p className="text-base leading-relaxed text-green-100">
                    Le système de gestion COOP-CA AMIFOND est conçu pour gérer l&apos;ensemble des opérations d&apos;une
                    coopérative d&apos;épargne et de crédit moderne.
                  </p>
                </div>

                {/* Modules défilants */}
                <div className="rounded-lg border border-white/20 bg-white/10 p-4 backdrop-blur-sm">
                  <div className="h-16 overflow-hidden">
                    <div className="animate-scroll space-y-2">
                      <div className="flex items-center justify-between py-2 text-sm text-white">
                        <span>📊 Gestion des Comptes</span>
                        <span className="text-green-300">Actif</span>
                      </div>
                      <div className="flex items-center justify-between py-2 text-sm text-white">
                        <span>💰 Module Épargne</span>
                        <span className="text-green-300">Actif</span>
                      </div>
                      <div className="flex items-center justify-between py-2 text-sm text-white">
                        <span>🏦 Gestion Crédit</span>
                        <span className="text-green-300">Actif</span>
                      </div>
                      <div className="flex items-center justify-between py-2 text-sm text-white">
                        <span>📈 Analytics & KPI</span>
                        <span className="text-green-300">Actif</span>
                      </div>
                      <div className="flex items-center justify-between py-2 text-sm text-white">
                        <span>👥 Gestion Membres</span>
                        <span className="text-green-300">Actif</span>
                      </div>
                      <div className="flex items-center justify-between py-2 text-sm text-white">
                        <span>📋 Rapports Financiers</span>
                        <span className="text-green-300">Actif</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* Pied de page */}
            <div className="absolute right-0 bottom-8 left-0 z-20 px-10">
              <div className="rounded-lg border border-white/20 bg-white/5 p-4 backdrop-blur-sm">
                <div className="flex items-center justify-between text-sm text-white">
                  <div className="flex items-center space-x-4">
                    <span className="flex items-center">
                      <div className="mr-2 h-2 w-2 animate-pulse rounded-full bg-green-400"></div>
                      Système Opérationnel
                    </span>
                    <span>|</span>
                    <span>Modules Intégrés: 6/6</span>
                  </div>
                  <div className="text-green-200">v2.0.1</div>
                </div>
              </div>
            </div>
          </div>
          <div className="relative order-1 flex h-full">{children}</div>
        </div>
      </main>
    </RedirectIfAuthenticated>
  );
}