// ═══════════════════════════════════════════════════════════════
// CONFIG
// ═══════════════════════════════════════════════════════════════
const SUPABASE_URL = 'https://mesfubazfwomxiwgbhek.supabase.co';
const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im1lc2Z1YmF6ZndvbXhpd2diaGVrIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzQ4MTA2MDcsImV4cCI6MjA5MDM4NjYwN30.2BiptnPc3OzhJl-M21-HfPOKxurxUuSqZ5ogvgoaJi0';

// ⚠️ FILL THESE IN — I don't have literal values for any of these four
// from tonight's work, only the env var names they map to in your app.
const STRIPE_PUBLISHABLE_KEY = 'pk_live_51ToBRzL4btaUJvwOaPOdRIkPIByDmgf5Z7MP1onzoZQqLArZvyeiXOn8KMgqNHOpOfuuAAGzMJuuCBneZPo9dc1I00jpzi6wLT';
const GOOGLE_PLACES_API_KEY = 'AIzaSyCX-WD8Jm6YTr4Fn_iP21n5sZeCoE2k-xc'; // same key as EXPO_PUBLIC_GOOGLE_PLACES_API_KEY
const CLOUDINARY_CLOUD_NAME = 'dw7kndjnv'; // same as EXPO_PUBLIC_CLOUDINARY_CLOUD_NAME
const CLOUDINARY_UPLOAD_PRESET = 'aisle_match'; // same as EXPO_PUBLIC_CLOUDINARY_UPLOAD_PRESET
// ABN Lookup needs a free GUID from https://abr.business.gov.au/Tools/WebServices
// Takes ~2 minutes to register, arrives by email instantly.
const ABN_LOOKUP_GUID = '913215cf-b204-4ba0-b9b4-dda32a6d015b';

let sb = null;
let stripe = null;
let cardElement = null;
let currentUser = null;
let vendorRow = null;
let categories = [];
let selectedPersonalityTags = [];
let uploadedPhotoUrls = [];
let coverPhotoUrl = null;
let insuranceUrl = null;
let tcUrl = null;
let serviceAreas = [];

const PERSONALITY_OPTIONS = ['fun','warm','relaxed','professional','quirky','creative','romantic','luxury','modern','traditional','bold','elegant','adventurous','laid-back','high-energy','experienced','calm','unconventional','storyteller','confident'];

// Dynamic script loader, used for BOTH Supabase and Stripe — this is
// the actual fix for "X is not defined" regardless of which library
// it happens to. If this page is embedded via a Webflow Embed block,
// static <script src> tags aren't reliably executed before the rest
// of the page's own script runs. Loading both dynamically and
// awaiting each one, in order, before touching either, guarantees
// both genuinely exist before anything tries to call them.
function loadScript(src){
  return new Promise((resolve, reject)=>{
    const s = document.createElement('script');
    s.src = src;
    s.onload = resolve;
    s.onerror = () => reject(new Error('Failed to load ' + src));
    document.head.appendChild(s);
  });
}

async function initEverything(){
  try{
    await loadScript('https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2');
    sb = supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

    // Categories can load as soon as Supabase is ready — no need to
    // wait for Stripe too
    sb.from('categories').select('id,name,slug').eq('is_active', true).order('name').then(({data, error})=>{
      if(error){ console.error(error); return; }
      categories = data || [];
      const sel = document.getElementById('categorySelect');
      sel.innerHTML = '<option value="">Select a category</option>' +
        categories.map(c=>`<option value="${c.id}">${c.name}</option>`).join('');
      renderSecondaryCategoryOptions();
    });

    await loadScript('https://js.stripe.com/v3/');
    stripe = Stripe(STRIPE_PUBLISHABLE_KEY);
    const elements = stripe.elements();
    cardElement = elements.create('card');
    cardElement.mount('#cardElement');
  }catch(e){
    console.error('Initialization failed', e);
    document.getElementById('cardElement').innerHTML = '<span style="color:var(--red)">Something failed to load — refresh the page.</span>';
  }
}
initEverything();

function showLoading(show, text){
  document.getElementById('loadingOverlay').style.display = show ? 'flex' : 'none';
  if(text) document.getElementById('loadingText').textContent = text;
}
function showErr(stepNum, msg){
  const el = document.getElementById('err'+stepNum);
  el.textContent = msg; el.style.display = 'block';
  setTimeout(()=>{ el.style.display='none'; }, 6000);
}

function goStepBase(n){
  document.querySelectorAll('.step').forEach(s=>s.classList.remove('active'));
  document.getElementById('step-'+n).classList.add('active');
  const progressN = (n === '0b') ? 0.5 : n;
  document.getElementById('progressBar').style.width = (9 + progressN*13) + '%';
  window.scrollTo(0,0);
}
// Wraps goStepBase so leaving steps 3 and 4 also triggers their saves
function goStep(n){
  if(n === 4) saveServiceAreas();
  if(n === 4.5) saveDocuments();
  if(n === 4.5) renderWeddingStylesAndLanguages();
  goStepBase(n);
}

