import Link from "next/link";

import { Globe } from "lucide-react";

import { APP_CONFIG } from "@/config/app-config";

import { LoginForm } from "../_components/login-form";
import { GoogleButton, GitHubButton, MetaButton } from "../_components/social-buttons";

export default function LoginV2() {
  return (
    <>
      <div className="mx-auto flex w-full flex-col justify-center space-y-8 sm:w-[400px] md:w-[450px] lg:w-[500px]">

        <div className="space-y-3 text-center">
          <div className="mb-2">
            <div className="mb-4 inline-flex h-16 w-16 items-center justify-center rounded-full bg-green-100">
              <svg className="h-8 w-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
                />
              </svg>
            </div>
          </div>
          {/* <h1 className="text-3xl font-bold text-foreground">Connexion à votre compte</h1> */}
          <p className="text-muted-foreground text-base leading-relaxed">
            Accédez à votre interface d'administration sécurisée
          </p>
        </div>

        <div className="space-y-4">
          <div className="after:border-border relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t">
            <span className="bg-background text-muted-foreground relative z-10 px-2">Or continue with</span>
          </div>
          <LoginForm />

          <div className="after:border-border relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t">
            <span className="bg-background text-muted-foreground relative z-10 px-3 font-medium">
              Ou continuer avec
            </span>
          </div>

          <div className="grid grid-cols-3 gap-3">
            <GoogleButton className="h-11" />
            <GitHubButton className="h-11" />
            <MetaButton className="h-11" />
          </div>
        </div>

        {/* Navigation text moved here for better positioning */}
        <div className="text-center">
          <div className="text-muted-foreground text-sm">
            Vous n&apos;avez pas de compte?{" "}
            <Link className="text-foreground hover:underline" href="register">
              S&apos;inscrire
            </Link>
          </div>
        </div>

        {/* Section informative */}
        <div className="mt-8 rounded-lg border border-green-200 bg-green-50 p-4">
          <div className="space-y-2 text-center">
            <div className="flex items-center justify-center space-x-1 text-sm font-medium text-green-700">
              <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                <path
                  fillRule="evenodd"
                  d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                  clipRule="evenodd"
                />
              </svg>
              <span>Accès sécurisé</span>
            </div>
            <p className="text-xs leading-relaxed text-green-600">
              Vos données financières sont protégées par un chiffrement de niveau bancaire
            </p>
          </div>
        </div>

        <div className="mt-4">
          <p className="text-xs leading-relaxed text-green-600">
            En vous connectant, vous acceptez nos{" "}
            <Link
              className="font-medium text-green-600 transition-colors hover:text-green-700 hover:underline"
              href="terms"
            >
              conditions d'utilisation
            </Link>{" "}
            et notre{" "}
            <Link
              className="font-medium text-green-600 transition-colors hover:text-green-700 hover:underline"
              href="privacy"
            >
              politique de confidentialité
            </Link>
          </p>
        </div>
      </div>

      <div className="absolute bottom-5 flex w-full justify-between px-10">
        <div className="text-sm">{APP_CONFIG.copyright}</div>
        <div className="flex items-center gap-1 text-sm">
          <Globe className="text-muted-foreground size-4" />
          FR <span className="text-muted-foreground">|</span> EN
        </div>
      </div>
    </>
  );
}