import { supabase, type Service, type LocationServed } from './lib/supabase';

async function fetchServices(): Promise<Service[]> {
  const { data, error } = await supabase
    .from('services')
    .select('*')
    .eq('is_active', true)
    .order('display_order', { ascending: true });
  if (error) {
    console.error('Failed to load services:', error.message);
    return [];
  }
  return data as Service[];
}

async function fetchLocations(): Promise<LocationServed[]> {
  const { data, error } = await supabase
    .from('locations_served')
    .select('*')
    .eq('is_active', true)
    .order('display_order', { ascending: true });
  if (error) {
    console.error('Failed to load locations:', error.message);
    return [];
  }
  return data as LocationServed[];
}

function populateServiceSelect(select: HTMLSelectElement, services: Service[]) {
  if (services.length === 0) return;
  select.innerHTML = '<option value="">Select a service</option>' +
    services.map(s => `<option value="${s.slug}">${s.name}</option>`).join('');
}

function populateLocations(container: HTMLElement, locations: LocationServed[]) {
  if (locations.length === 0) return;
  container.innerHTML = locations.map(loc => `
    <div class="loc-item">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
      <span>${loc.name}</span>
    </div>
  `).join('');
}

type FormStatus = 'idle' | 'submitting' | 'success' | 'error';

function setStatus(el: HTMLElement, status: FormStatus, msg?: string) {
  el.className = 'form-status ' + status;
  el.textContent = msg ?? '';
  el.hidden = status === 'idle';
}

async function handleBookingSubmit(form: HTMLFormElement, statusEl: HTMLElement) {
  const formData = new FormData(form);
  const name = (formData.get('name') as string | '').trim();
  const phone = (formData.get('phone') as string | '').trim();
  const serviceSlug = (formData.get('service') as string | '').trim() || null;
  const preferredDate = (formData.get('date') as string | '').trim() || null;
  const preferredTime = (formData.get('time') as string | '').trim() || null;
  const notes = (formData.get('notes') as string | '').trim() || null;

  if (!name || !phone) {
    setStatus(statusEl, 'error', 'Please enter your name and phone number.');
    return;
  }

  setStatus(statusEl, 'submitting', 'Submitting your request...');

  const { error } = await supabase.from('bookings').insert({
    name,
    phone,
    service_slug: serviceSlug,
    preferred_date: preferredDate,
    preferred_time: preferredTime,
    notes,
  });

  if (error) {
    setStatus(statusEl, 'error', 'Something went wrong. Please try again or message us on WhatsApp.');
    return;
  }

  setStatus(statusEl, 'success', 'Thank you! Your booking request has been received. We will contact you shortly.');
  form.reset();
}

async function init() {
  const serviceSelect = document.getElementById('booking-service') as HTMLSelectElement | null;
  const locContainer = document.getElementById('loc-grid');
  const bookingForm = document.getElementById('booking-form') as HTMLFormElement | null;
  const statusEl = document.getElementById('booking-status') as HTMLElement | null;

  if (serviceSelect) {
    const services = await fetchServices();
    populateServiceSelect(serviceSelect, services);
  }

  if (locContainer) {
    const locations = await fetchLocations();
    populateLocations(locContainer, locations);
  }

  if (bookingForm && statusEl) {
    bookingForm.addEventListener('submit', (e) => {
      e.preventDefault();
      void handleBookingSubmit(bookingForm, statusEl);
    });
  }
}

void init();