// Render personality pills
PERSONALITY_OPTIONS.forEach(tag=>{
  const el = document.createElement('div');
  el.className = 'pill';
  el.textContent = tag;
  el.onclick = () => {
    if(selectedPersonalityTags.includes(tag)){
      selectedPersonalityTags = selectedPersonalityTags.filter(t=>t!==tag);
      el.classList.remove('sel');
    } else if(selectedPersonalityTags.length < 4){
      selectedPersonalityTags.push(tag);
      el.classList.add('sel');
    }
  };
  document.getElementById('personalityPills').appendChild(el);
});

// ═══════════════════════════════════════════════════════════════
// STEP 0 — silent account creation + prefill. No email sent at all —
// uses an auto-generated password purely to create a real Supabase
// Auth session (which create-checkout genuinely requires), invisible
// to the vendor. Only works with no email if Confirm Email is turned
// OFF in Supabase Dashboard → Authentication → Providers → Email —
// that project setting is what actually controls whether an email
// goes out, not which method creates the account.
// ═══════════════════════════════════════════════════════════════
// Deterministic, not random — same email always produces the same
// password. This isn't a real user-facing credential (the vendor
// never sees or types it), it's purely a mechanism to create a
// session with no email involved. Making it derived from the email
// (rather than random and thrown away) means a second attempt with
// the same email can log back in automatically instead of hitting a
// dead "already registered" wall.
function makeInvisiblePassword(email){
  let hash = 0;
  const salted = email.toLowerCase() + '::aislematch::onboarding::v1';
  for(let i = 0; i < salted.length; i++){
    hash = ((hash << 5) - hash + salted.charCodeAt(i)) | 0;
  }
  return 'am_' + Math.abs(hash).toString(36) + '_' + salted.length;
}

async function startOnboarding(){
  const email = document.getElementById('emailInput').value.trim().toLowerCase();
  if(!email || !email.includes('@')){ showErr(0, 'Please enter a valid email address.'); return; }
  const btn = document.getElementById('lookupBtn');
  btn.disabled = true; btn.textContent = 'Loading...';
  showLoading(true, 'Loading your details...');
  try{
    let session = null;
    const password = makeInvisiblePassword(email);

    // Try creating a fresh account first
    const signUpRes = await sb.auth.signUp({
      email, password,
      options: { data: { user_type: 'vendor' } },
    });

    if(signUpRes.error && /already registered/i.test(signUpRes.error.message || '')){
      // Account already exists — since the password is deterministic
      // (same email always produces the same password), just log
      // straight back in with it instead of dead-ending here.
      const signInRes = await sb.auth.signInWithPassword({ email, password });
      if(signInRes.error) throw signInRes.error;
      session = signInRes.data.session;
    } else if(signUpRes.error){
      throw signUpRes.error;
    } else {
      session = signUpRes.data.session;
    }

    if(!session){
      throw new Error('Could not create your session — please try again.');
    }

    const userId = session.user.id;

    let { data: userRow } = await sb.from('users').select('*').eq('id', userId).maybeSingle();
    if(!userRow){
      const { data: newUserRow, error: insertErr } = await sb.from('users').insert({
        id: userId, email: email, user_type: 'vendor', onboarding_completed: false,
      }).select().single();
      if(insertErr) throw insertErr;
      userRow = newUserRow;
    }
    currentUser = userRow;

    const { data: vp } = await sb.from('vendor_profiles').select('*').eq('user_id', currentUser.id).maybeSingle();
    vendorRow = vp || null;

    const { data: waitlistRow } = await sb.from('waitlist_vendors').select('*').eq('email', email).maybeSingle();
    const prefillSource = vendorRow || waitlistRow;
    if(prefillSource){
      document.getElementById('businessName').value = prefillSource.business_name || '';
      document.getElementById('contactName').value = (prefillSource.contact_name) || (currentUser ? [currentUser.first_name, currentUser.last_name].filter(Boolean).join(' ') : '') || '';
      document.getElementById('phone').value = prefillSource.phone_number || prefillSource.phone || '';
      document.getElementById('suburbSearch').value = prefillSource.suburb || '';
      document.getElementById('stateSelect').value = prefillSource.state || '';
      if(vendorRow){
        document.getElementById('tagline').value = vendorRow.tagline || '';
        document.getElementById('bio').value = vendorRow.bio || '';
        document.getElementById('startingPrice').value = vendorRow.starting_price || '';
        document.getElementById('websiteUrl').value = vendorRow.website_url || '';
        document.getElementById('instagram').value = vendorRow.instagram || '';
        document.getElementById('abnInput').value = vendorRow.abn || '';
        selectedPersonalityTags = vendorRow.personality_tags || [];
        document.querySelectorAll('#personalityPills .pill').forEach(p=>{
          if(selectedPersonalityTags.includes(p.textContent)) p.classList.add('sel');
        });
        if(Array.isArray(vendorRow.portfolio_photos)){
          uploadedPhotoUrls = vendorRow.portfolio_photos;
          coverPhotoUrl = vendorRow.cover_photo_url || uploadedPhotoUrls[0] || null;
          renderPhotoGrid();
        }
        tcUrl = vendorRow.tc_document_url || null;
        if(vendorRow.public_liability_insurance){
          document.getElementById('hasInsurance').checked = true;
          document.getElementById('insuranceExpiryWrap').style.display = 'block';
          if(vendorRow.public_liability_expiry) document.getElementById('insuranceExpiry').value = vendorRow.public_liability_expiry;
        }
        if(tcUrl){ document.getElementById('tcDropText').textContent = '✓ T&Cs uploaded — click to replace'; document.getElementById('tcDrop').classList.add('has-file'); }
      }
    }

    // Resume exactly where they left off, not always step 1.
    // onboarding_step reflects the step they've COMPLETED, so resume
    // at the next one after it.
    const resumeMap = { 0: 1, 1: 2, 2: 3, 3: 4, 4: 4.5, 4.5: 5, 5: 6 };
    const savedStep = vendorRow ? vendorRow.onboarding_step : null;
    const resumeStep = (savedStep !== null && resumeMap[savedStep] !== undefined) ? resumeMap[savedStep] : 1;
    if(resumeStep === 4.5) renderWeddingStylesAndLanguages();
    goStep(resumeStep);
  }catch(e){
    console.error(e);
    showErr(0, e.message || 'Something went wrong — please try again.');
  }finally{
    showLoading(false);
    btn.disabled = false; btn.textContent = 'Continue →';
  }
}


