/* global React */
// Cart + booking flow: shows login prompt if user not logged in,
// then shows a service-specific form (if needed) before adding to cart.

const CC = {
  bg: 'rgb(6,11,24)',
  bgDeep: 'rgb(21,19,49)',
  gold: '#E6C79C',
  goldDark: '#9E7B4B',
  lavender: 'rgb(186,171,212)',
  muted: 'rgb(78,70,114)',
  white: 'rgb(255,255,255)'
};

// Schemas per service slug. `fields` = array of input definitions.
// kind: text | textarea | date | file
const SERVICE_FORMS = {
  stawianietarota: {
    intro: 'Podaj swoje pytania lub sferę życia, którą chcesz poruszyć, aby dobrać dla Ciebie odpowiedni rozkład.',
    fields: [{ name: 'pytanie', label: 'Twoje pytanie lub sfera życia', kind: 'textarea', required: true, rows: 5 }]
  },
  kartywyroczni: {
    intro: 'Napisz, jaką energię, wskazówkę lub intencję chcesz otrzymać podczas odczytu.',
    fields: [{ name: 'intencja', label: 'Energia, wskazówka lub intencja', kind: 'textarea', required: true, rows: 5 }]
  },
  lunarnyportretduszy: {
    intro: 'Te informacje są potrzebne do przygotowania pogłębionego odczytu.',
    fields: [
      { name: 'imiona', label: 'Wszystkie imiona', kind: 'text', required: true },
      { name: 'nazwiska', label: 'Nazwiska (obecne i wcześniejsze)', kind: 'text', required: true },
      { name: 'miejsce', label: 'Miejsce urodzenia', kind: 'text', required: true },
      { name: 'data', label: 'Data urodzenia', kind: 'date', required: true }
    ]
  },
  odczytenergetyczny: {
    intro: 'Te informacje są potrzebne do przygotowania odczytu.',
    fields: [
      { name: 'imiona', label: 'Wszystkie imiona', kind: 'text', required: true },
      { name: 'nazwiska', label: 'Nazwiska', kind: 'text', required: true },
      { name: 'miejsce', label: 'Miejsce urodzenia', kind: 'text', required: true },
      { name: 'data', label: 'Data urodzenia', kind: 'date', required: true }
    ]
  },
  analizaduszy: {
    intro: 'Te informacje są potrzebne do przygotowania analizy.',
    fields: [
      { name: 'imiona', label: 'Wszystkie imiona', kind: 'text', required: true },
      { name: 'nazwiska', label: 'Nazwiska', kind: 'text', required: true },
      { name: 'miejsce', label: 'Miejsce urodzenia', kind: 'text', required: true },
      { name: 'data', label: 'Data urodzenia', kind: 'date', required: true }
    ]
  },
  portretnumerologiczny: {
    intro: 'Numerolog potrzebuje wszystkich imion i nazwisk, którymi się posługujesz oraz Twojej daty urodzenia.',
    fields: [
      { name: 'imie1', label: 'Pierwsze imię', kind: 'text', required: true },
      { name: 'imie2', label: 'Drugie imię', kind: 'text' },
      { name: 'imie3', label: 'Trzecie imię (np. z bierzmowania)', kind: 'text' },
      { name: 'pseudonim', label: 'Ksywka / pseudonim, którego używasz', kind: 'text' },
      { name: 'nazwiska', label: 'Nazwisko / nazwiska', kind: 'text', required: true },
      { name: 'podpis', label: 'Sposób, w jaki się podpisujesz (pełne imię i nazwisko / inny podpis)', kind: 'text', required: true },
      { name: 'data', label: 'Data urodzenia', kind: 'date', required: true }
    ]
  },
  nadawanieimionwzmacniajacych: {
    intro: 'Numerolog potrzebuje pełnego zestawu imion oraz nazwisk, których używasz na co dzień.',
    fields: [
      { name: 'imiona', label: 'Wszystkie imiona', kind: 'text', required: true },
      { name: 'nazwiska', label: 'Wszystkie nazwiska', kind: 'text', required: true },
      { name: 'pseudonim', label: 'Pseudonim / nazwa artystyczna (jeśli używasz)', kind: 'text' }
    ]
  },
  biznesowakonsultacjanumerologiczna: {
    intro: 'Numerolog potrzebuje pełnych danych właściciela firmy oraz danych samej firmy.',
    fields: [
      { name: 'imionaWlasciciela', label: 'Wszystkie imiona właściciela firmy', kind: 'text', required: true },
      { name: 'nazwiskaWlasciciela', label: 'Wszystkie nazwiska właściciela firmy', kind: 'text', required: true },
      { name: 'nazwaFirmy', label: 'Nazwa firmy', kind: 'text', required: true },
      { name: 'dataZalozenia', label: 'Data założenia firmy', kind: 'date', required: true }
    ]
  },
  tworzeniebindrun: {
    intro: 'Opisz proszę intencję, którą chcesz wzmocnić. Na podstawie Twojej intencji stworzę bindrunę, która będzie wspierać Cię energetycznie w wybranym obszarze. Możesz napisać jedno zdanie lub kilka słów — najważniejsze, żeby jasno oddawały Twój cel.',
    fields: [{ name: 'intencja', label: 'Twoja intencja', kind: 'textarea', required: true, rows: 5 }]
  },
  kosmogram: {
    intro: 'Dla precyzyjnej analizy potrzebne są dokładne dane urodzenia.',
    fields: [
      { name: 'data', label: 'Data urodzenia', kind: 'date', required: true },
      { name: 'godzina', label: 'Dokładna godzina urodzenia', kind: 'time', required: true },
      { name: 'miejsce', label: 'Miejsce urodzenia', kind: 'text', required: true }
    ]
  },
  astrokartografia: {
    intro: 'Dla precyzyjnej analizy potrzebne są dokładne dane urodzenia.',
    fields: [
      { name: 'data', label: 'Data urodzenia', kind: 'date', required: true },
      { name: 'godzina', label: 'Dokładna godzina urodzenia', kind: 'time', required: true },
      { name: 'miejsce', label: 'Miejsce urodzenia', kind: 'text', required: true }
    ]
  },
  analizadloni: {
    intro: 'Prześlij dokładne zdjęcia obu dłoni od wewnątrz, w dobrym świetle. Najlepiej jako jpg/png.',
    fields: [
      { name: 'lewa', label: 'Zdjęcie lewej dłoni (od wewnątrz)', kind: 'file', accept: 'image/*', required: true },
      { name: 'prawa', label: 'Zdjęcie prawej dłoni (od wewnątrz)', kind: 'file', accept: 'image/*', required: true }
    ]
  },
  kosmogramiAstrokartografia: {
    intro: 'Dla obu analiz potrzebne są dokładne dane urodzenia.',
    fields: [
      { name: 'data',    label: 'Data urodzenia',             kind: 'date', required: true },
      { name: 'godzina', label: 'Dokładna godzina urodzenia', kind: 'time', required: true },
      { name: 'miejsce', label: 'Miejsce urodzenia',          kind: 'text', required: true }
    ]
  }
};

