/* Mereka v2 — Login + Hub Settings */

/* =================================================================
   LOGIN
   ================================================================= */
function LoginShell({ children }) {
  return (
    <div className="min-h-screen bg-white flex">
      <div className="flex-1 flex flex-col px-12 lg:px-20 py-10 max-w-[700px]">
        <Link to="/web" className="inline-flex items-center gap-2 text-base text-neutral-900 hover:text-neutral-700 font-medium">
          <Icon name="chevronLeft" size={18} /> Back
        </Link>
        <div className="flex-1 flex flex-col justify-center">
          {children}
        </div>
      </div>
      <div className="hidden lg:flex flex-1 items-stretch p-6">
        <LoginPoster />
      </div>
    </div>
  );
}

function LoginPoster() {
  return (
    <div className="relative w-full overflow-hidden rounded-[40px]" style={{
      background: 'radial-gradient(circle at 20% 0%, #B8F0E3 0%, transparent 50%), radial-gradient(circle at 80% 60%, #DDD5FF 0%, transparent 55%), radial-gradient(circle at 30% 95%, #FFC9DB 0%, transparent 50%), linear-gradient(135deg, #E8F5FF 0%, #F0E8FF 50%, #FFE8F1 100%)'
    }}>
      <div className="absolute top-12 right-12 max-w-[520px]">
        <h1 className="text-5xl xl:text-6xl font-bold text-neutral-900 leading-[1.1] tracking-tight">
          Connect with leading Experts &amp; Services.
        </h1>
      </div>
    </div>
  );
}

function LoginPage() {
  return (
    <LoginShell>
      <div className="mb-12">
        <div style={{ height: 80, width: 80 }}><MerekaLogo /></div>
      </div>
      <div className="space-y-3 max-w-[420px]">
        <SocialBtn3 onClick={() => { setAuth(true); navigate('/app/dashboard/overview'); }} label="Continue with Google" icon={<GoogleIcon />} />
        <SocialBtn3 onClick={() => { setAuth(true); navigate('/app/dashboard/overview'); }} label="Continue with Facebook" icon={<FBIcon />} />
        <SocialBtn3 onClick={() => { setAuth(true); navigate('/app/dashboard/overview'); }} label="Continue with Apple" icon={<AppleIcon />} />
        <SocialBtn3 onClick={() => { setAuth(true); navigate('/app/dashboard/overview'); }} label="Login with SSO" icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="11" width="18" height="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></svg>} />
        <div className="flex items-center gap-3 py-2">
          <div className="flex-1 h-px bg-neutral-200" />
          <span className="text-xs font-semibold text-neutral-500">OR</span>
          <div className="flex-1 h-px bg-neutral-200" />
        </div>
        <Link to="/app/login/email" className="block">
          <SocialBtn3 label="Continue with Email" icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="2" y="4" width="20" height="16" rx="2" /><path d="m2 6 10 7 10-7" /></svg>} />
        </Link>
        <p className="text-sm text-neutral-700 text-center mt-6">
          By continuing, you accept our <a className="underline">terms of use</a> and<br />
          <a className="underline">privacy policy</a>
        </p>
        <div className="h-px bg-neutral-200 my-5" />
        <Link to="/app/hub/calendar" onClick={() => setAuth(true)} className="block w-full">
          <button className="w-full h-12 rounded-full text-white font-semibold text-sm" style={{ background: 'linear-gradient(90deg, #FF4D9D 0%, #C84FE5 100%)' }}>
            Connect as Business
          </button>
        </Link>
      </div>
    </LoginShell>
  );
}

