const monthName = (d) => ["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"][d.getMonth()];

const Booking = () => {
  const today = new Date();
  const [view, setView] = React.useState(new Date(today.getFullYear(), today.getMonth(), 1));
  const [selDay, setSelDay] = React.useState(today.getDate() + 3);
  const [selSlot, setSelSlot] = React.useState("14:00");
  const [service, setService] = React.useState("Маникюр + покрытие");
  const [form, setForm] = React.useState({ name:"", phone:"", note:"" });
  const [sent, setSent] = React.useState(false);

  const firstDay = new Date(view.getFullYear(), view.getMonth(), 1).getDay();
  const daysInMonth = new Date(view.getFullYear(), view.getMonth() + 1, 0).getDate();
  const offset = (firstDay === 0 ? 7 : firstDay) - 1;
  const dows = ["Пн","Вт","Ср","Чт","Пт","Сб","Вс"];

  const busyDays = [8, 14, 15, 22];
  const slots = ["10:00","11:30","14:00","16:00","18:00","19:30"];
  const busySlots = ["11:30","18:00"];

  const changeMonth = (dir) => {
    const n = new Date(view.getFullYear(), view.getMonth() + dir, 1);
    setView(n);
  };

  const submit = (e) => { e.preventDefault(); setSent(true); };

  return (
    <section className="section shell" id="booking">
      <div className="section-head">
        <div>
          <div className="overline">Онлайн-запись</div>
          <h2>Выберите время,<br/>остальное — <em style={{fontFamily:"var(--serif)",fontStyle:"italic",color:"var(--olive)"}}>моя забота</em>.</h2>
        </div>
        <p>После отправки формы я напишу в WhatsApp в течение часа и подтвержу запись. Предоплата не требуется.</p>
      </div>

      {sent ? (
        <div style={{background:"var(--paper)", borderRadius:"var(--r-xl)", padding:"80px 40px", textAlign:"center", border:"1px solid var(--line)"}}>
          <div style={{width:72,height:72,borderRadius:"50%",background:"var(--blush)",display:"grid",placeItems:"center",margin:"0 auto 24px",color:"var(--rose-ink)"}}>
            <Icon name="check" size={28}/>
          </div>
          <h3 style={{fontSize:36}}>Заявка принята — спасибо!</h3>
          <p style={{color:"var(--ink-2)", marginTop:16, fontSize:17}}>Напишу вам в WhatsApp на <b>{form.phone || "указанный номер"}</b><br/>и подтвержу запись на {selDay} {monthName(view).toLowerCase()} в {selSlot}.</p>
          <button className="btn btn-ghost" style={{marginTop:32}} onClick={()=>setSent(false)}>← Вернуться</button>
        </div>
      ) : (
      <div className="book">
        <form className="book-form" onSubmit={submit}>
          <div>
            <label>Услуга</label>
            <select value={service} onChange={e=>setService(e.target.value)}>
              <option>Японский маникюр</option>
              <option>Маникюр + покрытие</option>
              <option>Авторский дизайн</option>
              <option>Педикюр комбинированный</option>
              <option>Наращивание форм</option>
              <option>Не знаю — подскажете</option>
            </select>
          </div>
          <div>
            <label>Как к вам обращаться?</label>
            <input required value={form.name} onChange={e=>setForm({...form, name:e.target.value})} placeholder="Ваше имя"/>
          </div>
          <div>
            <label>Телефон / Telegram</label>
            <input required value={form.phone} onChange={e=>setForm({...form, phone:e.target.value})} placeholder="+7 или @username"/>
          </div>
          <div>
            <label>Пожелания по дизайну</label>
            <textarea value={form.note} onChange={e=>setForm({...form, note:e.target.value})} placeholder="Можно ссылкой на Pinterest или описанием — нежно, в тёплых тонах и т.д."/>
          </div>
          <div style={{marginTop:8, padding:20, background:"var(--bg)", borderRadius:"var(--r-md)", fontSize:14, color:"var(--ink-2)", display:"flex", gap:16, alignItems:"center"}}>
            <Icon name="calendar" size={18}/>
            <div>Вы выбрали: <b>{selDay} {monthName(view).toLowerCase()}</b> в <b>{selSlot}</b></div>
          </div>
          <button type="submit" className="btn btn-ink" style={{marginTop:8}}>
            Записаться <Icon name="arrowUpRight" size={14}/>
          </button>
          <div style={{fontSize:11, color:"var(--muted)", textAlign:"center"}}>
            Нажимая кнопку, вы соглашаетесь на обработку персональных данных.
          </div>
        </form>

        <div className="cal">
          <div className="cal-head">
            <div className="mth">{monthName(view)} <span style={{color:"var(--muted)"}}>{view.getFullYear()}</span></div>
            <div className="cal-nav">
              <button onClick={()=>changeMonth(-1)}><Icon name="chevL" size={14}/></button>
              <button onClick={()=>changeMonth(1)}><Icon name="chevR" size={14}/></button>
            </div>
          </div>
          <div className="cal-days">
            {dows.map(d => <div key={d} className="dow">{d}</div>)}
            {Array.from({length: offset}).map((_, i) => <div key={"e"+i} className="cal-day muted"/>)}
            {Array.from({length: daysInMonth}).map((_, i) => {
              const day = i + 1;
              const busy = busyDays.includes(day);
              const past = view.getMonth()===today.getMonth() && view.getFullYear()===today.getFullYear() && day < today.getDate();
              const isToday = view.getMonth()===today.getMonth() && view.getFullYear()===today.getFullYear() && day === today.getDate();
              const sel = day === selDay;
              return (
                <button key={day}
                  className={`cal-day ${busy?"busy":""} ${past?"muted":""} ${isToday?"today":""} ${sel?"selected":""}`}
                  disabled={busy || past}
                  onClick={()=>setSelDay(day)}>
                  {day}
                </button>
              );
            })}
          </div>
          <div style={{fontSize:12, color:"var(--muted)", marginTop:20, fontFamily:"var(--mono)", letterSpacing:".1em", textTransform:"uppercase"}}>
            Свободное время — {selDay} {monthName(view).toLowerCase()}
          </div>
          <div className="cal-slots">
            {slots.map(s => (
              <button key={s}
                className={`cal-slot ${selSlot===s?"selected":""}`}
                disabled={busySlots.includes(s)}
                onClick={()=>setSelSlot(s)}>
                {s}
              </button>
            ))}
          </div>
        </div>
      </div>
      )}
    </section>
  );
};

Object.assign(window, { Booking });