// ═══════════════════════════════════════════════════════════════
// ABN LOOKUP — Australian Business Register free API
// Docs: https://abr.business.gov.au/Tools/WebServices
// ═══════════════════════════════════════════════════════════════
async function lookupABN(){
  const abn = document.getElementById('abnInput').value.trim();
  const resultEl = document.getElementById('abnResult');
  if(abn.length !== 11){ resultEl.innerHTML = '<span style="color:var(--red);font-size:13px;">ABN must be 11 digits</span>'; return; }
  resultEl.innerHTML = '<span class="hint">Checking...</span>';
  try{
    const url = `https://abr.business.gov.au/json/AbnDetails.aspx?abn=${abn}&guid=${ABN_LOOKUP_GUID}`;
    const res = await fetch(url);
    const text = await res.text();
    const jsonStr = text.replace(/^callback\(/, '').replace(/\)$/, '');
    const data = JSON.parse(jsonStr);
    if(data.Abn && data.AbnStatus === 'Active'){
      resultEl.innerHTML = `<span style="color:var(--green);font-size:13px;font-weight:600;">✓ Verified: ${data.EntityName || (data.BusinessName && data.BusinessName[0]) || 'Active business'}</span>`;
      window._abnVerified = true;
    } else {
      resultEl.innerHTML = '<span style="color:var(--red);font-size:13px;">Could not verify this ABN — double check the number, or continue anyway and we\'ll verify manually.</span>';
      window._abnVerified = false;
    }
  }catch(e){
    console.error('ABN lookup failed', e);
    resultEl.innerHTML = '<span class="hint">Could not reach the ABN lookup service right now — you can continue, we\'ll verify manually.</span>';
  }
}

// ═══════════════════════════════════════════════════════════════
// LOCATION SEARCH — real Google Places (New) Autocomplete, same
// pattern as AustralianLocationSearch.tsx in the app
// ═══════════════════════════════════════════════════════════════
const STATE_MAP = {
  'new south wales':'NSW','victoria':'VIC','queensland':'QLD','western australia':'WA',
  'south australia':'SA','tasmania':'TAS','australian capital territory':'ACT','northern territory':'NT',
};
let locDebounce = null;

function setupLocationSearch(inputId, dropdownId, onSelectCallback){
  const input = document.getElementById(inputId);
  const dropdown = document.getElementById(dropdownId);
  input.addEventListener('input', ()=>{
    clearTimeout(locDebounce);
    const text = input.value;
    if(text.length < 2){ dropdown.style.display='none'; return; }
    locDebounce = setTimeout(async ()=>{
      try{
        const res = await fetch('https://places.googleapis.com/v1/places:autocomplete', {
          method:'POST',
          headers:{ 'Content-Type':'application/json', 'X-Goog-Api-Key': GOOGLE_PLACES_API_KEY },
          body: JSON.stringify({
            input: text, includedRegionCodes:['au'],
            includedPrimaryTypes:['locality','sublocality','postal_code','neighborhood'],
          }),
        });
        const data = await res.json();
        const parsed = (data.suggestions||[]).filter(s=>s.placePrediction).map(s=>{
          const p = s.placePrediction;
          const main = (p.structuredFormat && p.structuredFormat.mainText && p.structuredFormat.mainText.text) || (p.text && p.text.text) || '';
          const secondary = (p.structuredFormat && p.structuredFormat.secondaryText && p.structuredFormat.secondaryText.text) || '';
          let state = '';
          for(const part of secondary.split(',')){
            const clean = part.trim().toLowerCase();
            if(STATE_MAP[clean]){ state = STATE_MAP[clean]; break; }
            if(['nsw','vic','qld','wa','sa','tas','act','nt'].includes(clean)){ state = clean.toUpperCase(); break; }
          }
          return { placeId: p.placeId, suburb: main, state };
        }).filter(r=>r.suburb);

        if(parsed.length === 0){ dropdown.style.display='none'; return; }
        dropdown.innerHTML = parsed.map(r=>`<div class="loc-result" data-place-id="${r.placeId}" data-suburb="${r.suburb}" data-state="${r.state}">${r.suburb}${r.state?', '+r.state:''}</div>`).join('');
        dropdown.style.display = 'block';
        dropdown.querySelectorAll('.loc-result').forEach(el=>{
          el.onclick = async ()=>{
            const placeId = el.dataset.placeId, suburb = el.dataset.suburb, state = el.dataset.state;
            input.value = `${suburb}${state?', '+state:''}`;
            dropdown.style.display = 'none';
            try{
              const detRes = await fetch(`https://places.googleapis.com/v1/places/${placeId}`, {
                headers:{ 'X-Goog-Api-Key': GOOGLE_PLACES_API_KEY, 'X-Goog-FieldMask':'location' },
              });
              const det = await detRes.json();
              onSelectCallback({ suburb, state, latitude: det.location ? det.location.latitude : null, longitude: det.location ? det.location.longitude : null });
            }catch(e){
              console.error(e);
              onSelectCallback({ suburb, state, latitude: null, longitude: null });
            }
          };
        });
      }catch(e){ console.error('Location search failed', e); }
    }, 300);
  });
  document.addEventListener('click', (e)=>{
    if(!input.contains(e.target) && !dropdown.contains(e.target)) dropdown.style.display='none';
  });
}

