/* ─────────────────────────────────────────────────
   Screens — Home, Classes, Online, Profile (Rose theme)
   Mirrors render/home.rs · classes.rs · online.rs · profile.rs
   ───────────────────────────────────────────────── */

const PAD_X = 24;
const GAP = 12;

/* ============ HOME SCREEN ============ */

function HomeScreen({ goto, openClass, openNews, openCourse }) {
  return (
    <div style={{position:"relative", paddingBottom: 80}}>
      {/* Z-line: left strip top */}
      <div style={{position:"absolute", left:0, top:0, width:10, bottom:"60%", background:ROSE.accent}}/>
      {/* Z-line: right strip bottom */}
      <div style={{position:"absolute", right:0, top:"50%", width:6, bottom:0, background:ROSE.accent}}/>

      <div style={{padding:`${GAP}px ${PAD_X}px`}}>
        {/* —— individual classes —— */}
        <SectionTitle>individual classes</SectionTitle>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:8, marginBottom: GAP*2}}>
          <ChoiceCard pastel="#a7f3d0" title="Онлайн"  sub="По видеосвязи" onClick={()=>openClass(9001)} />
          <ChoiceCard pastel="#f9a8d4" title="В студии" sub="Лично"        onClick={()=>openClass(9002)} />
        </div>

        {/* —— group classes —— */}
        <SectionTitle>group classes</SectionTitle>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:8, marginBottom: GAP*2}}>
          <ChoiceCard pastel="#fed7aa" title="Один раз"   sub="Разовое занятие" onClick={()=>goto("classes","single")} />
          <ChoiceCard pastel="#bbf7d0" title="Абонемент"  sub="Еженедельно"     onClick={()=>goto("classes","subscription")} />
        </div>

        {/* —— continue learning —— */}
        <SectionTitle>continue learning</SectionTitle>
        <div style={{marginBottom: GAP*2}}>
          {COURSES.filter(c=>c.purchased).map(c=>(
            <ContinueCourseCard key={c.id} course={c} onClick={()=>openCourse(c.id)} />
          ))}
        </div>
      </div>

      {/* studio news bar — full bleed */}
      <div style={{
        background: ROSE.accent, color:"#fff",
        height:32, display:"flex", alignItems:"center",
        padding:`0 ${PAD_X}px`, fontFamily:"'Nunito',sans-serif",
        fontWeight:900, fontSize:14,
      }}>
        studio news
      </div>

      <div style={{padding:`${GAP}px ${PAD_X}px`}}>
        {NEWS.map(n=>(
          <NewsCard key={n.id} article={n} onClick={()=>openNews(n.id)} />
        ))}
      </div>
    </div>
  );
}

function SectionTitle({children}) {
  return (
    <div style={{
      fontFamily:"'Nunito',sans-serif", fontWeight:900, fontSize:18,
      color: ROSE.accent, marginBottom: 12, textTransform:"lowercase",
    }}>{children}</div>
  );
}

function ChoiceCard({ pastel, title, sub, onClick }) {
  return (
    <LandingCard pastel={pastel} onClick={onClick} style={{height:90}}>
      <div style={{display:"flex", flexDirection:"column", height:"100%", justifyContent:"space-between"}}>
        <div>
          <div style={{fontFamily:"'Nunito',sans-serif", fontWeight:900, fontSize:16, color:ROSE.textPrimary}}>{title}</div>
          <div style={{fontFamily:"'Space Mono',monospace", fontSize:12, color:ROSE.textMuted, marginTop:2}}>{sub}</div>
        </div>
        <div style={{fontFamily:"'Space Mono',monospace", fontWeight:700, fontSize:12, color:ROSE.accent}}>
          Записаться →
        </div>
      </div>
    </LandingCard>
  );
}

function ContinueCourseCard({ course, onClick }) {
  return (
    <LandingCard
      pastel={PASTEL[course.colorIdx]}
      onClick={onClick}
      style={{height:120, marginBottom: GAP, padding:0}}
    >
      <div style={{display:"flex", height:"100%", padding:14}}>
        <div style={{
          width:60, display:"flex", alignItems:"center", justifyContent:"center",
        }}>
          <PlayIcon color="#fff" size={28} />
        </div>
        <div style={{flex:1, paddingLeft:10, display:"flex", flexDirection:"column", gap:2, justifyContent:"center"}}>
          <div style={{fontFamily:"'Space Mono',monospace", fontWeight:700, fontSize:14, color:ROSE.textPrimary}}>
            {course.title}
          </div>
          <div style={{fontFamily:"'Space Mono',monospace", fontSize:12, color:ROSE.textSecondary}}>
            {course.instructor}
          </div>
          <div style={{fontFamily:"'Space Mono',monospace", fontSize:11, color:ROSE.textSecondary}}>
            {Math.floor(course.durationMin/60)}h {course.durationMin%60}m total
          </div>
        </div>
        <div style={{display:"flex", alignItems:"flex-end", color:ROSE.accent, fontFamily:"'Space Mono',monospace", fontWeight:700, fontSize:12, gap:4}}>
          Continue →
        </div>
      </div>
    </LandingCard>
  );
}