function LoginEmailPage() {
  const [email, setEmail] = useState('');
  return (
    <LoginShell>
      <div className="mb-12">
        <div style={{ height: 110, width: 110 }}><MerekaLogo /></div>
      </div>
      <div className="max-w-[420px]">
        <label className="block text-sm font-medium text-neutral-900 mb-2">Email Address</label>
        <input value={email} onChange={e => setEmail(e.target.value)} type="email" placeholder="Email"
          className="w-full h-12 px-4 text-sm border border-neutral-200 rounded-full focus:outline-none focus:border-neutral-400 mb-4" />
        <Link to="/app/dashboard/overview" onClick={() => setAuth(true)} className="block w-full">
          <button disabled={!email} className={`w-full h-12 rounded-full text-white font-semibold text-sm ${email ? 'bg-neutral-900 hover:bg-neutral-800' : 'bg-neutral-400 cursor-not-allowed'}`}>
            Continue
          </button>
        </Link>
      </div>
    </LoginShell>
  );
}

function SocialBtn3({ label, icon, onClick }) {
  return (
    <button onClick={onClick} className="w-full h-12 px-5 border border-neutral-200 rounded-full inline-flex items-center justify-center gap-3 text-sm font-semibold hover:bg-neutral-50 text-neutral-900">
      <span className="text-neutral-900">{icon}</span>
      {label}
    </button>
  );
}

function GoogleIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
      <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" />
      <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
      <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
      <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
    </svg>
  );
}

function FBIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
      <circle cx="12" cy="12" r="11" fill="#1877F2" />
      <path fill="#FFF" d="M13.5 21v-7.5h2.5l.4-3h-2.9V8.6c0-.9.3-1.5 1.6-1.5H17V4.3c-.3 0-1.3-.1-2.4-.1-2.4 0-4 1.5-4 4.2v2.1H8v3h2.6V21h2.9z" />
    </svg>
  );
}

function AppleIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M17.05 12.04c-.03-2.49 2.04-3.68 2.13-3.74-1.16-1.7-2.97-1.93-3.62-1.96-1.54-.16-3 .91-3.79.91-.78 0-1.99-.89-3.27-.87-1.68.03-3.23.97-4.1 2.47-1.75 3.04-.45 7.54 1.25 10.02.83 1.21 1.82 2.57 3.11 2.52 1.25-.05 1.72-.81 3.23-.81 1.5 0 1.93.81 3.25.78 1.34-.02 2.19-1.23 3.01-2.45.96-1.4 1.35-2.77 1.37-2.84-.03-.01-2.62-1-2.65-3.98zM14.6 4.6c.68-.83 1.14-1.98 1.01-3.13-.98.04-2.17.66-2.88 1.48-.63.73-1.19 1.91-1.04 3.03 1.1.09 2.22-.55 2.91-1.38z" />
    </svg>
  );
}

/* =================================================================
   HUB SETTINGS (Account view sample with dark sidebar)
   ================================================================= */
const BUSINESS_NAV = [
  { label: 'Inbox', to: '/app/hub/chats' },
  { label: 'Calendar', to: '/app/hub/calendar' },
  { label: 'Jobs', to: '/app/hub/jobs/posts', dropdown: true },
  { label: 'Bookings', to: '/app/hub/bookings' },
  { label: 'Manage Services', to: '/app/hub/services/experiences', dropdown: true },
];