let selectedSuburb = null;
setupLocationSearch('suburbSearch','suburbDropdown', (loc)=>{
  selectedSuburb = loc;
  if(loc.state) document.getElementById('stateSelect').value = loc.state;
});

setupLocationSearch('areaSearch','areaDropdown', (loc)=>{
  if(serviceAreas.some(a=>a.suburb===loc.suburb && a.state===loc.state)) return;
  serviceAreas.push(loc);
  document.getElementById('areaSearch').value = '';
  renderAreaList();
});

// Generic single-select pill group — click toggles the 'sel' class
// and tracks the chosen value in a data attribute on the container.
function setupSinglePillGroup(containerId, dataAttr){
  const container = document.getElementById(containerId);
  if(!container) return;
  container.querySelectorAll('.pill').forEach(p => {
    p.onclick = () => {
      container.querySelectorAll('.pill').forEach(x => x.classList.remove('sel'));
      p.classList.add('sel');
      container.dataset.value = p.dataset[dataAttr];
    };
  });
}
function getSinglePillValue(containerId){
  const el = document.getElementById(containerId);
  return el ? (el.dataset.value || null) : null;
}
[
  ['priceTierPills','tier'], ['travelWillingnessPills','travel'],
  ['businessStructurePills','structure'], ['teamGenderPills','teamgender'],
  ['energyLevelPills','energy'], ['humourLevelPills','humour'],
  ['lgbtqPills','lgbtq'], ['religionPills','religion'],
].forEach(([id, attr]) => setupSinglePillGroup(id, attr));

// Multi-select pills with a max count — used for secondary categories,
// wedding styles, languages
function setupMultiPillGroup(containerId, max){
  const container = document.getElementById(containerId);
  if(!container) return;
  const selected = [];
  container.querySelectorAll('.pill').forEach(p => {
    p.onclick = () => {
      const val = p.dataset.value;
      const idx = selected.indexOf(val);
      if(idx > -1){ selected.splice(idx, 1); p.classList.remove('sel'); }
      else if(!max || selected.length < max){ selected.push(val); p.classList.add('sel'); }
      container.dataset.selected = JSON.stringify(selected);
    };
  });
}
function getMultiPillValues(containerId){
  const el = document.getElementById(containerId);
  if(!el || !el.dataset.selected) return [];
  try{ return JSON.parse(el.dataset.selected); }catch(e){ return []; }
}

const WEDDING_STYLES = [
  {id:'romantic',label:'Romantic'},{id:'boho',label:'Boho'},{id:'modern',label:'Modern'},
  {id:'rustic',label:'Rustic'},{id:'garden',label:'Garden'},{id:'beach',label:'Beach'},
  {id:'luxe',label:'Luxe'},{id:'vintage',label:'Vintage'},{id:'minimalist',label:'Minimalist'},
  {id:'maximalist',label:'Maximalist'},{id:'cultural',label:'Cultural'},{id:'destination',label:'Destination'},
  {id:'micro',label:'Micro / intimate'},{id:'elopement',label:'Elopement'},{id:'country',label:'Country'},
  {id:'dark_moody',label:'Dark & moody'},{id:'industrial',label:'Industrial'},{id:'coastal',label:'Coastal'},
  {id:'art_deco',label:'Art deco'},{id:'whimsical',label:'Whimsical'},
];
const LANGUAGES = [
  {id:'English',label:'English'},{id:'Mandarin',label:'Mandarin'},{id:'Cantonese',label:'Cantonese'},
  {id:'Italian',label:'Italian'},{id:'Greek',label:'Greek'},{id:'Arabic',label:'Arabic'},
  {id:'Hindi',label:'Hindi'},{id:'Vietnamese',label:'Vietnamese'},{id:'Korean',label:'Korean'},
  {id:'Spanish',label:'Spanish'},{id:'French',label:'French'},{id:'Japanese',label:'Japanese'},
  {id:'Portuguese',label:'Portuguese'},{id:'Tagalog',label:'Tagalog'},
];

