/* Booking.jsx — Multi-step appointment form */

function Booking() {
  const { lang } = useLang();
  const ar = lang === 'ar';
  const [step, setStep] = React.useState(1);
  const [data, setData] = React.useState({
    service: '', date: '', time: '', name: '', phone: '', notes: '',
  });
  const set = (k, v) => setData(d => ({ ...d, [k]: v }));

  const services = ar
    ? [['checkup','فحص شامل وتنظيف'],['whitening','تبييض الأسنان'],['invisalign','تقويم إنفيزالاين'],['rootcanal','علاج الجذور'],['implant','زراعة'],['ped','طب أسنان الأطفال'],['consult','استشارة عامة']]
    : [['checkup','Check-up & clean'],['whitening','Whitening'],['invisalign','Invisalign consult'],['rootcanal','Root canal'],['implant','Implant consult'],['ped','Pediatric'],['consult','General consult']];

  // generate dates (next 14 days)
  const today = new Date();
  const days = Array.from({length: 14}, (_, i) => {
    const d = new Date(today);
    d.setDate(today.getDate() + i);
    return d;
  });
  const dayLabel = (d) => {
    if (ar) {
      const names = ['الأحد','الاثنين','الثلاثاء','الأربعاء','الخميس','الجمعة','السبت'];
      const m = ['يناير','فبراير','مارس','أبريل','مايو','يونيو','يوليو','أغسطس','سبتمبر','أكتوبر','نوفمبر','ديسمبر'];
      return { d: d.getDate(), m: m[d.getMonth()], w: names[d.getDay()] };
    }
    const w = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'][d.getDay()];
    const m = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'][d.getMonth()];
    return { d: d.getDate(), m, w };
  };
  const times = ['09:00','10:30','12:00','14:00','15:30','17:00','18:30','20:00'];

  const stepNames = ar ? ['الخدمة','الموعد','بياناتك','التأكيد'] : ['Service','When','Details','Confirm'];

  const canNext = (
    (step === 1 && data.service) ||
    (step === 2 && data.date && data.time) ||
    (step === 3 && data.name && data.phone)
  );

  return (
    <main>
      <section className="page-hero container">
        <Reveal><Eyebrow>{ar?'احجز':'Book'}</Eyebrow></Reveal>
        <Reveal delay={120} as="h1">{ar?'احجز موعدك.':'Book a visit.'}</Reveal>
        <Reveal delay={280}>
          <p className="lede">
            {ar?'أربع خطوات قصيرة. سنتصل بك خلال ساعتين لتأكيد الموعد.':'Four short steps. We\'ll call within two hours to confirm.'}
          </p>
        </Reveal>
      </section>

      <section className="section container">
        <Reveal>
          {/* Stepper */}
          <div className="stepper">
            {stepNames.map((n,i) => (
              <div key={i} className={`step ${step > i+1 ? 'done' : ''} ${step === i+1 ? 'active' : ''}`}>
                <div className="step-num">{i+1}</div>
                <div className="step-label">{n}</div>
              </div>
            ))}
          </div>
        </Reveal>

        <div className="book-card">
          {step === 1 && (
            <Reveal>
              <h2 className="book-h">{ar?'ما هي الخدمة التي تحتاجها؟':'What do you need?'}</h2>
              <div className="service-pick">
                {services.map(([id,l]) => (
                  <button key={id} className={`spi ${data.service===id?'on':''}`} onClick={()=>set('service',id)}>
                    <span className="spi-l">{l}</span>
                    {data.service===id && <span className="spi-check">✓</span>}
                  </button>
                ))}
              </div>
            </Reveal>
          )}

          {step === 2 && (
            <Reveal>
              <h2 className="book-h">{ar?'متى يناسبك؟':'When works?'}</h2>
              <div className="cal-strip">
                {days.map((d,i)=>{
                  const dl = dayLabel(d);
                  const key = d.toISOString().slice(0,10);
                  return (
                    <button key={key} className={`day ${data.date===key?'on':''}`} onClick={()=>set('date',key)}>
                      <span className="day-w">{dl.w}</span>
                      <span className="day-d">{dl.d}</span>
                      <span className="day-m">{dl.m}</span>
                    </button>
                  );
                })}
              </div>
              <h3 className="book-subh">{ar?'الوقت':'Time'}</h3>
              <div className="time-grid">
                {times.map(t => (
                  <button key={t} className={`tslot ${data.time===t?'on':''}`} onClick={()=>set('time',t)}>{t}</button>
                ))}
              </div>
            </Reveal>
          )}

          {step === 3 && (
            <Reveal>
              <h2 className="book-h">{ar?'بياناتك':'Your details'}</h2>
              <div className="form-grid">
                <div className="field"><label>{ar?'الاسم':'Name'}</label><input value={data.name} onChange={e=>set('name',e.target.value)} placeholder={ar?'الاسم الكامل':'Full name'}/></div>
                <div className="field"><label>{ar?'رقم الهاتف':'Phone'}</label><input value={data.phone} onChange={e=>set('phone',e.target.value)} placeholder="+966 5X XXX XXXX" dir="ltr"/></div>
                <div className="field" style={{gridColumn:'1 / -1'}}><label>{ar?'ملاحظات (اختياري)':'Notes (optional)'}</label><textarea rows="3" value={data.notes} onChange={e=>set('notes',e.target.value)} placeholder={ar?'مثلاً: حالة سابقة، حساسية، إلخ':'e.g. existing condition, allergy, etc.'}></textarea></div>
              </div>
            </Reveal>
          )}

          {step === 4 && (
            <Reveal>
              <h2 className="book-h">{ar?'تأكيد':'Confirmed'}</h2>
              <div className="confirm">
                <div className="confirm-check">
                  <svg viewBox="0 0 64 64" width="56" height="56" fill="none">
                    <circle cx="32" cy="32" r="30" stroke="currentColor" strokeWidth="1.5"/>
                    <path d="M20 33 L29 42 L45 24" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </div>
                <p className="confirm-text">
                  {ar
                    ? <>تم استلام طلبك يا <b>{data.name||'صديقنا'}</b>. سنتصل بك على {data.phone||'رقمك'} خلال ساعتين لتأكيد الموعد.</>
                    : <>Got it, <b>{data.name||'friend'}</b>. We'll call {data.phone||'you'} within two hours to confirm.</>}
                </p>
                <div className="confirm-meta">
                  <div><span>{ar?'الخدمة':'Service'}</span><b>{(services.find(s=>s[0]===data.service)||[,'—'])[1]}</b></div>
                  <div><span>{ar?'التاريخ':'Date'}</span><b>{data.date || '—'}</b></div>
                  <div><span>{ar?'الوقت':'Time'}</span><b>{data.time || '—'}</b></div>
                </div>
              </div>
            </Reveal>
          )}

          {/* Nav */}
          <div className="book-nav">
            {step > 1 && step < 4 && (
              <button className="btn btn-ghost" onClick={()=>setStep(step-1)}>{ar?'← السابق':'← Back'}</button>
            )}
            {step < 4 && (
              <button className="btn btn-primary" disabled={!canNext} onClick={()=>setStep(step+1)}>
                {step === 3 ? (ar?'إرسال الحجز':'Submit booking') : (ar?'التالي':'Next')}
              </button>
            )}
            {step === 4 && (
              <button className="btn btn-secondary" onClick={()=>{setStep(1);setData({service:'',date:'',time:'',name:'',phone:'',notes:''});}}>
                {ar?'حجز جديد':'New booking'}
              </button>
            )}
          </div>
        </div>
      </section>
    </main>
  );
}

window.Booking = Booking;