function BusinessHeader({ active }) {
  const [userMenuOpen, setUserMenuOpen] = useState(false);
  const userMenuRef = useRef(null);
  useEffect(() => {
    if (!userMenuOpen) return;
    const handler = (e) => userMenuRef.current && !userMenuRef.current.contains(e.target) && setUserMenuOpen(false);
    document.addEventListener('click', handler);
    return () => document.removeEventListener('click', handler);
  }, [userMenuOpen]);
  return (
    <header className="sticky top-0 z-40 bg-white border-b border-neutral-100">
      <div className="max-w-[min(2560px,95vw)] mx-auto px-6">
        <div className="flex items-center gap-8 h-[68px]">
          <Link to="/app/hub/calendar" className="flex-shrink-0" aria-label="Mereka">
            <div style={{ height: 32 }}><MerekaLogo /></div>
          </Link>
          <nav className="hidden lg:flex items-center gap-2 flex-1 justify-center">
            {BUSINESS_NAV.map(item => {
              const isActive = active === item.to;
              return (
                <Link key={item.label} to={item.to}
                  className={`inline-flex items-center gap-1 px-3 py-2 text-base font-bold ${isActive ? 'text-neutral-900' : 'text-neutral-700 hover:text-neutral-900'}`}>
                  {item.label}
                  {item.dropdown && <Icon name="chevronDown" size={14} className="text-neutral-500" />}
                </Link>
              );
            })}
          </nav>
          <Link to="/web" className="inline-flex items-center gap-2 px-4 h-10 text-sm font-semibold text-white bg-neutral-900 rounded-full hover:bg-neutral-800">
            Switch to User
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <path d="M21 12a9 9 0 0 1-15 6.7L3 16" />
              <path d="M3 12a9 9 0 0 1 15-6.7L21 8" />
              <polyline points="21 3 21 8 16 8" />
              <polyline points="3 21 3 16 8 16" />
            </svg>
          </Link>
          <Link to="/app/hub/notifications" className="relative p-2 hover:bg-neutral-100 rounded-lg">
            <Icon name="bell" size={20} className="text-neutral-700" />
            <span className="absolute top-1 right-1 w-2 h-2 bg-blue-500 rounded-full" />
          </Link>
          <div className="relative" ref={userMenuRef}>
            <button onClick={() => setUserMenuOpen(o => !o)} aria-label="Account"
              className="w-9 h-9 rounded-full bg-neutral-900 flex items-center justify-center text-white hover:ring-2 hover:ring-neutral-200">
              <img src="/mereka-logo-white.svg" alt="" style={{ width: 18, height: 18 }} />
            </button>
            {userMenuOpen && <ProfileDropdown onClose={() => setUserMenuOpen(false)} />}
          </div>
        </div>
      </div>
    </header>
  );
}

const SETTINGS_NAV = [
  { id: 'account', label: 'Account', icon: 'user' },
  { id: 'business-profile', label: "Business's Profile", icon: 'building' },
  { id: 'users', label: 'Users', icon: 'user', expandable: true },
  { id: 'finances', label: 'Finances', icon: 'card', expandable: true },
  { id: 'security', label: 'Security Center', icon: 'shield' },
];

