/* SkinJourney UI Kit — main screens: Home, Timeline, Settings, WeeklySummary */
const Cm = window.SJ.c, Rm = window.SJ.r, ELEVm = window.SJ.elev, FONTm = window.SJ.font;

const WEEKS = [
  { id:'w12', label:'12 אוק׳', week:12, tint:3, angles:3, complete:true },
  { id:'w10', label:'5 אוק׳',  week:10, tint:2, angles:3, complete:true },
  { id:'w9',  label:'28 ספט׳', week:9,  tint:1, angles:2, complete:false },
  { id:'w8',  label:'21 ספט׳', week:8,  tint:0, angles:3, complete:true },
];

function FadeUp({ delay=0, children, style }) {
  const [shown,setShown]=useState(false);
  useEffect(()=>{ const t=setTimeout(()=>setShown(true), delay+20); return ()=>clearTimeout(t); },[delay]);
  return <div style={{ opacity:shown?1:0, transform:shown?'none':'translateY(14px)',
    transition:'opacity .5s cubic-bezier(.2,0,0,1), transform .5s cubic-bezier(.2,0,0,1)', ...style }}>{children}</div>;
}

/* ---- Home ----------------------------------------------------------------- */
function HomeScreen({ openSummary, capture }) {
  return (
    <div style={{ position:'absolute', inset:0, background:Cm.bg, overflowY:'auto', paddingBottom:120 }}>
      <div style={{ paddingTop:52 }}>
        {/* header */}
        <FadeUp>
          <div style={{ display:'flex', flexDirection:'row-reverse', alignItems:'center',
            justifyContent:'space-between', padding:'8px 20px 4px' }}>
            <div style={{ display:'flex', flexDirection:'row-reverse', alignItems:'center', gap:10 }}>
              <div style={{ width:44, height:44, borderRadius:'50%', background:Cm.sage100,
                display:'flex', alignItems:'center', justifyContent:'center', border:`1px solid ${Cm.borderSubtle}` }}>
                <Icon name="person" size={22} color={Cm.sage600}/>
              </div>
              <div>
                <div style={{ fontSize:12, fontWeight:600, color:Cm.textTertiary, letterSpacing:.4 }}>ברוכה השבה ✨</div>
                <div style={{ fontSize:23, fontWeight:700, color:Cm.textPrimary }}>היי זוהר 👋</div>
              </div>
            </div>
            <div style={{ display:'flex', flexDirection:'row-reverse', alignItems:'center', gap:6,
              background:Cm.coral100, padding:'7px 12px', borderRadius:Rm.pill, boxShadow:ELEVm[1] }}>
              <Icon name="flame-outline" size={15} color={Cm.coral700}/>
              <span style={{ fontSize:13, fontWeight:700, color:Cm.coral700 }}>3 שבועות</span>
            </div>
          </div>
        </FadeUp>

        {/* streak ring hero */}
        <FadeUp delay={80} style={{ display:'flex', justifyContent:'center', margin:'14px 0 6px' }}>
          <StreakRing value={3} total={4} size={172} label="שבועות רצופים"/>
        </FadeUp>

        {/* timeline circles */}
        <FadeUp delay={150}>
          <div style={{ display:'flex', flexDirection:'row-reverse', alignItems:'baseline',
            justifyContent:'space-between', padding:'12px 20px 8px' }}>
            <div style={{ fontSize:20, fontWeight:700, color:Cm.textPrimary }}>מסע העור שלך</div>
            <span style={{ fontSize:14, fontWeight:600, color:Cm.primary }}>‹ כל התמונות</span>
          </div>
          <div style={{ display:'flex', flexDirection:'row-reverse', gap:14, overflowX:'auto',
            padding:'6px 20px 4px' }}>
            <AddCircle onClick={capture}/>
            {WEEKS.map((w,i)=><WeekCircle key={w.id} item={w} active={i===0}/>)}
          </div>
        </FadeUp>

        {/* weekly summary card */}
        <FadeUp delay={220} style={{ padding:'18px 20px 0' }}>
          <Card tone="high" onClick={openSummary} style={{ cursor:'pointer', padding:20 }}>
            <div style={{ display:'flex', flexDirection:'row-reverse', alignItems:'center', gap:12, marginBottom:12 }}>
              <div style={{ width:40, height:40, borderRadius:20, background:Cm.coral100,
                display:'flex', alignItems:'center', justifyContent:'center' }}>
                <Icon name="trending-up-outline" size={20} color={Cm.coral700}/>
              </div>
              <div style={{ flex:1 }}>
                <div style={{ fontSize:12, fontWeight:600, color:Cm.textTertiary, letterSpacing:.4 }}>הסיכום השבועי שלך</div>
                <div style={{ fontSize:20, fontWeight:700, color:Cm.textPrimary }}>מגמה חיובית</div>
              </div>
              <Icon name="chevron-back" size={20} color={Cm.textTertiary}/>
            </div>
            <p style={{ fontSize:15, lineHeight:1.6, color:Cm.textSecondary, margin:'0 0 14px', textAlign:'right' }}>
              את בדרך הנכונה! 3 שבועות של עקביות זה הישג אמיתי.
            </p>
            <div style={{ height:1, background:Cm.borderSubtle, marginBottom:14 }}/>
            <div style={{ display:'flex', flexDirection:'row-reverse', gap:10 }}>
              <Stat tint={Cm.sage100} label="מדד לחות" value="מצוין"/>
              <Stat tint={Cm.coral100} label="אדמומיות" value="במגמת ירידה"/>
            </div>
          </Card>
        </FadeUp>

        <FadeUp delay={300} style={{ padding:'18px 20px 0' }}>
          <Btn label="צלמי עכשיו" icon="camera-outline" onClick={capture}/>
        </FadeUp>
      </div>
    </div>
  );
}

