// Booking Modal — Beratungstermin buchen

const WEEKDAYS_DE = ['So','Mo','Di','Mi','Do','Fr','Sa'];
const WEEKDAYS_EN = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
const MONTHS_DE = ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'];
const MONTHS_EN = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
const WEEKDAYS_FULL_DE = ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'];
const WEEKDAYS_FULL_EN = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
const MONTHS_FULL_DE = ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'];

const generateMeetURL = (date, time) => {
  const slug = `zincutec-beratung-${date}-${time.replace(':','')}`;
  return `https://meet.jit.si/${slug}`;
};

const generateICS = ({ date, time, type, name, email, phone, product, duration }) => {
  const start = new Date(date + 'T' + time + ':00');
  const end = new Date(start.getTime() + duration * 60000);
  const pad = (n) => String(n).padStart(2, '0');
  const toICS = (d) => `${d.getFullYear()}${pad(d.getMonth()+1)}${pad(d.getDate())}T${pad(d.getHours())}${pad(d.getMinutes())}00`;
  const meetURL = generateMeetURL(date, time);

  const summary = type === 'video'
    ? `ZinCuTec Videocall${product ? ' — ' + product : ''}`
    : `ZinCuTec Telefon-Beratung${product ? ' — ' + product : ''}`;

  const desc = type === 'video'
    ? `Videocall-Beratung mit dem ZinCuTec Team.${product ? '\\nProdukt: ' + product : ''}\\n\\nVideocall-Link:\\n${meetURL}\\n\\nEinfach zum vereinbarten Zeitpunkt auf den Link klicken.`
    : `Telefon-Beratung mit dem ZinCuTec Team.${product ? '\\nProdukt: ' + product : ''}${phone ? '\\nWir rufen dich an unter: ' + phone : ''}`;

  const location = type === 'video' ? meetURL : 'Telefon';

  return [
    'BEGIN:VCALENDAR',
    'VERSION:2.0',
    'PRODID:-//ZinCuTec//Booking//DE',
    'CALSCALE:GREGORIAN',
    'METHOD:PUBLISH',
    'BEGIN:VEVENT',
    `DTSTART:${toICS(start)}`,
    `DTEND:${toICS(end)}`,
    `SUMMARY:${summary}`,
    `DESCRIPTION:${desc}`,
    `LOCATION:${location}`,
    `URL:${type === 'video' ? meetURL : 'https://zincutec.eu'}`,
    'ORGANIZER;CN=ZinCuTec:mailto:info@zincutec.de',
    `ATTENDEE;CN=${name}:mailto:${email}`,
    `UID:${Date.now()}-${Math.random().toString(36).slice(2)}@zincutec.de`,
    `DTSTAMP:${toICS(new Date())}`,
    'STATUS:CONFIRMED',
    'BEGIN:VALARM',
    'TRIGGER:-PT30M',
    'ACTION:DISPLAY',
    'DESCRIPTION:ZinCuTec Beratungstermin in 30 Minuten',
    'END:VALARM',
    'END:VEVENT',
    'END:VCALENDAR',
  ].join('\r\n');
};

