/* ─────────────────────────────────────────────────
   Configurator — pick body × pick tab bar
   ───────────────────────────────────────────────── */

/* The "01" home is the canonical HomeScreen + RoseTabBar. Wrap it so it can
   accept a custom tab bar via render prop, matching the V02..V21 contract. */
function HomeV01({ customTabBar }) {
  const [tab, setTab] = React.useState("home");
  const noop = ()=>{};
  return (
    <div style={{position:"relative", width:"100%", height:"100%", background:ROSE.contentBg, overflow:"hidden"}}>
      <div style={{position:"absolute", inset:0, paddingBottom:72, overflowY:"auto"}}>
        {tab==="home"    && <HomeScreen    goto={(s)=>setTab(s)} openClass={noop} openNews={noop} openCourse={noop}/>}
        {tab==="classes" && <ClassesScreen openClass={noop}/>}
        {tab==="online"  && <OnlineScreen  openCourse={noop}/>}
        {tab==="profile" && <ProfileScreen/>}
      </div>
      {customTabBar
        ? customTabBar({ active: tab, onChange: setTab })
        : <RoseTabBar active={tab} onChange={setTab}/>}
    </div>
  );
}

/* All home variants in one ordered array. Each entry: render fn that accepts
   { customTabBar } so the configurator can override the bar. The V02..V21
   variants don't accept a prop directly — we wrap them in TabBarOverride to
   inject via context. */
const HOME_VARIANTS = [
  { n:"01", name:"исходный",  Render: ({customTabBar}) => <HomeV01 customTabBar={customTabBar}/> },
  { n:"02", name:"список",     Render: ({customTabBar}) => <TabBarOverride render={customTabBar}><HomeV02/></TabBarOverride> },
  { n:"03", name:"журнал",     Render: ({customTabBar}) => <TabBarOverride render={customTabBar}><HomeV03/></TabBarOverride> },
  { n:"04", name:"брутал",     Render: ({customTabBar}) => <TabBarOverride render={customTabBar}><HomeV04/></TabBarOverride> },
  { n:"05", name:"подушки",    Render: ({customTabBar}) => <TabBarOverride render={customTabBar}><HomeV05/></TabBarOverride> },
  { n:"06", name:"неон",       Render: ({customTabBar}) => <TabBarOverride render={customTabBar}><HomeV06/></TabBarOverride> },
  { n:"07", name:"истории",    Render: ({customTabBar}) => <TabBarOverride render={customTabBar}><HomeV07/></TabBarOverride> },
  { n:"08", name:"бенто",      Render: ({customTabBar}) => <TabBarOverride render={customTabBar}><HomeV08/></TabBarOverride> },
  { n:"09", name:"таймлайн",   Render: ({customTabBar}) => <TabBarOverride render={customTabBar}><HomeV09/></TabBarOverride> },
  { n:"10", name:"орбита",     Render: ({customTabBar}) => <TabBarOverride render={customTabBar}><HomeV10/></TabBarOverride> },
  { n:"11", name:"спа",        Render: ({customTabBar}) => <TabBarOverride render={customTabBar}><HomeV11/></TabBarOverride> },
  { n:"12", name:"плитки",     Render: ({customTabBar}) => <TabBarOverride render={customTabBar}><HomeV12/></TabBarOverride> },
  { n:"13", name:"автомат",    Render: ({customTabBar}) => <TabBarOverride render={customTabBar}><HomeV13/></TabBarOverride> },
  { n:"14", name:"ленты",      Render: ({customTabBar}) => <TabBarOverride render={customTabBar}><HomeV14/></TabBarOverride> },
  { n:"15", name:"типо",       Render: ({customTabBar}) => <TabBarOverride render={customTabBar}><HomeV15/></TabBarOverride> },
  { n:"16", name:"стикербук",  Render: ({customTabBar}) => <TabBarOverride render={customTabBar}><HomeV16/></TabBarOverride> },
  { n:"17", name:"таблица",    Render: ({customTabBar}) => <TabBarOverride render={customTabBar}><HomeV17/></TabBarOverride> },
  { n:"18", name:"герой",      Render: ({customTabBar}) => <TabBarOverride render={customTabBar}><HomeV18/></TabBarOverride> },
  { n:"19", name:"плакат",     Render: ({customTabBar}) => <TabBarOverride render={customTabBar}><HomeV19/></TabBarOverride> },
  { n:"20", name:"привычки",   Render: ({customTabBar}) => <TabBarOverride render={customTabBar}><HomeV20/></TabBarOverride> },
  { n:"21", name:"учителя",    Render: ({customTabBar}) => <TabBarOverride render={customTabBar}><HomeV21/></TabBarOverride> },
];

