'use client';

import { usePathname, useRouter } from 'next/navigation';
import { Icon, type IconName } from './icon';
import { useCopy, useLang } from './i18n';

const COPY = {
  en: {
    brandSub: 'AI marketing & lead qualification',
    heroTitle: 'Every buyer answered. Every lead qualified.',
    heroBody: 'MARK runs your Meta ads and answers buyers on WhatsApp in Arabic and English, so your team only calls the leads worth calling.',
    points: [
      { icon: 'megaphone', text: 'Campaigns published to Facebook and Instagram from one brief' },
      { icon: 'chat', text: 'Buyers answered on your WhatsApp number, day and night' },
      { icon: 'target', text: 'Leads scored Hot, Warm or Cold — with the reason' },
    ] as { icon: IconName; text: string }[],
    footer: 'Built for UAE real estate · Abu Dhabi',
    switchLang: 'العربية',
  },
  ar: {
    brandSub: 'تسويق ذكي وتأهيل العملاء',
    heroTitle: 'كل مشترٍ يحصل على رد. كل عميل يتم تأهيله.',
    heroBody: 'يدير مارك إعلاناتك على ميتا ويرد على المشترين عبر واتساب بالعربية والإنجليزية، ليتصل فريقك فقط بالعملاء الجديرين بالاتصال.',
    points: [
      { icon: 'megaphone', text: 'حملات تُنشر على فيسبوك وإنستغرام من وصف واحد' },
      { icon: 'chat', text: 'رد على المشترين عبر رقم واتساب الخاص بك ليلاً ونهاراً' },
      { icon: 'target', text: 'تصنيف العملاء ساخن أو دافئ أو بارد — مع السبب' },
    ] as { icon: IconName; text: string }[],
    footer: 'مصمم لقطاع العقارات في الإمارات · أبوظبي',
    switchLang: 'English',
  },
};

/** Split-screen frame for the sign-in / sign-up pages: brand panel + form column with a language toggle. */
export function AuthFrame({ maxWidth = 420, children }: { maxWidth?: number; children: React.ReactNode }) {
  const c = useCopy(COPY);
  const lang = useLang();
  const rtl = lang === 'ar';
  const pathname = usePathname();
  const router = useRouter();

  const switchLang = () => {
    const seg = pathname.split('/');
    seg[1] = rtl ? 'en' : 'ar';
    router.push(seg.join('/'));
  };

  return (
    <div className="mk" dir={rtl ? 'rtl' : 'ltr'} lang={lang} style={{ display: 'flex', flexWrap: 'wrap' }}>
      <aside style={{ flex: '1 1 420px', background: '#0F3B37', color: '#FFFFFF', padding: '40px 48px', display: 'flex', flexDirection: 'column', gap: 40, minHeight: 'min(100vh, 720px)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 34, height: 34, borderRadius: 9, background: '#FFFFFF', color: '#0E6B63', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: rtl ? 17 : 16 }}>{rtl ? 'م' : 'M'}</div>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            <span style={{ fontWeight: 700, fontSize: 16, letterSpacing: rtl ? undefined : '.04em' }}>{rtl ? 'مارك' : 'MARK'}</span>
            <span style={{ fontSize: 12, color: '#CBE5E0' }}>{c.brandSub}</span>
          </div>
        </div>

        <div style={{ marginBlock: 'auto', maxWidth: 480 }}>
          <h2 style={{ margin: 0, fontSize: 32, lineHeight: 1.25, fontWeight: 600, letterSpacing: rtl ? undefined : '-.01em' }}>{c.heroTitle}</h2>
          <p style={{ margin: '14px 0 0', fontSize: 15, lineHeight: 1.65, color: '#CBE5E0' }}>{c.heroBody}</p>
          <ul style={{ listStyle: 'none', margin: '28px 0 0', padding: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
            {c.points.map((pt) => (
              <li key={pt.text} style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 14, lineHeight: 1.5 }}>
                <span style={{ width: 32, height: 32, borderRadius: 8, background: 'rgba(255,255,255,.1)', color: '#8FE3C8', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}>
                  <Icon name={pt.icon} small />
                </span>
                {pt.text}
              </li>
            ))}
          </ul>
        </div>

        <div style={{ fontSize: 12.5, color: '#9FC9C1' }}>{c.footer}</div>
      </aside>

      <main style={{ flex: '1 1 480px', display: 'flex', flexDirection: 'column', padding: '24px 32px' }}>
        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
          <button className="btn" onClick={switchLang}>{c.switchLang}</button>
        </div>
        <div style={{ margin: 'auto', width: '100%', maxWidth, paddingBlock: 32 }}>{children}</div>
      </main>
    </div>
  );
}

/** Red error banner used inside auth forms. */
export function AuthError({ children }: { children: React.ReactNode }) {
  return (
    <div role="alert" style={{ marginTop: 20, padding: '10px 14px', borderRadius: 8, background: '#FEEEEC', border: '1px solid #FBD5D0', color: '#B42318', fontSize: 13.5, lineHeight: 1.5 }}>
      {children}
    </div>
  );
}