function Stat({ tint, label, value }) {
  return (
    <div style={{ flex:1, background:tint, borderRadius:Rm.md, padding:'10px 14px', textAlign:'right' }}>
      <div style={{ fontSize:12, color:Cm.textSecondary, marginBottom:2 }}>{label}</div>
      <div style={{ fontSize:16, fontWeight:700, color:Cm.textPrimary }}>{value}</div>
    </div>
  );
}

function WeekCircle({ item, active }) {
  const { bind, transform } = usePress(0.94);
  const size = active ? 74 : 62;
  return (
    <div {...bind} style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:6, transform, transition:'transform .12s', cursor:'pointer' }}>
      <div style={{ position:'relative' }}>
        <PhotoPlaceholder tint={item.tint} rounded="50%" showIcon={true}
          style={{ width:size, height:size, border: active?`2.5px solid ${Cm.primary}`:'none',
            boxShadow: active?`0 6px 14px rgba(73,100,89,.18)`:ELEVm[1] }}/>
        {item.complete && (
          <div style={{ position:'absolute', bottom:-2, insetInlineStart:-2, width:18, height:18, borderRadius:'50%',
            background:Cm.primary, border:`2px solid ${Cm.bg}`, display:'flex', alignItems:'center', justifyContent:'center' }}>
            <Icon name="checkmark" size={9} color="#fff"/>
          </div>
        )}
      </div>
      <div style={{ fontSize:12, fontWeight: active?700:500, color: active?Cm.primary:Cm.textSecondary }}>{item.label}</div>
      <div style={{ display:'flex', gap:3 }}>
        {[0,1,2].map(i=><div key={i} style={{ width:4, height:4, borderRadius:2,
          background: i<item.angles?Cm.primary:Cm.borderDefault }}/>)}
      </div>
    </div>
  );
}

function AddCircle({ onClick }) {
  const { bind, transform } = usePress(0.93);
  return (
    <div {...bind} onClick={onClick} style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:6, transform, transition:'transform .12s', cursor:'pointer' }}>
      <div style={{ width:74, height:74, borderRadius:'50%', border:`2px dashed ${Cm.sage300}`,
        background:Cm.sage50, display:'flex', alignItems:'center', justifyContent:'center' }}>
        <Icon name="add" size={28} color={Cm.primary}/>
      </div>
      <div style={{ fontSize:12, fontWeight:700, color:Cm.primary }}>השבוע</div>
      <div style={{ height:4 }}/>
    </div>
  );
}