function PlayIcon({color="#fff", size=24}){
  return (
    <div style={{
      width:size, height:size, borderRadius:"50%",
      background:"rgba(255,255,255,0.6)",
      display:"flex", alignItems:"center", justifyContent:"center",
    }}>
      <svg width={size*0.5} height={size*0.5} viewBox="0 0 12 12">
        <path d="M3 1l8 5-8 5z" fill={color}/>
      </svg>
    </div>
  );
}

function NewsCard({ article, onClick }) {
  const badgeBg = newsBadgeColor(article.category);
  return (
    <LandingCard pastel={badgeBg} onClick={onClick} style={{height:120, marginBottom: GAP}}>
      <div style={{display:"flex", flexDirection:"column", height:"100%", gap:6}}>
        {/* badge pill */}
        <div style={{
          alignSelf:"flex-start",
          background: badgeBg,
          padding:"4px 12px", borderRadius:12,
          fontFamily:"'Space Mono',monospace", fontWeight:700, fontSize:11,
          color:"#2d2d2d",
        }}>
          {article.category.toLowerCase()}
        </div>
        <div style={{fontFamily:"'Space Mono',monospace", fontWeight:700, fontSize:14, color:"#2d2d2d"}}>
          {article.title.toLowerCase()}
        </div>
        <div style={{fontFamily:"'Space Mono',monospace", fontSize:12, color:ROSE.textSecondary, flex:1}}>
          {article.summary}
        </div>
        <div style={{fontFamily:"'Space Mono',monospace", fontWeight:700, fontSize:12, color:ROSE.accent}}>
          read more →
        </div>
      </div>
    </LandingCard>
  );
}

/* ============ CLASSES SCREEN ============ */

function ClassesScreen({ openClass }) {
  const [selectedDay, setSelectedDay] = useState(29);
  const month = "Apr";
  const year = 2026;

  // Apr 2026: 1st = Wed (DOW 2 in Mon-first), 30 days
  const firstDow = 2;
  const daysInMonth = 30;
  const todayDay = 29;

  const cells = [];
  for (let i=0; i<firstDow; i++) cells.push(null);
  for (let d=1; d<=daysInMonth; d++) cells.push(d);
  while (cells.length % 7) cells.push(null);

  return (
    <div style={{position:"relative", paddingBottom: 80}}>
      {/* —— Calendar —— */}
      <div style={{padding:`${GAP}px ${PAD_X}px`}}>
        {/* nav */}
        <div style={{display:"flex", alignItems:"center", justifyContent:"space-between", marginBottom:14}}>
          <button style={navBtn}>‹</button>
          <div style={{fontFamily:"'Nunito',sans-serif", fontWeight:900, fontSize:18, color:ROSE.accent}}>
            April 2026
          </div>
          <button style={navBtn}>›</button>
        </div>
        {/* DOW header */}
        <div style={{display:"grid", gridTemplateColumns:"repeat(7,1fr)", gap:2, marginBottom:6}}>
          {["Пн","Вт","Ср","Чт","Пт","Сб","Вс"].map(d=>(
            <div key={d} style={{textAlign:"center", fontFamily:"'Space Mono',monospace", fontSize:10, color:ROSE.textSecondary, fontWeight:700}}>{d}</div>
          ))}
        </div>
        {/* day cells */}
        <div style={{display:"grid", gridTemplateColumns:"repeat(7,1fr)", gap:2}}>
          {cells.map((d,i)=>{
            if (!d) return <div key={i} style={{height:38}}/>;
            const isSelected = d === selectedDay;
            const isToday = d === todayDay;
            const hasClasses = [3,5,7,10,12,14,17,19,21,24,26,28,29].includes(d);
            return (
              <div key={i} onClick={()=>setSelectedDay(d)}
                style={{
                  height:38, position:"relative",
                  display:"flex", alignItems:"center", justifyContent:"center",
                  borderRadius:10,
                  background: isSelected ? ROSE.accent : (isToday ? "rgba(233,30,140,0.15)" : "transparent"),
                  color: isSelected ? "#fff" : (isToday ? ROSE.accent : ROSE.textPrimary),
                  fontFamily:"'Space Mono',monospace", fontWeight: isToday||isSelected ? 700 : 500, fontSize:13,
                  cursor:"pointer",
                }}>
                {d}
                {hasClasses && !isSelected && (
                  <div style={{
                    position:"absolute", bottom:4, left:"50%", transform:"translateX(-50%)",
                    width:4, height:4, borderRadius:"50%", background: ROSE.accent,
                  }}/>
                )}
              </div>
            );
          })}
        </div>
      </div>

      {/* —— classes bar —— */}
      <div style={{
        background: ROSE.accent, color:"#fff",
        height:32, display:"flex", alignItems:"center",
        padding:`0 ${PAD_X}px`, fontFamily:"'Nunito',sans-serif",
        fontWeight:900, fontSize:14, marginTop:8,
      }}>
        classes — {month.toLowerCase()} {selectedDay}
      </div>

      {/* —— class list —— */}
      <div style={{padding:`${GAP}px ${PAD_X}px`}}>
        {CLASSES.map(c=>(
          <MiniClassCard key={c.id} cls={c} onClick={()=>openClass(c.id)} />
        ))}
      </div>

      {/* Z-lines (mirrored) */}
      <div style={{position:"absolute", right:0, top:0, width:6, height:"45%", background:ROSE.accent}}/>
      <div style={{position:"absolute", left:0, top:"55%", width:10, bottom:0, background:ROSE.accent}}/>
    </div>
  );
}

