// confirmation.jsx — Page 4: Booking Confirmation

function ConfirmationPage({ navigate, formData, booking, tweaks, devMode }) {
  const dt = booking.time ? new Date(booking.time) : (booking.startTime ? new Date(booking.startTime) : null);
  const dateStr = dt
    ? dt.toLocaleDateString("ru-RU", { day: "numeric", month: "long", year: "numeric", weekday: "long" })
    : "—";
  const timeStr = dt
    ? dt.toLocaleTimeString("ru-RU", { hour: "2-digit", minute: "2-digit" })
    : (booking.time || "—");

  const [confirmContent, setConfirmContent] = React.useState(null);
  React.useEffect(() => {
    fetch("/api/confirmation-page")
      .then(r => r.ok ? r.json() : null)
      .then(d => { if (d) setConfirmContent(d); })
      .catch(() => {});
  }, []);
  const cc = confirmContent || {};

  return (
    <div className="page">
      <Header navigate={navigate} />
      <main className="container container-main" style={{flex:1}}>
        <div className="anim-in" style={{maxWidth:760,margin:"0 auto",textAlign:"center"}}>
          <div className="success-check"><Icon.Check/></div>
          <h1 className="h1 mt-24">{cc.heading || "Консультация забронирована!"}</h1>
          <p className="lead mt-16">
            {(() => {
              const tpl = cc.subheading || "Мы отправили детали встречи на {email}. До встречи!";
              const parts = tpl.split("{email}");
              if (parts.length === 1) return tpl;
              return <>{parts[0]}<b style={{color:"var(--ink)"}}>{formData.email || "вашу почту"}</b>{parts[1]}</>;
            })()}
          </p>
        </div>

        {/* Details + prep */}
        <div className="anim-in" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:20,maxWidth:920,margin:"40px auto 0",animationDelay:".05s"}}
             id="conf-grid">

          <div className="card card-pad">
            <div className="eyebrow">Детали консультации</div>
            <h3 className="h3 mt-8">Подтверждение встречи</h3>

            <div className="stack mt-24" style={{gap:14}}>
              <DetailRow icon={<Icon.Calendar/>} label="Дата" value={<span style={{textTransform:"capitalize"}}>{dateStr}</span>}/>
              <DetailRow icon={<Icon.Clock/>} label="Время" value={timeStr}/>
              <DetailRow icon={<Icon.Video/>} label="Формат" value="Онлайн"/>
              <DetailRow icon={<Icon.User/>} label="Консультант" value={cc.consultant_name || "Денис Власин"}/>
            </div>

            <div className="mt-24" style={{padding:"14px 16px",background:"var(--bg-tint)",borderRadius:10,fontSize:13.5,lineHeight:1.55}}>
              <div className="muted" style={{fontSize:12,marginBottom:4}}>Ссылка на встречу</div>
              <span style={{color:"var(--ink-2)"}}>Calendly пришлёт ссылку на ваш email</span>
            </div>
          </div>

          <div className="card card-pad">
            <div className="eyebrow">Что подготовить</div>
            <h3 className="h3 mt-8">{cc.prep_heading || "Перед консультацией"}</h3>

            <ul className="ck mt-24">
              {(cc.prep_bullets || [
                "Ваше резюме / CV — мы уже получили",
                "Документы об образовании (если есть)",
                "Список ваших вопросов",
                "Блокнот и ручка, чтобы делать заметки",
                "Стабильное интернет-соединение",
              ]).map((b, i) => (
                <li key={i}><span className="ico"><Icon.Check/></span>{b}</li>
              ))}
            </ul>

            <div className="mt-24" style={{padding:"14px 16px",background:"#fff7ed",border:"1px solid #fed7aa",borderRadius:10,fontSize:13.5,color:"#9a3412",lineHeight:1.55}}>
              <b style={{display:"block",marginBottom:2,color:"#7c2d12"}}>Если у вас изменятся планы</b>
              {cc.cancellation_policy || "Пожалуйста, сообщите нам не позднее, чем за 24 часа — мы перенесём консультацию бесплатно."}
            </div>
          </div>
        </div>

        <div className="text-c mt-32 muted" style={{fontSize:13.5}}>
          Есть вопросы? Напишите нам в <a href={cc.telegram_url || "https://t.me/kiwieducation"} target="_blank" rel="noopener noreferrer" style={{color:"var(--brand)",fontWeight:600}}><Icon.Telegram style={{width:14,height:14,display:"inline",verticalAlign:"-2px"}}/> Telegram</a> — мы всегда на связи.
        </div>

        {devMode && (
          <div className="text-c mt-16">
            <button className="btn btn-ghost" onClick={() => navigate("payment")} style={{fontSize:13}}>
              <Icon.ArrowLeft style={{width:14,height:14}}/> Начать заново (для демо)
            </button>
          </div>
        )}
      </main>
      <style>{`
        @media (max-width:780px){
          #conf-grid{grid-template-columns:1fr !important}
          .art-grid{grid-template-columns:1fr !important}
        }
      `}</style>
    </div>
  );
}

function DetailRow({ icon, label, value }) {
  return (
    <div className="hstack gap-12">
      <div style={{width:36,height:36,borderRadius:10,background:"var(--brand-soft)",color:"var(--brand)",display:"grid",placeItems:"center",flexShrink:0}}>
        {icon}
      </div>
      <div style={{flex:1,display:"flex",justifyContent:"space-between",alignItems:"center",gap:10}}>
        <span className="muted" style={{fontSize:13}}>{label}</span>
        <b style={{color:"var(--ink)",fontSize:14,fontWeight:600,textAlign:"right"}}>{value}</b>
      </div>
    </div>
  );
}

window.ConfirmationPage = ConfirmationPage;