"use client";

/**
 * Shared split-screen auth layout — premium left panel with branding,
 * dashboard mockup, right panel for the Clerk component. Stacks on mobile.
 */

import { type ReactNode } from "react";
import { Sparkles, TrendingUp, MapPin, Brain } from "lucide-react";

interface Props {
  mode: "sign-in" | "sign-up";
  children: ReactNode;
}

const FEATURE_PILLS = [
  { icon: TrendingUp, label: "SEO Rankings", desc: "Track positions across Google, Bing, and local search" },
  { icon: Brain, label: "LLMO & AEO", desc: "Optimize content to be cited by ChatGPT, Perplexity, and Gemini" },
  { icon: MapPin, label: "GEO & Local", desc: "Dominate local pack and Google Business Profile results" },
  { icon: Sparkles, label: "AI Strategist", desc: "AI-powered analysis with predictive modeling" },
];

function DashboardMockup() {
  return (
    <div className="rounded-xl bg-white/[0.05] border border-white/[0.08] p-3 shadow-lg shadow-brand-500/5">
      {/* KPI row */}
      <div className="flex gap-2 mb-3">
        {[
          { label: "Organic Traffic", value: "24,819", color: "bg-teal-400/20 text-teal-300" },
          { label: "Keywords Top 10", value: "142", color: "bg-violet-400/20 text-violet-300" },
          { label: "Conversions", value: "387", color: "bg-amber-400/20 text-amber-300" },
        ].map((kpi) => (
          <div key={kpi.label} className="flex-1 rounded-lg bg-white/[0.04] border border-white/[0.06] px-2.5 py-2">
            <p className="text-[8px] text-slate-500 uppercase tracking-wider mb-0.5">{kpi.label}</p>
            <p className={`text-base font-bold ${kpi.color.split(" ")[1]}`}>{kpi.value}</p>
          </div>
        ))}
      </div>
      {/* Chart area */}
      <div className="rounded-lg bg-white/[0.03] border border-white/[0.05] px-3 py-2 mb-2">
        <svg viewBox="0 0 300 60" className="w-full h-auto" fill="none">
          <defs>
            <linearGradient id="chartFill" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#0D9488" stopOpacity="0.3" />
              <stop offset="100%" stopColor="#0D9488" stopOpacity="0" />
            </linearGradient>
          </defs>
          <path d="M0 45 Q25 42 50 38 T100 28 T150 20 T200 24 T250 15 T300 10" stroke="#0D9488" strokeWidth="2" strokeLinecap="round" />
          <path d="M0 45 Q25 42 50 38 T100 28 T150 20 T200 24 T250 15 T300 10 V60 H0 Z" fill="url(#chartFill)" />
          <path d="M0 50 Q30 48 60 46 T120 40 T180 35 T240 38 T300 32" stroke="#6366F1" strokeWidth="1.5" strokeLinecap="round" strokeDasharray="4 3" opacity="0.5" />
        </svg>
      </div>
      {/* Table rows */}
      <div className="space-y-1.5">
        {[
          { page: "/services", clicks: "1,284", pos: "3.2" },
          { page: "/about", clicks: "876", pos: "5.1" },
        ].map((row) => (
          <div key={row.page} className="flex items-center gap-3 rounded-md bg-white/[0.03] border border-white/[0.04] px-3 py-1.5">
            <span className="text-[10px] text-slate-400 font-mono flex-1 truncate">{row.page}</span>
            <span className="text-[10px] text-slate-500">{row.clicks} clicks</span>
            <span className="text-[10px] text-teal-400 font-semibold">#{row.pos}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

export default function AuthLayout({ mode, children }: Props) {
  const isSignUp = mode === "sign-up";

  return (
    <div className="min-h-screen flex flex-col lg:flex-row animate-in fade-in duration-500">
      {/* Left panel — branding */}
      <div className="hidden lg:flex lg:w-[55%] flex-col justify-between p-10 relative overflow-y-auto" style={{ background: "linear-gradient(135deg, #0B1120 0%, #1E293B 100%)" }}>
        {/* Grid pattern overlay */}
        <div className="absolute inset-0 opacity-[0.03]" style={{ backgroundImage: "url(\"data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h40v40H0z' fill='none' stroke='%23fff' stroke-width='.5'/%3E%3C/svg%3E\")" }} />

        <div className="relative z-10">
          <div className="mb-6">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img src="/images/meseo-logo-white.png" alt="meSEO" className="h-9 w-auto" />
            <p className="text-xs tracking-widest uppercase text-slate-400 mt-2">Machine Enhanced Search Engine Optimization</p>
          </div>

          <h1 className="text-2xl md:text-3xl font-extrabold text-white leading-tight mb-2">
            SEO + LLMO Intelligence for Agencies and Brands
          </h1>
          <p className="text-sm text-slate-300 leading-relaxed mb-6">
            The only platform that optimizes for both traditional search AND AI-generated answers. Get found on Google, cited by ChatGPT, and recommended by Perplexity.
          </p>

          <div className="grid grid-cols-2 gap-2.5 mb-5">
            {FEATURE_PILLS.map((f) => (
              <div key={f.label} className="bg-white/[0.05] border border-white/[0.08] rounded-lg p-3">
                <f.icon className="w-5 h-5 text-brand-400 mb-2" />
                <p className="text-sm font-bold text-white mb-0.5">{f.label}</p>
                <p className="text-xs text-slate-400 leading-snug">{f.desc}</p>
              </div>
            ))}
          </div>

          {/* Dashboard mockup */}
          <DashboardMockup />
        </div>

        <div className="relative z-10 mt-6">
          <div className="flex items-center gap-6 text-xs text-slate-400">
            <span><span className="text-white font-bold">2,500+</span> brands managed</span>
            <span><span className="text-white font-bold">50M+</span> keywords tracked</span>
            <span><span className="text-white font-bold">10K+</span> audits run</span>
          </div>
        </div>
      </div>

      {/* Right panel — auth form */}
      {/* Right panel — NO overflow-hidden on form containers. iOS
          Safari needs the page to scroll freely so the virtual keyboard
          can push focused inputs into view. overflow-hidden traps the
          scroll context and makes it LOOK like the keyboard never
          appeared (it did, but the input is behind it). */}
      <div className="w-full lg:w-[45%] flex items-center justify-center px-8 lg:px-12 min-h-screen bg-white">
        {/* Mobile logo */}
        <div className="lg:hidden absolute top-6 left-6">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img src="/meseo-logo-dark.png" alt="meSEO" className="h-8 w-auto" />
        </div>

        <div className="w-full max-w-sm">
          <h2 className="text-xl font-bold text-slate-900 mb-1 text-center lg:text-left">
            {isSignUp ? "Create your account" : "Welcome back"}
          </h2>
          <p className="text-sm text-slate-500 mb-6 text-center lg:text-left">
            {isSignUp ? "Get started with meSEO" : "Sign in to your meSEO account"}
          </p>

          {children}

          <div className="mt-6 text-center text-xs text-slate-500">
            {isSignUp ? (
              <>Already have an account? <a href="/sign-in" className="text-brand-600 font-semibold hover:underline">Sign in</a></>
            ) : (
              <>Don&apos;t have an account? <a href="/sign-up" className="text-brand-600 font-semibold hover:underline">Sign up</a></>
            )}
          </div>
          {!isSignUp && (
            <div className="mt-3 text-center"><a href="#" className="text-xs text-slate-400 hover:text-slate-600">Enterprise? Book a demo →</a></div>
          )}
          {isSignUp && (
            <p className="mt-4 text-center text-[10px] text-slate-400">By signing up you agree to our <a href="#" className="underline">Terms</a> and <a href="#" className="underline">Privacy Policy</a></p>
          )}
        </div>
      </div>
    </div>
  );
}