// Ceny mirrorują cennik w Stripe (https://dashboard.stripe.com/products).
// Te wartości są tylko do wyświetlania w UI / koszyku.
// Realna kwota płatności jest sourced server-side z Stripe Price obiektu
// przez api/checkout.js — STRIPE_PRICE_IDS jest źródłem prawdy.
const SERVICE_PRICES = {
  stawianietarota: 169,
  kartywyroczni: 169,
  lunarnyportretduszy: 222,
  odczytenergetyczny: 333,
  analizaduszy: 333,
  portretnumerologiczny: 666,
  nadawanieimionwzmacniajacych: 444,
  biznesowakonsultacjanumerologiczna: 369,
  tworzeniebindrun: 55,
  kosmogram: 222,
  astrokartografia: 144,
  analizadloni: 222,
  kosmogramiAstrokartografia: 444
};

const SERVICE_EXPERTS = {
  stawianietarota: 'Konstancja Zahmala Lumia',
  kartywyroczni: 'Karolina Mardoll Kułakowska',
  lunarnyportretduszy: 'Konstancja Zahmala Lumia',
  odczytenergetyczny: 'Konstancja Zahmala Lumia',
  analizaduszy: 'Karolina Mardoll Kułakowska',
  portretnumerologiczny: 'Tomasz Buniek',
  nadawanieimionwzmacniajacych: 'Tomasz Buniek',
  biznesowakonsultacjanumerologiczna: 'Tomasz Buniek',
  tworzeniebindrun: 'Tomasz Buniek',
  kosmogram: 'Olga Konieczna',
  astrokartografia: 'Olga Konieczna',
  analizadloni: 'Karol Majewski',
  kosmogramiAstrokartografia: 'Olga Konieczna'
};