/* ---- Timeline ------------------------------------------------------------- */
function TimelineScreen({ openPhoto }) {
  const all = [...WEEKS, { id:'w7', label:'14 ספט׳', week:7, tint:1, angles:3, complete:true },
    { id:'w6', label:'7 ספט׳', week:6, tint:2, angles:3, complete:true }];
  return (
    <div style={{ position:'absolute', inset:0, background:Cm.bg, overflowY:'auto', paddingBottom:110 }}>
      <div style={{ paddingTop:56 }}>
        <AppHeader title="היסטוריה" sub="כל התמונות שלך"/>
        <div style={{ padding:'14px 20px', display:'grid', gridTemplateColumns:'1fr 1fr', gap:14 }}>
          {all.map((w,i)=>(
            <FadeUp key={w.id} delay={i*40} style={{ cursor:'pointer' }}>
              <div onClick={()=>openPhoto&&openPhoto(w)}>
                <PhotoPlaceholder tint={w.tint} rounded={Rm.lg} style={{ width:'100%', height:180,
                  boxShadow:ELEVm[2], border:`1px solid ${Cm.borderSubtle}` }}/>
                <div style={{ display:'flex', flexDirection:'row-reverse', alignItems:'baseline',
                  justifyContent:'space-between', marginTop:8 }}>
                  <span style={{ fontSize:14, fontWeight:700, color:Cm.textPrimary }}>שבוע {w.week}</span>
                  <span style={{ fontSize:12, color:Cm.textTertiary }}>{w.label}</span>
                </div>
              </div>
            </FadeUp>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ---- Settings ------------------------------------------------------------- */
function SettingsScreen({ exportPdf }) {
  const [reminders,setReminders]=useState(true);
  const rows1 = [
    { icon:'notifications-outline', label:'תזכורות', toggle:true },
    { icon:'happy-outline', label:'סוג עור', value:'יבש ›' },
  ];
  const rows2 = [
    { icon:'document-text-outline', label:'ייצוא דוח PDF', action:exportPdf },
    { icon:'lock-closed-outline', label:'פרטיות ואבטחה', badge:'מאובטח' },
    { icon:'help-circle-outline', label:'עזרה ותמיכה' },
    { icon:'information-circle-outline', label:'אודות' },
  ];
  return (
    <div style={{ position:'absolute', inset:0, background:Cm.bg, overflowY:'auto', paddingBottom:110 }}>
      <div style={{ paddingTop:56 }}>
        <AppHeader title="הגדרות"/>
        {/* profile */}
        <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:6, padding:'16px 0 22px' }}>
          <div style={{ width:84, height:84, borderRadius:'50%', background:Cm.sage100,
            display:'flex', alignItems:'center', justifyContent:'center', border:`1px solid ${Cm.borderSubtle}` }}>
            <Icon name="person" size={40} color={Cm.sage600}/>
          </div>
          <div style={{ fontSize:20, fontWeight:700, color:Cm.textPrimary }}>זוהר</div>
          <div style={{ fontSize:13, color:Cm.textTertiary }}>חברה מאז ינואר 2024</div>
        </div>

        <div style={{ padding:'0 20px', display:'flex', flexDirection:'column', gap:16 }}>
          <Card elev={1} style={{ padding:'4px 18px' }}>
            {rows1.map((r,i)=>(
              <div key={i} style={{ display:'flex', flexDirection:'row-reverse', alignItems:'center',
                justifyContent:'space-between', padding:'14px 0', borderBottom: i<rows1.length-1?`1px solid ${Cm.borderSubtle}`:'none' }}>
                <div style={{ display:'flex', flexDirection:'row-reverse', alignItems:'center', gap:12 }}>
                  <SettingIcon name={r.icon}/>
                  <span style={{ fontSize:16, color:Cm.textPrimary }}>{r.label}</span>
                </div>
                {r.toggle ? <Toggle on={reminders} onChange={setReminders}/>
                  : <span style={{ fontSize:14, color:Cm.textTertiary }}>{r.value}</span>}
              </div>
            ))}
          </Card>

          {/* privacy callout — first-class */}
          <Card elev={1} style={{ background:Cm.sage100, border:`1px solid ${Cm.sage200}`, display:'flex',
            flexDirection:'row-reverse', alignItems:'center', gap:12 }}>
            <Icon name="shield-checkmark-outline" size={24} color={Cm.sage700}/>
            <div style={{ flex:1 }}>
              <div style={{ fontSize:15, fontWeight:700, color:Cm.sage800 }}>הפרטיות שלך במקום הראשון</div>
              <div style={{ fontSize:13, color:Cm.textSecondary, lineHeight:1.5 }}>תמונות הפנים מוצפנות ונשמרות רק אצלך. את שולטת במי שרואה אותן.</div>
            </div>
          </Card>

          <Card elev={1} style={{ padding:'4px 18px' }}>
            {rows2.map((r,i)=>(
              <div key={i} onClick={r.action} style={{ display:'flex', flexDirection:'row-reverse', alignItems:'center',
                justifyContent:'space-between', padding:'14px 0', cursor: r.action?'pointer':'default',
                borderBottom: i<rows2.length-1?`1px solid ${Cm.borderSubtle}`:'none' }}>
                <div style={{ display:'flex', flexDirection:'row-reverse', alignItems:'center', gap:12 }}>
                  <SettingIcon name={r.icon}/>
                  <span style={{ fontSize:16, color:Cm.textPrimary }}>{r.label}</span>
                </div>
                <div style={{ display:'flex', flexDirection:'row-reverse', alignItems:'center', gap:8 }}>
                  {r.badge && <span style={{ fontSize:11, fontWeight:700, color:Cm.success,
                    background:Cm.successContainer, padding:'3px 8px', borderRadius:Rm.sm }}>{r.badge}</span>}
                  <Icon name="chevron-back" size={18} color={Cm.textTertiary}/>
                </div>
              </div>
            ))}
          </Card>
          <div style={{ textAlign:'center', fontSize:13, color:Cm.textTertiary, padding:'4px 0 8px' }}>v2.0.0</div>
        </div>
      </div>
    </div>
  );
}
function SettingIcon({ name }) {
  return (
    <div style={{ width:36, height:36, borderRadius:'50%', background:Cm.sage100,
      display:'flex', alignItems:'center', justifyContent:'center' }}>
      <Icon name={name} size={19} color={Cm.sage700}/>
    </div>
  );
}

/* ---- Weekly Summary sheet ------------------------------------------------- */
function WeeklySummarySheet({ close }) {
  return (
    <div style={{ position:'absolute', inset:0, zIndex:40, display:'flex', flexDirection:'column', justifyContent:'flex-end' }}>
      <div onClick={close} style={{ position:'absolute', inset:0, background:'rgba(22,29,31,.4)', animation:'sjFade .25s ease' }}/>
      <div style={{ position:'relative', background:Cm.bg, borderRadius:'28px 28px 0 0', padding:'14px 20px 34px',
        boxShadow:ELEVm[4], animation:'sjSheet .4s cubic-bezier(.2,0,0,1)' }}>
        <div style={{ width:40, height:5, borderRadius:99, background:Cm.borderDefault, margin:'0 auto 18px' }}/>
        <div style={{ display:'flex', justifyContent:'center', marginBottom:6 }}>
          <StreakRing value={6} total={8} size={140} label="שבועות מתועדים"/>
        </div>
        <div style={{ textAlign:'center', marginBottom:18 }}>
          <div style={{ fontSize:24, fontWeight:700, color:Cm.textPrimary }}>6 שבועות של מסע</div>
          <p style={{ fontSize:15, lineHeight:1.6, color:Cm.textSecondary, margin:'6px auto 0', maxWidth:300 }}>
            כל תמונה שצילמת היא צעד. את עקבית, ואת כאן בשביל עצמך — וזה מה שחשוב.
          </p>
        </div>
        <div style={{ display:'flex', flexDirection:'row-reverse', gap:10, marginBottom:18 }}>
          <Stat tint={Cm.sage100} label="תמונות" value="17"/>
          <Stat tint={Cm.coral100} label="רצף נוכחי" value="3"/>
          <Stat tint={Cm.surfaceSunken} label="זוויות" value="3/3"/>
        </div>
        <Btn label="שתפי עם המטפל/ת" icon="share-outline" onClick={close}/>
      </div>
    </div>
  );
}

Object.assign(window, { HomeScreen, TimelineScreen, SettingsScreen, WeeklySummarySheet, FadeUp });