const navBtn = {
  width:32, height:32, borderRadius:"50%",
  background:"#fff", border:`1px solid ${ROSE.divider}`,
  color: ROSE.accent, fontSize:18, cursor:"pointer", fontWeight:700,
};

function MiniClassCard({ cls, onClick }) {
  const pastel = classCategoryColor(cls.name);
  const spotsFree = cls.spotsTotal - cls.spotsTaken;
  const spotsStr = spotsFree<=0 ? "Мест нет" : `ещё ${spotsFree}`;

  return (
    <LandingCard pastel={pastel} onClick={onClick} style={{height:80, marginBottom: GAP, padding:"10px 18px"}}>
      <div style={{display:"flex", justifyContent:"space-between", height:"100%"}}>
        <div style={{display:"flex", flexDirection:"column", justifyContent:"space-between"}}>
          <div style={{fontFamily:"'Nunito',sans-serif", fontWeight:900, fontSize:30, color:"#2d2d2d", lineHeight:1}}>
            {cls.time}
          </div>
          <div style={{fontFamily:"'Nunito',sans-serif", fontWeight:900, fontSize:15, color:"#2d2d2d"}}>
            {cls.name.toLowerCase()}
          </div>
        </div>
        <div style={{display:"flex", flexDirection:"column", justifyContent:"space-between", alignItems:"flex-end", textAlign:"right"}}>
          <div style={{fontFamily:"'Space Mono',monospace", fontSize:11, color:"#fff"}}>{cls.duration}min</div>
          <div>
            <div style={{fontFamily:"'Space Mono',monospace", fontSize:11, color:"#2d2d2d", marginBottom:2}}>{spotsStr}</div>
            <div style={{fontFamily:"'Space Mono',monospace", fontSize:11, color:"#fff"}}>{cls.teacher.toLowerCase()}</div>
          </div>
        </div>
      </div>
    </LandingCard>
  );
}

/* ============ ONLINE SCREEN ============ */

function OnlineScreen({ openCourse }) {
  return (
    <div style={{position:"relative", paddingBottom:80}}>
      {/* Z-line top-left */}
      <div style={{position:"absolute", left:0, top:0, width:10, bottom:"50%", background:ROSE.accent}}/>
      <div style={{position:"absolute", right:0, top:"50%", width:6, bottom:0, background:ROSE.accent}}/>

      <div style={{padding:`${GAP}px ${PAD_X}px`}}>
        <SectionTitle>online courses</SectionTitle>
        {COURSES.map(c=>(
          <CourseCard key={c.id} course={c} onClick={()=>openCourse(c.id)} />
        ))}
      </div>
    </div>
  );
}