function renderWeddingStylesAndLanguages(){
  const stylesEl = document.getElementById('weddingStylePills');
  if(stylesEl && !stylesEl.dataset.rendered){
    stylesEl.innerHTML = WEDDING_STYLES.map(s => `<div class="pill" data-value="${s.id}">${s.label}</div>`).join('');
    stylesEl.dataset.rendered = 'true';
    setupMultiPillGroup('weddingStylePills', 5);
  }
  const langEl = document.getElementById('languagePills');
  if(langEl && !langEl.dataset.rendered){
    langEl.innerHTML = LANGUAGES.map(l => `<div class="pill" data-value="${l.id}">${l.label}</div>`).join('');
    langEl.dataset.rendered = 'true';
    setupMultiPillGroup('languagePills', null);
    // English selected by default, matching the real app's default
    const englishPill = langEl.querySelector('[data-value="English"]');
    if(englishPill){ englishPill.click(); }
  }
}

// Secondary categories — populated once the primary category list has
// loaded, excludes whichever category is currently chosen as primary
const CATEGORY_CLUSTERS = [
  ['photographers', 'videographers', 'content-creator', 'drone'],
  ['photo-booths', 'video-booth', 'audio-guestbook'],
  ['dj', 'mc'],
  ['celebrants', 'mc'],
  ['live-band', 'acoustic'],
  ['hair', 'makeup', 'wellness', 'spray-tan', 'barber'],
  ['florists', 'decorations', 'hire', 'lighting', 'signage', 'wedding-stylist'],
  ['cakes', 'dessert-bar', 'catering', 'food-truck', 'bar', 'mobile-bar', 'cigar-bar'],
  ['bridal-gowns', 'bridesmaid-dresses', 'custom-designer'],
  ['jewellery', 'accessories', 'rings'],
  ['stationery', 'favours', 'registry', 'gifts'],
  ['planners', 'coordinator'],
  ['venues', 'accommodation'],
  ['elopement', 'micro-wedding', 'honeymoon'],
];
function getCompatibleSecondarySlugs(primarySlug){
  const out = new Set();
  CATEGORY_CLUSTERS.forEach(cluster => {
    if(cluster.includes(primarySlug)){
      cluster.forEach(s => { if(s !== primarySlug) out.add(s); });
    }
  });
  return out;
}

function renderSecondaryCategoryOptions(){
  const primarySelect = document.getElementById('categorySelect');
  const primaryId = primarySelect.value;
  const primaryCat = categories.find(c => c.id === primaryId);
  const el = document.getElementById('secondaryCategoryPills');
  if(!el) return;
  el.dataset.rendered = '';
  el.dataset.selected = '[]';

  if(!primaryCat){
    el.innerHTML = '<p class="hint">Select a primary category first</p>';
    return;
  }
  const compatible = getCompatibleSecondarySlugs(primaryCat.slug);
  if(compatible.size === 0){
    el.innerHTML = '<p class="hint">No secondary categories apply to this business type</p>';
    return;
  }
  el.innerHTML = categories
    .filter(c => c.id !== primaryId && compatible.has(c.slug))
    .map(c => `<div class="pill" data-value="${c.id}">${c.name}</div>`).join('');
  setupMultiPillGroup('secondaryCategoryPills', 2);
}

// Video upload — same Cloudinary pattern as photos, single file
let uploadedVideoUrl = null;
async function handleVideoUpload(event){
  const file = event.target.files[0];
  if(!file) return;
  const status = document.getElementById('videoUploadStatus');
  status.textContent = 'Uploading video...';
  try{
    const url = await uploadToCloudinary(file, 'video');
    uploadedVideoUrl = url;
    status.textContent = '✓ Video uploaded';
  }catch(e){
    console.error('Video upload failed', e);
    status.textContent = 'Upload failed — please try again';
  }
}

function renderAreaList(){
  const list = document.getElementById('areaList');
  list.innerHTML = serviceAreas.map((a,i)=>`
    <div class="area-row">
      <span>${a.suburb}${a.state?', '+a.state:''}</span>
      <button onclick="removeArea(${i})" type="button">✕</button>
    </div>
  `).join('');
  document.getElementById('areasContinueBtn').disabled = serviceAreas.length === 0;
}
function removeArea(i){ serviceAreas.splice(i,1); renderAreaList(); }

// ═══════════════════════════════════════════════════════════════
// CLOUDINARY UPLOADS — same unsigned-preset pattern as uploadMedia.ts
// ═══════════════════════════════════════════════════════════════
async function uploadToCloudinary(file, resourceType){
  const formData = new FormData();
  formData.append('file', file);
  formData.append('upload_preset', CLOUDINARY_UPLOAD_PRESET);
  formData.append('folder', 'aisle_match/vendors');
  const endpoint = `https://api.cloudinary.com/v1_1/${CLOUDINARY_CLOUD_NAME}/${resourceType}/upload`;
  const res = await fetch(endpoint, { method:'POST', body: formData });
  if(!res.ok) throw new Error('Upload failed');
  const data = await res.json();
  return data.secure_url;
}

