/* YeYe Expat Portal — v14 session welcome onboarding */

const YEYE_WELCOME_FLAG = 'yeye-welcome-shown-session-v1';

function shouldShowWelcome(contact) {
  return false;
  if (!contact || !(contact.contactId || contact.id || contact.email)) return false;
  const paid = window.YEYE_PURCHASES && window.YEYE_PURCHASES.getPaidServices
    ? window.YEYE_PURCHASES.getPaidServices(contact)
    : [];
  if (!paid.length) return false;
  if (!window.YEYE_PROFILE || !window.YEYE_PROFILE.completeness) return false;
  if (typeof window.isFreshPortalContact !== 'function' || !window.isFreshPortalContact(contact)) return false;
  try {
    if (sessionStorage.getItem(YEYE_WELCOME_FLAG) === '1') return false;
  } catch (_) {}
  return window.YEYE_PROFILE.completeness(contact).ratio < 0.6;
}

function markWelcomeShown() {
  try { sessionStorage.setItem(YEYE_WELCOME_FLAG, '1'); } catch (_) {}
}

function clearWelcomeShown() {
  try { sessionStorage.removeItem(YEYE_WELCOME_FLAG); } catch (_) {}
}

function firstNameFromContact(contact) {
  const raw = (contact && (contact.firstName || contact.name)) || '';
  const first = String(raw || '').trim().split(/\s+/)[0] || '';
  return first ? first.charAt(0).toUpperCase() + first.slice(1) : '';
}

function WelcomeSplash() {
  const { t } = useT();
  return (
    <div className="welcome-screen welcome-splash" role="status" aria-live="polite">
      <header className="welcome-top">
        <BrandLogo />
      </header>
      <main className="welcome-splash-main">
        <div className="welcome-splash-spinner" aria-hidden="true" />
        <p>{t('welcome.loadingWorkspace')}</p>
      </main>
    </div>
  );
}

function WelcomePage({ contact, onDismiss }) {
  const { t } = useT();
  const firstName = firstNameFromContact(contact);
  const rawGreeting = t('welcome.title');
  const greeting = firstName
    ? rawGreeting.replace('{firstName}', firstName)
    : rawGreeting.replace(', {firstName}', '').replace(' {firstName}', '');
  const explore = (filter) => {
    const params = new URLSearchParams(window.location.search || '');
    params.set('filter', filter);
    const query = params.toString();
    try { window.history.replaceState({}, '', window.location.pathname + (query ? '?' + query : '') + window.location.hash); } catch (_) {}
    markWelcomeShown();
    onDismiss && onDismiss('services');
  };
  const skip = () => {
    markWelcomeShown();
    onDismiss && onDismiss('dashboard');
  };
  return (
    <div className="welcome-screen">
      <header className="welcome-top">
        <div className="brand-stack welcome-brand-stack">
          <BrandLogo />
          <BrandSlogan />
        </div>
        <button type="button" className="welcome-skip" onClick={skip}>{t('welcome.skipForNow')}</button>
      </header>
      <main className="welcome-main">
        <section className="welcome-copy">
          <h1>{greeting}</h1>
          <p>{t('welcome.services.title')}</p>
        </section>
        <section className="welcome-services-model" aria-label={t('welcome.services.title')}>
          <div className="welcome-services-grid">
          <div className="card welcome-service-model-card pro">
            <div className="welcome-card-icon"><Icon name="user-check" size={25} /></div>
            <h3>{t('welcome.professional.title')}</h3>
            <p>{t('welcome.professional.desc')}</p>
            <button type="button" className="welcome-model-cta" onClick={() => explore('professional')}>
              {t('welcome.exploreServices')} <Icon name="arrow-right" size={16} />
            </button>
          </div>
          <div className="card welcome-service-model-card diy">
            <div className="welcome-card-icon"><Icon name="file-pen-line" size={25} /></div>
            <h3>{t('welcome.diy.title')}</h3>
            <p>{t('welcome.diy.desc')}</p>
            <button type="button" className="welcome-model-cta" onClick={() => explore('diy')}>
              {t('welcome.exploreServices')} <Icon name="arrow-right" size={16} />
            </button>
          </div>
          </div>
        </section>
      </main>
    </div>
  );
}

window.YEYE_WELCOME = {
  shouldShow: shouldShowWelcome,
  markShown: markWelcomeShown,
  clear: clearWelcomeShown,
};
Object.assign(window, { WelcomeSplash, WelcomePage, shouldShowWelcome, markWelcomeShown });