const downloadICS = (icsContent, filename) => {
  const blob = new Blob([icsContent], { type: 'text/calendar;charset=utf-8' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url; a.download = filename; document.body.appendChild(a); a.click();
  document.body.removeChild(a); URL.revokeObjectURL(url);
};

const BookingModal = ({ open, onClose, product }) => {
  const { lang, t } = useApp();
  const [step, setStep] = React.useState(1);
  const [type, setType] = React.useState('video');
  const [slots, setSlots] = React.useState({});
  const [loading, setLoading] = React.useState(true);
  const [selectedDate, setSelectedDate] = React.useState(null);
  const [selectedTime, setSelectedTime] = React.useState(null);
  const [name, setName] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [phone, setPhone] = React.useState('');
  const [message, setMessage] = React.useState('');
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState('');
  const [done, setDone] = React.useState(false);
  const overlayRef = React.useRef(null);

  React.useEffect(() => {
    if (!open) return;
    setStep(1); setType('video'); setSelectedDate(null); setSelectedTime(null);
    setName(''); setEmail(''); setPhone(''); setMessage(''); setError(''); setDone(false);
    setLoading(true);
    fetch('/api/booking').then(r => r.json()).then(d => {
      setSlots(d.slots || {});
      const dates = Object.keys(d.slots || {});
      if (dates.length) setSelectedDate(dates[0]);
      setLoading(false);
    }).catch(() => setLoading(false));
  }, [open]);

  React.useEffect(() => {
    if (!open) return;
    const onKey = e => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [open]);

  if (!open) return null;

  const dates = Object.keys(slots);
  const timesForDate = selectedDate ? (slots[selectedDate] || []) : [];
  const duration = type === 'video' ? 15 : 10;

  const formatDate = (iso) => {
    const d = new Date(iso + 'T12:00:00Z');
    const wd = lang === 'en' ? WEEKDAYS_EN[d.getUTCDay()] : WEEKDAYS_DE[d.getUTCDay()];
    const wdFull = lang === 'en' ? WEEKDAYS_FULL_EN[d.getUTCDay()] : WEEKDAYS_FULL_DE[d.getUTCDay()];
    const mo = lang === 'en' ? MONTHS_EN[d.getUTCMonth()] : MONTHS_DE[d.getUTCMonth()];
    const moFull = lang === 'en' ? MONTHS_EN[d.getUTCMonth()] : MONTHS_FULL_DE[d.getUTCMonth()];
    return { weekday: wd, weekdayFull: wdFull, day: d.getUTCDate(), month: mo, monthFull: moFull, year: d.getUTCFullYear() };
  };

  const handleSubmit = async () => {
    if (!name.trim() || !email.trim()) { setError(t('Bitte Name und E-Mail ausfüllen.')); return; }
    if (type === 'phone' && !phone.trim()) { setError(t('Bitte Telefonnummer angeben.')); return; }
    setSubmitting(true); setError('');
    try {
      const res = await fetch('/api/booking', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ date: selectedDate, time: selectedTime, type, name: name.trim(), email: email.trim(), phone: phone.trim(), message: message.trim(), product: product?.name || '' }),
      });
      const d = await res.json();
      if (d.ok) { setDone(true); }
      else { setError(d.error || 'Fehler'); }
    } catch { setError('Verbindungsfehler.'); }
    setSubmitting(false);
  };

  const handleDownloadICS = () => {
    const ics = generateICS({ date: selectedDate, time: selectedTime, type, name, email, phone, product: product?.name, duration });
    downloadICS(ics, `zincutec-beratung-${selectedDate}.ics`);
  };

  const fmtDone = selectedDate ? formatDate(selectedDate) : {};

  return ReactDOM.createPortal(
    <div className="bk-overlay" ref={overlayRef} onClick={e => { if (e.target === overlayRef.current) onClose(); }}>
      <div className="bk-modal">
        <button className="bk-close" onClick={onClose}><Icon name="x"/></button>

        {!done && (
          <div className="bk-header">
            <div className="bk-eyebrow">{product ? product.name : 'ZinCuTec'}</div>
            <h2>{t('Beratungstermin')}</h2>
            <p>{t('15 Minuten persönliche Beratung mit unserem Team.')}</p>
            <div className="bk-steps">
              <div className={`bk-step ${step >= 1 ? 'active' : ''}`}><span>1</span>{t('Format')}</div>
              <div className="bk-step-line"/>
              <div className={`bk-step ${step >= 2 ? 'active' : ''}`}><span>2</span>{t('Termin')}</div>
              <div className="bk-step-line"/>
              <div className={`bk-step ${step >= 3 ? 'active' : ''}`}><span>3</span>{t('Kontakt')}</div>
            </div>
          </div>
        )}

        {done ? (
          <div className="bk-done">
            <div className="bk-done-icon"><Icon name="check"/></div>
            <h2>{t('Termin gebucht')}</h2>
            <p>{type === 'video' ? t('Klicke zum vereinbarten Zeitpunkt auf den Videocall-Link.') : t('Wir rufen dich zum vereinbarten Zeitpunkt an.')}</p>
            <div className="bk-done-summary">
              <div><span>{t('Datum')}</span><b>{fmtDone.weekdayFull}, {fmtDone.day}. {fmtDone.monthFull} {fmtDone.year}</b></div>
              <div><span>{t('Uhrzeit')}</span><b>{selectedTime} Uhr</b></div>
              <div><span>{t('Format')}</span><b>{type === 'video' ? 'Videocall' : lang === 'en' ? 'Phone' : 'Telefon'}</b></div>
              {product && <div><span>{t('Produkt')}</span><b>{product.name}</b></div>}
            </div>
            {type === 'video' && selectedDate && selectedTime && (
              <a className="bk-meet-link" href={generateMeetURL(selectedDate, selectedTime)} target="_blank" rel="noopener">
                <Icon name="cam"/> {t('Videocall-Link')}
                <span className="bk-meet-url">{generateMeetURL(selectedDate, selectedTime)}</span>
              </a>
            )}
            <button className="btn brass bk-cal-btn" onClick={handleDownloadICS}>
              <Icon name="mail"/> {t('Zum Kalender hinzufügen')}
            </button>
            <button className="btn sm ghost" style={{width:'100%',justifyContent:'center',marginTop:10}} onClick={onClose}>{t('Schließen')}</button>
          </div>
        ) : step === 1 ? (
          <div className="bk-body">
            <div className="bk-type-grid">
              <button className={`bk-type ${type === 'video' ? 'active' : ''}`} onClick={() => setType('video')}>
                <div className="bk-type-icon"><Icon name="cam"/></div>
                <div className="bk-type-name">Videocall</div>
                <div className="bk-type-dur">15 Min</div>
              </button>
              <button className={`bk-type ${type === 'phone' ? 'active' : ''}`} onClick={() => setType('phone')}>
                <div className="bk-type-icon"><Icon name="phone"/></div>
                <div className="bk-type-name">{lang === 'en' ? 'Phone' : 'Telefon'}</div>
                <div className="bk-type-dur">10 Min</div>
              </button>
            </div>
            {type === 'phone' && (
              <div className="bk-phone-note">
                <Icon name="phone"/> <span>{t('Wir rufen dich zum vereinbarten Termin an.')}</span>
              </div>
            )}
            <button className="btn brass bk-next" onClick={() => setStep(2)}>{t('Weiter')} <Icon name="arrow"/></button>
          </div>
        ) : step === 2 ? (
          <div className="bk-body">
            {loading ? (
              <div className="bk-loading">{t('Termine werden geladen...')}</div>
            ) : dates.length === 0 ? (
              <div className="bk-empty">{t('Aktuell keine Termine verfügbar.')}</div>
            ) : (
              <>
                <div className="bk-dates">
                  {dates.map(d => {
                    const f = formatDate(d);
                    const avail = (slots[d] || []).length;
                    return (
                      <button key={d} className={`bk-date ${selectedDate === d ? 'active' : ''} ${avail === 0 ? 'empty' : ''}`} onClick={() => { setSelectedDate(d); setSelectedTime(null); }} disabled={avail === 0}>
                        <span className="bk-date-wd">{f.weekday}</span>
                        <span className="bk-date-day">{f.day}</span>
                        <span className="bk-date-mo">{f.month}</span>
                        {avail > 0 && <span className="bk-date-avail">{avail} {lang === 'en' ? 'free' : 'frei'}</span>}
                      </button>
                    );
                  })}
                </div>
                {selectedDate && (
                  <div className="bk-times">
                    {timesForDate.map(time => (
                      <button key={time} className={`bk-time ${selectedTime === time ? 'active' : ''}`} onClick={() => setSelectedTime(time)}>
                        {time} Uhr
                      </button>
                    ))}
                  </div>
                )}
              </>
            )}
            <div className="bk-nav">
              <button className="btn sm ghost" onClick={() => setStep(1)}>{t('Zurück')}</button>
              <button className="btn brass bk-next" onClick={() => setStep(3)} disabled={!selectedTime}>{t('Weiter')} <Icon name="arrow"/></button>
            </div>
          </div>
        ) : (
          <div className="bk-body">
            <div className="bk-summary-bar">
              <span>{type === 'video' ? 'Videocall' : (lang === 'en' ? 'Phone' : 'Telefon')}</span>
              <span>·</span>
              <span>{selectedDate && formatDate(selectedDate).weekday} {selectedDate && formatDate(selectedDate).day}. {selectedDate && formatDate(selectedDate).month}</span>
              <span>·</span>
              <span>{selectedTime} Uhr</span>
            </div>
            <label className="bk-field">
              <span>{t('Name')} *</span>
              <input type="text" value={name} onChange={e => setName(e.target.value)} placeholder={lang === 'en' ? 'Your name' : 'Dein Name'}/>
            </label>
            <label className="bk-field">
              <span>{t('E-Mail')} *</span>
              <input type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder={lang === 'en' ? 'your@email.com' : 'deine@email.de'}/>
            </label>
            {type === 'phone' && (
              <label className="bk-field">
                <span>{t('Telefonnummer')} *</span>
                <input type="tel" value={phone} onChange={e => setPhone(e.target.value)} placeholder={lang === 'en' ? 'Your phone number' : 'Deine Telefonnummer'}/>
              </label>
            )}
            <label className="bk-field">
              <span>{t('Nachricht')}<span style={{opacity:0.5,marginLeft:6,fontWeight:400}}>{t('Optional')}</span></span>
              <textarea rows="2" value={message} onChange={e => setMessage(e.target.value)} placeholder={lang === 'en' ? 'What would you like to discuss?' : 'Worüber möchtest du sprechen?'}/>
            </label>
            {error && <div className="bk-error">{error}</div>}
            <div className="bk-nav">
              <button className="btn sm ghost" onClick={() => setStep(2)}>{t('Zurück')}</button>
              <button className="btn brass bk-next" onClick={handleSubmit} disabled={submitting}>
                {submitting ? t('Wird gebucht...') : <>{t('Termin buchen')} <Icon name="check"/></>}
              </button>
            </div>
          </div>
        )}
      </div>
    </div>,
    document.body
  );
};

Object.assign(window, { BookingModal });