async function handlePhotoUpload(event){
  const files = Array.from(event.target.files);
  if(files.length === 0) return;
  const status = document.getElementById('photoUploadStatus');
  for(let i=0;i<files.length;i++){
    if(uploadedPhotoUrls.length >= 12) break;
    status.textContent = `Uploading photo ${i+1} of ${files.length}...`;
    try{
      const url = await uploadToCloudinary(files[i], 'image');
      uploadedPhotoUrls.push(url);
      if(!coverPhotoUrl) coverPhotoUrl = url;
    }catch(e){ console.error('Photo upload failed', e); }
  }
  status.textContent = uploadedPhotoUrls.length + ' photo(s) uploaded';
  renderPhotoGrid();
  event.target.value = '';
}

function renderPhotoGrid(){
  const grid = document.getElementById('photoGrid');
  grid.innerHTML = uploadedPhotoUrls.map((url,i)=>`
    <div class="photo-thumb">
      <img src="${url}">
      <button class="remove" onclick="removePhoto(${i})" type="button">✕</button>
    </div>
  `).join('') + (uploadedPhotoUrls.length < 12 ? '<div class="photo-add" onclick="document.getElementById(\'photoFileInput\').click()">+</div>' : '');
}
function removePhoto(i){
  const removed = uploadedPhotoUrls[i];
  uploadedPhotoUrls.splice(i,1);
  if(coverPhotoUrl === removed) coverPhotoUrl = uploadedPhotoUrls[0] || null;
  renderPhotoGrid();
}

async function handleDocUpload(event, type){
  const file = event.target.files[0];
  if(!file) return;
  const dropEl = document.getElementById(type==='insurance' ? 'insuranceDrop' : 'tcDrop');
  const textEl = document.getElementById(type==='insurance' ? 'insuranceDropText' : 'tcDropText');
  textEl.textContent = 'Uploading...';
  try{
    const url = await uploadToCloudinary(file, 'raw');
    if(type === 'insurance') insuranceUrl = url; else tcUrl = url;
    textEl.textContent = '✓ Uploaded — click to replace';
    dropEl.classList.add('has-file');
  }catch(e){
    console.error('Document upload failed', e);
    textEl.textContent = 'Upload failed — click to try again';
  }
}

// ═══════════════════════════════════════════════════════════════
// STEP 1 — save business basics + ABN + category
// ═══════════════════════════════════════════════════════════════
async function saveStep1(){
  const businessName = document.getElementById('businessName').value.trim();
  const contactName = document.getElementById('contactName').value.trim();
  const phone = document.getElementById('phone').value.trim();
  const suburb = document.getElementById('suburbSearch').value.trim();
  const state = document.getElementById('stateSelect').value;
  const categoryId = document.getElementById('categorySelect').value;
  const yearsActive = document.getElementById('yearsActive').value;
  const abn = document.getElementById('abnInput').value.trim();

  if(!businessName || !contactName || !phone || !suburb || !state || !categoryId || abn.length !== 11){
    showErr(1, 'Please fill in all required fields (marked *), including a valid 11-digit ABN.');
    return;
  }
  showLoading(true, 'Saving...');
  try{
    // Contact name belongs on users (first_name/last_name), not
    // vendor_profiles — matching the real schema, confirmed by this
    // exact error. Splitting the single "Contact name" field on the
    // first space as a reasonable, simple approach.
    const nameParts = contactName.trim().split(' ');
    const firstName = nameParts[0] || contactName;
    const lastName = nameParts.slice(1).join(' ') || null;

    if(!currentUser){
      const { data: newUser, error: userErr } = await sb.from('users').insert({
        email: window._onboardingEmail, user_type: 'vendor', onboarding_completed: false,
        first_name: firstName, last_name: lastName,
      }).select().single();
      if(userErr) throw userErr;
      currentUser = newUser;
    } else {
      const { data: updatedUser, error: userUpdateErr } = await sb.from('users')
        .update({ first_name: firstName, last_name: lastName })
        .eq('id', currentUser.id).select().single();
      if(userUpdateErr) throw userUpdateErr;
      currentUser = updatedUser;
    }
    const vendorPayload = {
      user_id: currentUser.id, business_name: businessName,
      phone_number: phone, suburb: suburb, city: document.getElementById('cityInput').value.trim() || null, state: state,
      years_active: yearsActive ? parseInt(yearsActive) : null,
      abn: abn,
      latitude: selectedSuburb ? selectedSuburb.latitude : null,
      longitude: selectedSuburb ? selectedSuburb.longitude : null,
      onboarding_step: 1,
    };
    if(vendorRow){
      const { data, error } = await sb.from('vendor_profiles').update(vendorPayload).eq('id', vendorRow.id).select().single();
      if(error) throw error; vendorRow = data;
    }else{
      const { data, error } = await sb.from('vendor_profiles').insert(vendorPayload).select().single();
      if(error) throw error; vendorRow = data;
    }
    await sb.from('vendor_category_links').upsert({ vendor_id: vendorRow.id, category_id: categoryId, is_primary: true }, { onConflict:'vendor_id,category_id' });

    const secondaryIds = getMultiPillValues('secondaryCategoryPills');
    for(const secId of secondaryIds){
      await sb.from('vendor_category_links').upsert({ vendor_id: vendorRow.id, category_id: secId, is_primary: false }, { onConflict:'vendor_id,category_id' });
    }

    const referralCode = document.getElementById('referralCodeInput').value.trim().toUpperCase();
    if(referralCode){
      await sb.from('vendor_profiles').update({ referred_by_code: referralCode }).eq('id', vendorRow.id);
    }

    goStep(2);
  }catch(e){
    console.error(e);
    const friendlyMsg = /vendor_profiles_abn_unique/i.test(e.message || '')
      ? 'This ABN is already registered to another Aisle Match account. If you believe this is a mistake, please contact us at chevvy@aislematch.com.au.'
      : 'Could not save — ' + (e.message || 'please try again.');
    showErr(1, friendlyMsg);
  }finally{ showLoading(false); }
}