function HubSettingsPage() {
  const [active, setActive] = useState('account');
  return (
    <div className="min-h-screen bg-neutral-50 flex flex-col">
      <HomeHeader />
      <div className="flex flex-1">
        <aside className="hidden lg:flex w-[320px] flex-shrink-0 bg-[#0F0F19] text-white p-6 flex-col">
          <div className="flex items-center gap-3 mb-8">
            <div className="w-14 h-14 rounded-full overflow-hidden flex-shrink-0" style={{ background: 'linear-gradient(135deg, #FB923C, #F97316, #B45309)' }}>
              <div className="w-full h-full" style={{
                background: 'radial-gradient(circle at 30% 30%, #FED7AA 0%, transparent 40%), radial-gradient(circle at 70% 60%, #F97316 0%, transparent 50%), linear-gradient(135deg, #FB923C, #B45309)'
              }} />
            </div>
            <div className="min-w-0">
              <h2 className="font-bold text-lg">Mereka</h2>
              <p className="text-xs text-white/60">Talent Development Ecosystem</p>
            </div>
          </div>
          <nav className="space-y-1">
            {SETTINGS_NAV.map(item => (
              <button key={item.id} onClick={() => setActive(item.id)}
                className={`w-full flex items-center justify-between px-4 h-11 rounded-lg text-sm transition-colors ${active === item.id ? 'bg-white text-neutral-900 font-semibold' : 'text-white/80 hover:bg-white/5'}`}>
                <span className="inline-flex items-center gap-3">
                  <Icon name={item.icon} size={16} />
                  {item.label}
                </span>
                {item.expandable && <Icon name="chevronDown" size={14} />}
              </button>
            ))}
          </nav>
          <div className="flex-1" />
        </aside>

        <main className="flex-1 min-w-0 bg-white">
          <div className="max-w-[920px] mx-auto p-10">
            <h1 className="text-3xl font-bold mb-6">Accounts</h1>

            <div className="border border-neutral-200 rounded-2xl p-6 mb-6">
              <div className="flex items-start gap-5">
                <div className="w-16 h-16 rounded-full bg-neutral-900 flex items-center justify-center flex-shrink-0">
                  <img src="/mereka-logo-white.svg" alt="Mereka" style={{ width: 30, height: 30 }} />
                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex items-start justify-between gap-4">
                    <div>
                      <h3 className="font-bold text-lg">Mereka</h3>
                      <p className="text-sm text-neutral-600 mt-0.5">Talent Development Ecosystem</p>
                      <div className="flex items-center gap-4 mt-2 text-sm">
                        <span className="inline-flex items-center gap-1 text-neutral-700"><Icon name="pin" size={14} /> Kuala Lumpur, Malaysia</span>
                        <span className="inline-flex items-center gap-1 text-neutral-700"><Icon name="star" size={14} fill="#000" strokeWidth={0} /> <span className="font-semibold">4.00</span> <span className="text-neutral-500">(79)</span></span>
                      </div>
                    </div>
                    <button className="h-10 px-4 bg-neutral-900 text-white rounded-full text-sm font-semibold hover:bg-neutral-800">Embed profile</button>
                  </div>
                  <p className="text-sm text-neutral-500 mt-4 inline-flex items-center gap-1.5">
                    <Icon name="calendar" size={14} /> Created 4 Year(s) and 42 month(s) ago
                  </p>
                </div>
              </div>
            </div>

            <div className="border border-neutral-200 rounded-2xl p-6 mb-6">
              <div className="flex items-start justify-between mb-2">
                <div>
                  <p className="text-sm text-neutral-700">Business Account</p>
                  <h3 className="font-bold text-2xl mt-1">Soar</h3>
                </div>
                <button className="h-10 px-4 bg-neutral-900 text-white rounded-full text-sm font-semibold hover:bg-neutral-800">Change Plan</button>
              </div>

              <div className="mt-8">
                <h3 className="font-bold text-lg mb-2">Business Information</h3>
                <p className="text-sm text-neutral-600 mb-6">
                  This information is used for us to contact you about important updates. Email addresses are tied to your personal account log in, which can be edited through the User dashboard. However, the phone number here is unique to the Hub and will not affect your personal account in any way.
                </p>
                <div className="grid grid-cols-1 lg:grid-cols-[200px_1fr_30px] gap-y-5">
                  <div className="font-bold">Email</div>
                  <div>
                    <p className="text-neutral-900">Mereka (Owner)</p>
                    <p className="text-neutral-600 text-sm">academy@mereka.my</p>
                  </div>
                  <div />
                  <div className="font-bold">Phone Number</div>
                  <div className="text-neutral-900">+60122145573</div>
                  <button className="text-neutral-500 hover:text-neutral-900"><Icon name="edit" size={16} /></button>
                </div>
              </div>
            </div>

            <h3 className="font-bold text-lg mb-4 text-neutral-300">Get quick access around your settings</h3>
          </div>
        </main>
      </div>

      <button className="fixed bottom-6 right-6 z-30 w-14 h-14 rounded-full bg-neutral-900 flex items-center justify-center shadow-lg hover:bg-neutral-800">
        <img src="/mereka-logo-white.svg" alt="" style={{ width: 24, height: 24 }} />
      </button>
    </div>
  );
}

Object.assign(window, { LoginPage, LoginEmailPage, HubSettingsPage, BusinessHeader });