function Configurator() {
  const [bodyN, setBodyN] = React.useState("01");
  const [tabN,  setTabN]  = React.useState("01");

  const body = HOME_VARIANTS.find(v=>v.n===bodyN);
  const tab  = TAB_VARIANTS.find(v=>v.n===tabN);
  const TabBarComp = tab.Comp;

  const customTabBar = ({active,onChange}) => <TabBarComp active={active} onChange={onChange}/>;

  return (
    <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 460px",gap:32,alignItems:"start"}}>

      {/* Body picker */}
      <div>
        <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,color:"#9d6b8a",letterSpacing:"0.18em",fontWeight:700,textTransform:"uppercase",marginBottom:10}}>тело · 21 вариант</div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(7,1fr)",gap:6}}>
          {HOME_VARIANTS.map(v=>{
            const a = v.n===bodyN;
            return (
              <button key={v.n} onClick={()=>setBodyN(v.n)} style={{
                border:a?"none":"1px solid #f0c8dc",
                background:a?"#e91e8c":"#fff",
                color:a?"#fff":"#9d6b8a",
                borderRadius:10,padding:"10px 4px",cursor:"pointer",
                fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:13,letterSpacing:"-0.02em",
                boxShadow:a?"0 3px 0 rgba(233,30,140,0.3)":"0 1px 0 rgba(233,30,140,0.08)",
                display:"flex",flexDirection:"column",alignItems:"center",gap:2,
              }}>
                <span>{v.n}</span>
              </button>
            );
          })}
        </div>
        <div style={{marginTop:12,padding:"10px 12px",background:"#fff",borderRadius:10,border:"1px solid #f0c8dc"}}>
          <div style={{fontFamily:"'Space Mono',monospace",fontSize:9,color:"#9d6b8a",letterSpacing:"0.14em",textTransform:"uppercase"}}>выбрано тело · {body.n}</div>
          <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:18,color:"#2d2d2d",letterSpacing:"-0.02em",marginTop:2}}>{body.name}</div>
        </div>
      </div>

      {/* Tab bar picker */}
      <div>
        <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,color:"#9d6b8a",letterSpacing:"0.18em",fontWeight:700,textTransform:"uppercase",marginBottom:10}}>таб-бар · 20 вариантов</div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(7,1fr)",gap:6}}>
          {TAB_VARIANTS.map(v=>{
            const a = v.n===tabN;
            return (
              <button key={v.n} onClick={()=>setTabN(v.n)} style={{
                border:a?"none":"1px solid #f0c8dc",
                background:a?"#e91e8c":"#fff",
                color:a?"#fff":"#9d6b8a",
                borderRadius:10,padding:"10px 4px",cursor:"pointer",
                fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:13,letterSpacing:"-0.02em",
                boxShadow:a?"0 3px 0 rgba(233,30,140,0.3)":"0 1px 0 rgba(233,30,140,0.08)",
              }}>{v.n}</button>
            );
          })}
        </div>
        <div style={{marginTop:12,padding:"10px 12px",background:"#fff",borderRadius:10,border:"1px solid #f0c8dc"}}>
          <div style={{fontFamily:"'Space Mono',monospace",fontSize:9,color:"#9d6b8a",letterSpacing:"0.14em",textTransform:"uppercase"}}>выбран таб-бар · {tab.n}</div>
          <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:18,color:"#2d2d2d",letterSpacing:"-0.02em",marginTop:2}}>{tab.name}</div>
          <div style={{fontFamily:"'Space Mono',monospace",fontSize:11,color:"#9d6b8a",marginTop:6,lineHeight:1.5}}>{tab.desc}</div>
        </div>
      </div>

      {/* Live phone */}
      <div style={{justifySelf:"end"}}>
        <IOSDevice width={402} height={874} dark={false}>
          <body.Render customTabBar={customTabBar}/>
        </IOSDevice>
      </div>
    </div>
  );
}

Object.assign(window, { Configurator, HOME_VARIANTS });