// ═══════════════════════════════════════════════════════════════
// STEP 2 — profile details + photos
// ═══════════════════════════════════════════════════════════════
async function saveStep2(){
  showLoading(true, 'Saving...');
  try{
    const payload = {
      tagline: document.getElementById('tagline').value.trim() || null,
      bio: document.getElementById('bio').value.trim() || null,
      starting_price: document.getElementById('startingPrice').value ? parseFloat(document.getElementById('startingPrice').value) : null,
      price_range: getSinglePillValue('priceTierPills'),
      website_url: document.getElementById('websiteUrl').value.trim() || null,
      instagram: document.getElementById('instagram').value.trim() || null,
      personality_tags: selectedPersonalityTags,
      portfolio_photos: uploadedPhotoUrls,
      cover_photo_url: coverPhotoUrl,
      portfolio_video_url: uploadedVideoUrl,
      onboarding_step: 2,
    };
    const { data, error } = await sb.from('vendor_profiles').update(payload).eq('id', vendorRow.id).select().single();
    if(error) throw error;
    vendorRow = data;
    goStep(3);
  }catch(e){
    console.error(e);
    showErr(2, 'Could not save — ' + (e.message || 'please try again.'));
  }finally{ showLoading(false); }
}

// ═══════════════════════════════════════════════════════════════
// Service areas + documents — saved when leaving their respective steps
// ═══════════════════════════════════════════════════════════════
async function saveServiceAreas(){
  const australiaWide = document.getElementById('australiaWide').checked;
  const radiusInput = Math.min(parseInt(document.getElementById('serviceRadius').value) || 50, 150);
  const travelWillingness = getSinglePillValue('travelWillingnessPills');
  try{
    await sb.from('vendor_profiles').update({
      services_nationwide: australiaWide,
      service_area_status: document.getElementById('serviceActive').checked ? 'active' : 'inactive',
      travel_willingness: travelWillingness,
      service_radius_km: radiusInput,
    }).eq('id', vendorRow.id);
    if(serviceAreas.length > 0){
      const rows = serviceAreas.map(a => ({
        vendor_id: vendorRow.id, city: a.suburb, state: a.state,
        latitude: a.latitude, longitude: a.longitude, is_active: true, radius_km: radiusInput,
      }));
      await sb.from('vendor_service_areas').insert(rows);
    }
  }catch(e){ console.error('Service area save failed', e); }
}

async function saveDocuments(){
  try{
    const hasInsurance = document.getElementById('hasInsurance').checked;
    const insuranceExpiry = document.getElementById('insuranceExpiry').value || null;
    const hasProfIndemnity = document.getElementById('hasProfIndemnity').checked;
    const profIndemnityExpiry = document.getElementById('profIndemnityExpiry').value || null;
    await sb.from('vendor_profiles').update({
      business_structure: getSinglePillValue('businessStructurePills'),
      public_liability_insurance: hasInsurance,
      public_liability_expiry: hasInsurance ? insuranceExpiry : null,
      professional_indemnity_insurance: hasProfIndemnity,
      professional_indemnity_expiry: hasProfIndemnity ? profIndemnityExpiry : null,
      calendly_url: document.getElementById('calendlyUrl').value.trim() || null,
      tc_document_url: tcUrl, onboarding_step: 4,
    }).eq('id', vendorRow.id);
  }catch(e){ console.error('Document save failed', e); }
}

async function saveVibeAndContinue(){
  showLoading(true, 'Saving...');
  try{
    await sb.from('vendor_profiles').update({
      team_gender: getSinglePillValue('teamGenderPills'),
      energy_level: getSinglePillValue('energyLevelPills'),
      humour_level: getSinglePillValue('humourLevelPills'),
      lgbtq_affirming: getSinglePillValue('lgbtqPills') === 'yes',
      religion_friendly: getSinglePillValue('religionPills') === 'yes',
      wedding_styles: getMultiPillValues('weddingStylePills'),
      languages: getMultiPillValues('languagePills').length ? getMultiPillValues('languagePills') : ['English'],
      onboarding_step: 4.5,
    }).eq('id', vendorRow.id);
    goStep(5);
  }catch(e){
    console.error(e);
    showErr('4-5', 'Could not save — ' + (e.message || 'please try again.'));
  }finally{ showLoading(false); }
}