function CourseCard({ course, onClick }) {
  const pastel = PASTEL[course.colorIdx];
  return (
    <LandingCard pastel={pastel} onClick={onClick} style={{height:120, marginBottom: GAP, padding:0}}>
      <div style={{display:"flex", height:"100%", padding:14}}>
        <div style={{
          width:60, display:"flex", alignItems:"center", justifyContent:"center",
        }}>
          <PlayIcon color="#fff" size={32} />
        </div>
        <div style={{flex:1, paddingLeft:10, display:"flex", flexDirection:"column", gap:3, justifyContent:"center"}}>
          {course.purchased && (
            <div style={{
              alignSelf:"flex-start",
              background:"rgba(219,39,119,0.15)", color: ROSE.success,
              padding:"2px 8px", borderRadius:5,
              fontFamily:"'Space Mono',monospace", fontWeight:700, fontSize:9, letterSpacing:"0.5px",
            }}>
              PURCHASED
            </div>
          )}
          <div style={{fontFamily:"'Space Mono',monospace", fontWeight:700, fontSize:14, color:ROSE.textPrimary}}>
            {course.title}
          </div>
          <div style={{fontFamily:"'Space Mono',monospace", fontSize:12, color:ROSE.textSecondary}}>
            {course.instructor} · {course.category}
          </div>
          <div style={{fontFamily:"'Space Mono',monospace", fontSize:11, color:ROSE.textSecondary}}>
            {Math.floor(course.durationMin/60)}h {course.durationMin%60}m total
          </div>
        </div>
        <div style={{display:"flex", alignItems:"flex-end", color:ROSE.accent, fontFamily:"'Space Mono',monospace", fontWeight:700, fontSize:12}}>
          {course.purchased ? "Continue →" : "Buy →"}
        </div>
      </div>
    </LandingCard>
  );
}

/* ============ PROFILE SCREEN ============ */

function ProfileScreen() {
  const [tab, setTab] = useState("bookings");

  return (
    <div style={{position:"relative", paddingBottom:80}}>
      {/* fixed header */}
      <div style={{
        background: ROSE.accent, color:"#fff",
        padding:"24px 24px 18px",
      }}>
        <div style={{display:"flex", gap:14, alignItems:"center"}}>
          <div style={{
            width:54, height:54, borderRadius:"50%",
            background:"#fff", color: ROSE.accent,
            display:"flex", alignItems:"center", justifyContent:"center",
            fontFamily:"'Nunito',sans-serif", fontWeight:900, fontSize:22,
          }}>А</div>
          <div>
            <div style={{fontFamily:"'Nunito',sans-serif", fontWeight:900, fontSize:20}}>Анна К.</div>
            <div style={{fontFamily:"'Space Mono',monospace", fontSize:12, opacity:0.9}}>@anna_yoga</div>
          </div>
        </div>
        <div style={{
          marginTop:14, padding:"10px 12px",
          background:"rgba(255,255,255,0.2)", borderRadius:12,
          fontFamily:"'Space Mono',monospace", fontSize:12, color:"#fff",
          display:"flex", justifyContent:"space-between",
        }}>
          <span>Абонемент 12 занятий</span>
          <span style={{fontWeight:700}}>осталось 7</span>
        </div>
      </div>

      {/* sub-tabs */}
      <div style={{
        display:"flex", height:44, background:"#fff",
        borderBottom: `1px solid ${ROSE.divider}`,
      }}>
        {[
          {id:"bookings", label:"записи"},
          {id:"payments", label:"платежи"},
          {id:"settings", label:"настройки"},
        ].map(t=>{
          const isActive = tab===t.id;
          return (
            <div key={t.id} onClick={()=>setTab(t.id)} style={{
              flex:1, display:"flex", alignItems:"center", justifyContent:"center",
              fontFamily:"'Nunito',sans-serif", fontWeight:900, fontSize:13,
              color: isActive ? ROSE.accent : ROSE.textSecondary,
              borderBottom: isActive ? `2px solid ${ROSE.accent}` : "2px solid transparent",
              cursor:"pointer",
            }}>{t.label}</div>
          );
        })}
      </div>

      <div style={{padding:`${GAP*2}px ${PAD_X}px`}}>
        {tab==="bookings" && <BookingsList/>}
        {tab==="payments" && <PaymentsList/>}
        {tab==="settings" && <SettingsList/>}
      </div>
    </div>
  );
}