const SERVICE_LABELS = {
  stawianietarota: 'Stawianie Tarota',
  kartywyroczni: 'Karty Wyroczni',
  lunarnyportretduszy: 'Lunarny Portret Duszy',
  odczytenergetyczny: 'Odczyt Energetyczny',
  analizaduszy: 'Analiza Duszy',
  portretnumerologiczny: 'Portret Numerologiczny',
  nadawanieimionwzmacniajacych: 'Nadawanie Imion Wzmacniających',
  biznesowakonsultacjanumerologiczna: 'Biznesowa Konsultacja Numerologiczna',
  tworzeniebindrun: 'Tworzenie Bindrun',
  kosmogram: 'Kosmogram',
  astrokartografia: 'Astrokartografia',
  analizadloni: 'Analiza Dłoni',
  kosmogramiAstrokartografia: 'Kosmogram i Astrokartografia'
};

function _currentSlug() {
  return (typeof window !== 'undefined' && window.SERVICE_SLUG) || null;
}

function addItemToCart(item) {
  // Backend-backed cart. Returns true if a user is logged in (UI shows confirmation
  // immediately); the actual write runs async and resolves to the server.
  const u = (typeof window !== 'undefined' && window.getCurrentUser && window.getCurrentUser()) || null;
  if (!u) return false;
  (async () => {
    try {
      const cur = await fetch('/api/cart', { credentials: 'include' }).then((r) => r.json());
      const items = Array.isArray(cur.items) ? cur.items : [];
      items.push(item);
      await fetch('/api/cart', {
        method: 'PUT', credentials: 'include',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ items })
      });
    } catch (e) { console.error('[cart] add failed', e); }
  })();
  return true;
}

// Generic modal shell
function CartModal({ open, onClose, children, title }) {
  React.useEffect(() => {
    if (!open) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = prev; };
  }, [open]);
  if (!open) return null;
  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, zIndex: 200,
      background: 'rgba(6,11,24,0.85)',
      backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 20, animation: 'cm-fade .2s ease both'
    }}>
      <style>{`
        @keyframes cm-fade { from { opacity: 0; } to { opacity: 1; } }
        @keyframes cm-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
      `}</style>
      <div onClick={(e) => e.stopPropagation()} style={{
        position: 'relative', maxWidth: 560, width: '100%',
        maxHeight: '90vh', overflowY: 'auto',
        background: CC.bg, border: `1px solid ${CC.muted}`,
        borderRadius: 16, padding: 40,
        animation: 'cm-pop .25s ease both'
      }}>
        <button onClick={onClose} aria-label="Zamknij" style={{
          position: 'absolute', top: 16, right: 16,
          width: 36, height: 36, borderRadius: '50%',
          background: 'rgba(78,70,114,0.3)', border: 'none',
          color: CC.lavender, fontSize: 18, cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center'
        }}>×</button>
        {title &&
          <h2 style={{
            margin: '0 0 24px', fontFamily: 'Playfair Display',
            fontWeight: 400, fontSize: 28, color: CC.white,
            letterSpacing: '-0.022em', paddingRight: 32
          }}>{title}</h2>
        }
        {children}
      </div>
    </div>);
}

// Login-required modal
function LoginPromptModal({ open, onClose, serviceLabel }) {
  return (
    <CartModal open={open} onClose={onClose} title="Zaloguj się, aby zamówić">
      <p style={{
        margin: '0 0 20px', fontFamily: 'Nunito', fontSize: 15, lineHeight: 1.6,
        color: CC.lavender
      }}>
        Aby dodać <span style={{ color: CC.white }}>{serviceLabel}</span> do koszyka, zaloguj się lub załóż konto. Dzięki temu zachowasz historię zamówień i będziemy mogli się z Tobą skontaktować.
      </p>
      <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
        <BtnMain href="login.html">Zaloguj się</BtnMain>
        <BtnSecond href="login.html">Załóż konto</BtnSecond>
      </div>
    </CartModal>);
}