// ═══════════════════════════════════════════════════════════════
// STEP 5 — Stripe checkout via the real create-checkout Edge Function
// ═══════════════════════════════════════════════════════════════
// Sets a real, user-chosen password on the already-authenticated
// session — this is genuinely necessary, not optional. Without this,
// vendors who signed up through this web page would have no way to
// log into the real mobile app afterward, since the account was
// created with an invisible, randomly-derived password they never
// saw or chose themselves.
async function setRealPassword(){
  const pw = document.getElementById('setPassword').value;
  const pwConfirm = document.getElementById('setPasswordConfirm').value;
  if(pw.length < 8){ showErr(6, 'Password must be at least 8 characters.'); return; }
  if(pw !== pwConfirm){ showErr(6, 'Passwords don\'t match — please try again.'); return; }

  const btn = document.getElementById('setPasswordBtn');
  btn.disabled = true; btn.textContent = 'Saving...';
  try{
    const { error } = await sb.auth.updateUser({ password: pw });
    if(error) throw error;
    document.getElementById('passwordSavedMsg').style.display = 'block';
    btn.style.display = 'none';
    document.getElementById('setPassword').disabled = true;
    document.getElementById('setPasswordConfirm').disabled = true;
  }catch(e){
    console.error(e);
    showErr(6, 'Could not save password — ' + (e.message || 'please try again.'));
  }finally{
    btn.disabled = false; btn.textContent = 'Save password';
  }
}

async function submitBilling(){
  if(!document.getElementById('tcAccept').checked){
    showErr(5, 'Please accept the Terms & Conditions to continue.');
    return;
  }
  if(!stripe || !cardElement){
    showErr(5, 'Payment form is still loading — please wait a moment and try again.');
    return;
  }
  const tier = document.querySelector('input[name=plan]:checked').value;
  const btn = document.getElementById('billingBtn');
  btn.disabled = true; btn.textContent = 'Processing...';
  showLoading(true, 'Setting up your subscription...');
  try{
    // create-checkout requires a genuine authenticated session — it
    // reads auth.uid() from this JWT to know which vendor is billing.
    // The real session was established back at the OTP verify step;
    // this just confirms it's still valid before using it.
    const { data: { session } } = await sb.auth.getSession();
    if(!session) throw new Error('Your session expired — please refresh and verify your email again.');

    const resp = await fetch(`${SUPABASE_URL}/functions/v1/create-checkout`, {
      method:'POST',
      headers:{ 'Content-Type':'application/json', 'Authorization':`Bearer ${session.access_token}` },
      body: JSON.stringify({ tier }),
    });
    const result = await resp.json();

    if(!resp.ok){
      if(result.redirect === 'manage_billing'){
        // A subscription already exists for this account — this can
        // genuinely happen if a previous attempt created the real
        // Stripe subscription server-side, then got interrupted
        // (page closed, network drop) before the client-side card
        // confirmation finished. Check whether it's actually real
        // and active before treating this as an error — if it is,
        // this vendor already succeeded, they just never saw the
        // success screen.
        const { data: freshVendorRow } = await sb.from('vendor_profiles').select('*').eq('id', vendorRow.id).single();
        const genuinelyActive = freshVendorRow && ['active', 'trialing'].includes(freshVendorRow.subscription_status);
        if(genuinelyActive){
          vendorRow = freshVendorRow;
          await sb.from('vendor_profiles').update({ onboarding_step: 5 }).eq('id', vendorRow.id);
          await sb.from('users').update({ onboarding_completed: true }).eq('id', currentUser.id);
          goStep(6);
          return;
        }
        throw new Error('You already have an active subscription for this account. If this seems wrong, contact us at chevvy@aislematch.com.au.');
      }
      throw new Error(result.detail ? `${result.error || 'Checkout failed'}: ${result.detail}` : (result.error || 'Checkout failed'));
    }

    // A trialing subscription returns a SetupIntent (save card, no
    // charge yet); a non-trialing one returns a PaymentIntent (charge
    // now) — same real branching logic as your mobile app.
    const { error: stripeErr } = result.intent_type === 'setup'
      ? await stripe.confirmCardSetup(result.client_secret, { payment_method: { card: cardElement } })
      : await stripe.confirmCardPayment(result.client_secret, { payment_method: { card: cardElement } });
    if(stripeErr) throw stripeErr;

    await sb.from('vendor_profiles').update({ onboarding_step: 5, subscription_tier: tier }).eq('id', vendorRow.id);
    await sb.from('users').update({ onboarding_completed: true }).eq('id', currentUser.id);

    // Notify Kass, Kerri, Chevvy that a real vendor just finished
    // onboarding. Not blocking on this — a failed notification
    // shouldn't stop the vendor from seeing their success screen.
    fetch(`${SUPABASE_URL}/functions/v1/notify-onboarding-complete`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${session.access_token}`,
      },
      body: JSON.stringify({
        business_name: vendorRow.business_name,
        tier: tier,
        is_founding_vendor: vendorRow.is_founding_vendor ?? false,
      }),
    }).catch(err => console.warn('Internal notification failed (non-blocking):', err));

    // If the app opened this page (signalled via ?source=app in the
    // URL), redirect back into the app now that billing succeeded —
    // expo-web-browser's openAuthSessionAsync automatically detects
    // this redirect and closes itself, handing control back to the
    // app. Regular website visitors never see this, since they never
    // arrive with that parameter.
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get('source') === 'app') {
      window.location.href = 'aislematch://billing-success';
      return;
    }

    goStep(6);
  }catch(e){
    console.error(e);
    showErr(5, 'Payment setup failed — ' + (e.message || 'please try again or contact us.'));
  }finally{
    showLoading(false);
    btn.disabled = false; btn.textContent = 'Start free trial →';
  }
}