"use client";

import Image from "next/image";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { Suspense } from "react";
import { LanguageToggle } from "@/components/language-toggle";
import { useLanguage } from "@/lib/i18n-context";

function AccountNotFoundContent() {
  const searchParams = useSearchParams();
  const email = searchParams.get("email") || "";
  const { t } = useLanguage();
  const a = t.auth.accountNotFound;

  return (
    <main className="flex flex-col md:flex-row min-h-screen md:h-screen md:overflow-hidden">
      {/* Left Side */}
      <section className="hidden md:flex md:w-1/2 lg:w-3/5 bg-secondary relative items-end p-12 lg:p-20 overflow-hidden">
        <div className="absolute inset-0 z-0 bg-gradient-to-t from-secondary via-secondary/80 to-secondary/60" />
        <div className="relative z-10 max-w-xl">
          <div className="mb-8 flex items-center gap-3">
            <span className="h-1 w-12 bg-primary" />
            <span className="text-on-secondary font-headline font-bold uppercase tracking-widest text-xs">
              {a.editorialIntelligence}
            </span>
          </div>
          <h1 className="text-on-secondary font-headline text-5xl lg:text-7xl font-black leading-none tracking-tighter mb-6 whitespace-pre-line">
            {a.tradePrecision}
          </h1>
          <p className="text-on-secondary/80 text-xl font-medium max-w-md leading-relaxed">
            {a.tradeSubtitle}
          </p>
        </div>
      </section>

      {/* Right Side */}
      <section className="flex-1 bg-surface-container-lowest flex flex-col p-8 md:p-12 lg:p-20 relative md:overflow-y-auto">
        <div className="flex justify-between items-center mb-16">
          <Image src="/ina_logo.png" alt="Ina Trading" width={160} height={48} priority />
          <div className="flex items-center gap-3">
            <LanguageToggle />
            <Link
              href="/help"
              className="hidden sm:flex text-secondary font-semibold hover:text-primary transition-colors items-center gap-2"
            >
              <span className="material-symbols-outlined text-lg">help_outline</span>
              {a.helpLink}
            </Link>
          </div>
        </div>

        <div className="flex-1 flex flex-col justify-center max-w-md w-full mx-auto">
          <div className="mb-8 h-16 w-16 bg-error-container rounded-xl flex items-center justify-center">
            <span className="material-symbols-outlined text-error text-3xl">person_off</span>
          </div>

          <div className="mb-10">
            <h2 className="font-headline text-4xl font-extrabold tracking-tight text-on-surface mb-3">
              {a.title}
            </h2>
            <div className="flex items-center gap-2 p-3 bg-surface-container-low rounded-lg border-l-4 border-tertiary">
              <p className="text-on-surface-variant font-medium truncate">{email}</p>
              <Link
                href="/login"
                className="text-tertiary font-bold hover:underline ml-auto flex items-center gap-1 shrink-0"
              >
                {a.change}
              </Link>
            </div>
          </div>

          <div className="space-y-6">
            <Link
              href={`/register?email=${encodeURIComponent(email)}`}
              className="block w-full text-center signature-cta-gradient text-on-primary font-headline font-bold py-5 rounded-xl shadow-xl shadow-primary/20 hover:scale-[1.02] active:scale-95 transition-all text-xl uppercase tracking-wider"
            >
              {a.createAccount}
            </Link>

            <div className="relative py-4">
              <div aria-hidden="true" className="absolute inset-0 flex items-center">
                <div className="w-full border-t border-outline-variant/30" />
              </div>
              <div className="relative flex justify-center">
                <span className="bg-surface-container-lowest px-4 text-sm font-medium text-outline">
                  {t.common.or}
                </span>
              </div>
            </div>

            <Link
              href="/login"
              className="flex items-center justify-center gap-3 w-full border-2 border-outline-variant/30 text-on-surface font-bold py-4 rounded-xl hover:bg-surface-container transition-colors group"
            >
              <span className="material-symbols-outlined text-secondary group-hover:text-primary transition-colors">
                login
              </span>
              {a.loginOther}
            </Link>
          </div>
        </div>

        <footer className="mt-auto pt-12">
          <div className="flex flex-col gap-6">
            <div className="flex gap-4">
              <Link href="/privacy" className="text-outline text-xs font-semibold hover:text-on-surface uppercase tracking-widest transition-colors">
                {t.common.privacy}
              </Link>
              <Link href="/terms" className="text-outline text-xs font-semibold hover:text-on-surface uppercase tracking-widest transition-colors">
                {t.common.terms}
              </Link>
            </div>
            <p className="text-[10px] leading-relaxed text-outline/60 max-w-sm">{a.disclaimer}</p>
          </div>
        </footer>
      </section>
    </main>
  );
}

export default function AccountNotFoundPage() {
  return (
    <Suspense>
      <AccountNotFoundContent />
    </Suspense>
  );
}