function BookingsList(){
  const items = [
    { id:1, name:"Виньяса флоу", teacher:"Алена", date:"29 apr", time:"08:00", status:"confirmed" },
    { id:2, name:"Инь-йога",     teacher:"Маша",  date:"24 apr", time:"10:30", status:"attended" },
    { id:3, name:"Аштанга",      teacher:"Денис", date:"22 apr", time:"12:00", status:"attended" },
  ];
  return (
    <div>
      {items.map(b=>(
        <LandingCard key={b.id} pastel={classCategoryColor(b.name)} style={{marginBottom: GAP, padding:"12px 16px"}}>
          <div style={{display:"flex", justifyContent:"space-between", alignItems:"center"}}>
            <div>
              <div style={{fontFamily:"'Nunito',sans-serif", fontWeight:900, fontSize:15, color:"#2d2d2d"}}>
                {b.name.toLowerCase()}
              </div>
              <div style={{fontFamily:"'Space Mono',monospace", fontSize:12, color:ROSE.textMuted, marginTop:2}}>
                {b.teacher.toLowerCase()} · {b.date} · {b.time}
              </div>
            </div>
            <div style={{
              padding:"4px 10px", borderRadius:12,
              background: b.status==="confirmed" ? "#fff" : "rgba(255,255,255,0.5)",
              color: b.status==="confirmed" ? ROSE.accent : ROSE.textMuted,
              fontFamily:"'Space Mono',monospace", fontWeight:700, fontSize:10,
            }}>
              {b.status === "confirmed" ? "записано" : "посещено"}
            </div>
          </div>
        </LandingCard>
      ))}
    </div>
  );
}

function PaymentsList(){
  const items = [
    { id:1, desc:"Абонемент 12 занятий", date:"5 apr 2026", amount:"-9 600₽", status:"Completed" },
    { id:2, desc:"Виньяса флоу",         date:"22 apr 2026", amount:"-1 200₽", status:"Completed" },
    { id:3, desc:"Курс «Утренняя йога»", date:"15 mar 2026", amount:"-2 400₽", status:"Completed" },
  ];
  return (
    <div>
      {items.map(t=>(
        <GlassCard key={t.id} style={{marginBottom: GAP, padding:"12px 16px"}}>
          <div style={{display:"flex", justifyContent:"space-between", alignItems:"center"}}>
            <div>
              <div style={{fontFamily:"'Space Mono',monospace", fontWeight:700, fontSize:13, color:ROSE.textPrimary}}>{t.desc}</div>
              <div style={{fontFamily:"'Space Mono',monospace", fontSize:11, color:ROSE.textSecondary, marginTop:2}}>{t.date}</div>
            </div>
            <div style={{fontFamily:"'Nunito',sans-serif", fontWeight:900, fontSize:15, color:ROSE.accent}}>{t.amount}</div>
          </div>
        </GlassCard>
      ))}
    </div>
  );
}

function SettingsList(){
  const [t, setT] = useState([true,false,true]);
  const labels = ["Напоминания о занятиях", "Промо-предложения", "Новые курсы"];
  return (
    <div>
      {labels.map((l,i)=>(
        <GlassCard key={i} style={{marginBottom: GAP, padding:"12px 16px"}}>
          <div style={{display:"flex", justifyContent:"space-between", alignItems:"center"}}>
            <div style={{fontFamily:"'Space Mono',monospace", fontSize:13, color:ROSE.textPrimary}}>{l}</div>
            <div onClick={()=>setT(p=>p.map((v,j)=>j===i?!v:v))}
              style={{
                width:44, height:24, borderRadius:12,
                background: t[i] ? ROSE.accent : "#d1d1d6",
                position:"relative", cursor:"pointer", transition:"background .2s",
              }}>
              <div style={{
                position:"absolute", top:2, left: t[i]?22:2,
                width:20, height:20, borderRadius:"50%", background:"#fff",
                transition:"left .2s", boxShadow:"0 1px 2px rgba(0,0,0,0.1)",
              }}/>
            </div>
          </div>
        </GlassCard>
      ))}
      <button style={{
        marginTop: GAP*2, width:"100%", padding:"14px",
        background:"#fff", border:`1.5px solid ${ROSE.accent}`,
        borderRadius:24, color: ROSE.accent,
        fontFamily:"'Nunito',sans-serif", fontWeight:900, fontSize:14,
        cursor:"pointer",
      }}>
        выйти
      </button>
    </div>
  );
}

Object.assign(window, {
  HomeScreen, ClassesScreen, OnlineScreen, ProfileScreen,
  PAD_X, GAP, SectionTitle,
});