// Service form modal
function ServiceFormModal({ open, onClose, slug, onSubmit }) {
  const schema = SERVICE_FORMS[slug];
  const [values, setValues] = React.useState({});
  const [error, setError] = React.useState('');
  const label = SERVICE_LABELS[slug] || 'Usługa';

  React.useEffect(() => { if (open) { setValues({}); setError(''); } }, [open, slug]);

  if (!schema) return null;

  const inputStyle = {
    padding: '12px 16px', borderRadius: 8,
    background: 'rgba(21,19,49,0.6)',
    border: `1px solid ${CC.muted}`,
    fontFamily: 'Nunito', fontSize: 15, color: CC.white,
    outline: 'none', width: '100%', boxSizing: 'border-box',
    colorScheme: 'dark'
  };

  const setField = (name, v) => setValues((vv) => ({ ...vv, [name]: v }));

  const submit = (e) => {
    e.preventDefault();
    for (const f of schema.fields) {
      if (f.required) {
        const v = values[f.name];
        if (f.kind === 'file' ? !v : !(v && String(v).trim())) {
          setError('Wypełnij wszystkie wymagane pola.');
          return;
        }
      }
    }
    setError('');
    // Files: store only filename in cart (real upload would happen server-side).
    const cleaned = {};
    for (const f of schema.fields) {
      const v = values[f.name];
      if (f.kind === 'file' && v) cleaned[f.name] = (v.name || 'plik');
      else cleaned[f.name] = v || '';
    }
    onSubmit(cleaned);
  };

  return (
    <CartModal open={open} onClose={onClose} title={`Umawiasz: ${label}`}>
      <p style={{
        margin: '0 0 24px', fontFamily: 'Nunito', fontSize: 15, lineHeight: 1.6,
        color: CC.lavender
      }}>{schema.intro}</p>
      <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        {schema.fields.map((f) =>
          <label key={f.name} style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <span style={{
              fontFamily: 'Nunito', fontSize: 12, letterSpacing: '0.08em',
              textTransform: 'uppercase', color: CC.muted, fontWeight: 600
            }}>{f.label}{f.required && <span style={{ color: CC.gold }}> *</span>}</span>
            {f.kind === 'textarea' ?
              <textarea
                value={values[f.name] || ''}
                rows={f.rows || 4}
                onChange={(e) => setField(f.name, e.target.value)}
                style={{ ...inputStyle, resize: 'vertical', fontFamily: 'Nunito' }} /> :
              f.kind === 'file' ?
                <input
                  type="file"
                  accept={f.accept || ''}
                  onChange={(e) => setField(f.name, e.target.files && e.target.files[0])}
                  style={{ ...inputStyle, padding: '10px 12px' }} /> :
                <input
                  type={f.kind}
                  value={values[f.name] || ''}
                  onChange={(e) => setField(f.name, e.target.value)}
                  style={inputStyle} />
            }
          </label>
        )}
        {error && <div style={{ fontFamily: 'Nunito', fontSize: 14, color: '#f49b9b' }}>{error}</div>}
        <div style={{ marginTop: 8, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <BtnMain>Dodaj do koszyka</BtnMain>
          <BtnSecond onClick={onClose}>Anuluj</BtnSecond>
        </div>
      </form>
    </CartModal>);
}

// Success modal
function CartAddedModal({ open, onClose, serviceLabel }) {
  return (
    <CartModal open={open} onClose={onClose} title="Dodano do koszyka">
      <p style={{
        margin: '0 0 24px', fontFamily: 'Nunito', fontSize: 15, lineHeight: 1.6,
        color: CC.lavender
      }}><span style={{ color: CC.white }}>{serviceLabel}</span> czeka teraz w Twoim koszyku.</p>
      <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
        <BtnMain href="koszyk.html">Przejdź do koszyka</BtnMain>
        <BtnSecond onClick={onClose}>Wróć do strony</BtnSecond>
      </div>
    </CartModal>);
}

// Main BookButton — replaces "Umów usługę" CTA
function BookButton({ slug, children = 'Umów usługę', small, style, variant = 'main' }) {
  const [stage, setStage] = React.useState(null); // 'login' | 'form' | 'added' | null
  const user = (typeof window !== 'undefined' && window.useCurrentUser) ? window.useCurrentUser() : null;

  const effectiveSlug = slug || _currentSlug();
  const label = SERVICE_LABELS[effectiveSlug] || 'Usługa';

  const onClick = (e) => {
    if (e && e.preventDefault) e.preventDefault();
    if (!user) { setStage('login'); return; }
    if (SERVICE_FORMS[effectiveSlug]) { setStage('form'); return; }
    finalizeAdd({});
  };

  const finalizeAdd = (data) => {
    addItemToCart({
      id: effectiveSlug,
      service: SERVICE_LABELS[effectiveSlug] || effectiveSlug,
      expert: SERVICE_EXPERTS[effectiveSlug] || '',
      price: SERVICE_PRICES[effectiveSlug] || 0,
      details: data,
      addedAt: new Date().toISOString()
    });
    setStage('added');
  };

  const Btn = variant === 'second' ? BtnSecond : BtnMain;

  return (
    <>
      <Btn onClick={onClick} small={small} style={style}>{children}</Btn>
      <LoginPromptModal open={stage === 'login'} onClose={() => setStage(null)} serviceLabel={label} />
      <ServiceFormModal open={stage === 'form'} onClose={() => setStage(null)} slug={effectiveSlug} onSubmit={finalizeAdd} />
      <CartAddedModal open={stage === 'added'} onClose={() => setStage(null)} serviceLabel={label} />
    </>);
}

Object.assign(window, { BookButton, addItemToCart, SERVICE_FORMS, SERVICE_LABELS, SERVICE_PRICES, SERVICE_EXPERTS });