// Main app component
const { useState, useEffect, useMemo, useRef } = React;

// ===== Storage =====
const STORAGE_KEY = "shani_planner_v1";
const loadState = () => {
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    if (!raw) return { completed: {}, currentDay: 1, notes: {}, results: {} };
    return JSON.parse(raw);
  } catch { return { completed: {}, currentDay: 1, notes: {}, results: {} }; }
};
const saveState = (s) => { try { localStorage.setItem(STORAGE_KEY, JSON.stringify(s)); } catch {} };

// ===== Tweaks defaults =====
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "terracotta",
  "showEnglish": true,
  "layout": "calendar",
  "coachVoice": "encouraging"
}/*EDITMODE-END*/;

const ACCENTS = {
  terracotta: { name: "טרקוטה", color: "#B8593A", soft: "#D4836A" },
  olive:      { name: "זית",    color: "#7A6B3F", soft: "#9A8B5A" },
  clay:       { name: "חמר",    color: "#9C5840", soft: "#BD7858" },
  moss:       { name: "טחב",    color: "#5C6B4A", soft: "#7E8D6A" },
};

const COACH_VOICES = {
  encouraging: "מאמן תומך",
  data: "נתונים בלבד",
  minimal: "רק העבודה",
};

// ===== Helpers =====
const phaseLabels = {
  foundation: { he: "יסוד",   w: 1 },
  build:      { he: "בונים",  w: 2 },
  milestone:  { he: "אבן דרך", w: 2 },
  elevate:    { he: "מרוממים", w: 3 },
  peak:       { he: "שיא",    w: 4 },
  finale:     { he: "סיום",   w: 4 },
  recovery:   { he: "התאוששות", w: 0 },
  rest:       { he: "מנוחה", w: 0 },
};

const intensityBars = (n) => {
  return (
    <div style={{display:"flex",gap:2}}>
      {[1,2,3,4,5].map(i => (
        <div key={i} style={{
          width:4, height:10,
          background: i <= n ? "var(--accent)" : "rgba(90,70,55,0.15)",
          borderRadius:1,
        }}/>
      ))}
    </div>
  );
};

// ===== App =====
function App() {
  const [state, setState] = useState(loadState);
  const [openDay, setOpenDay] = useState(null);
  const [tweaks, setTweaks] = useState(TWEAK_DEFAULTS);
  const [tweaksOpen, setTweaksOpen] = useState(false);
  const [celebrate, setCelebrate] = useState(null);

  // Persist state
  useEffect(() => { saveState(state); }, [state]);

  // Tweaks edit mode protocol
  useEffect(() => {
    const onMsg = (e) => {
      const d = e.data;
      if (!d || typeof d !== "object") return;
      if (d.type === "__activate_edit_mode") setTweaksOpen(true);
      if (d.type === "__deactivate_edit_mode") setTweaksOpen(false);
    };
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  const updateTweak = (key, value) => {
    setTweaks(t => {
      const next = { ...t, [key]: value };
      window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [key]: value } }, "*");
      return next;
    });
  };

  const accent = ACCENTS[tweaks.accent] || ACCENTS.terracotta;

  // Derived
  const completedCount = Object.values(state.completed).filter(Boolean).length;
  const streak = useMemo(() => {
    let s = 0;
    for (let i = 1; i <= 30; i++) {
      if (state.completed[i]) s++;
      else break;
    }
    // actually compute current streak ending at latest checked
    let best = 0, cur = 0;
    for (let i = 1; i <= 30; i++) {
      if (state.completed[i]) { cur++; best = Math.max(best, cur); }
      else cur = 0;
    }
    return best;
  }, [state.completed]);

  const toggleDay = (day) => {
    setState(s => {
      const wasComplete = !!s.completed[day];
      const next = { ...s, completed: { ...s.completed, [day]: !wasComplete } };
      if (!wasComplete) {
        // just completed
        if (day === 14 || day === 30) setCelebrate(day);
      }
      return next;
    });
  };

  const saveResult = (day, field, value) => {
    setState(s => ({
      ...s,
      results: { ...s.results, [day]: { ...(s.results[day]||{}), [field]: value } },
    }));
  };

  const reset = () => {
    if (confirm("לאפס את כל ההתקדמות?")) {
      setState({ completed: {}, currentDay: 1, notes: {}, results: {} });
    }
  };

  const rootStyle = {
    "--accent": accent.color,
    "--accent-soft": accent.soft,
  };

  return (
    <div className="app" style={rootStyle} dir="rtl">
      <Header streak={streak} completedCount={completedCount} accent={accent} onReset={reset}/>
      <Hero completedCount={completedCount} accent={accent} state={state}/>
      {tweaks.layout === "calendar"
        ? <CalendarGrid state={state} onOpen={setOpenDay} onToggle={toggleDay} accent={accent}/>
        : <ListLayout state={state} onOpen={setOpenDay} onToggle={toggleDay} accent={accent}/>}
      <Footer/>
      {openDay && (
        <DayDrawer
          day={openDay}
          onClose={() => setOpenDay(null)}
          onToggle={toggleDay}
          isCompleted={!!state.completed[openDay]}
          showEnglish={tweaks.showEnglish}
          coachVoice={tweaks.coachVoice}
          results={state.results[openDay] || {}}
          onSaveResult={(f,v) => saveResult(openDay,f,v)}
        />
      )}
      {celebrate && <Celebration day={celebrate} onClose={() => setCelebrate(null)}/>}
      {tweaksOpen && (
        <TweaksPanel
          tweaks={tweaks}
          updateTweak={updateTweak}
          onClose={() => setTweaksOpen(false)}
        />
      )}
    </div>
  );
}

// ===== Header =====
function Header({ streak, completedCount, onReset }) {
  return (
    <header className="header">
      <div className="header-brand">
        <div className="logo-mark">פ</div>
        <div>
          <div className="brand-name">מאמנת הפטיטיות</div>
          <div className="brand-tag">תכנית 30 יום · 15 דקות ביום</div>
        </div>
      </div>
      <div className="header-meta">
        <div className="meta-item">
          <div className="meta-label">רצף</div>
          <div className="meta-value">{streak}<span className="meta-unit">ימים</span></div>
        </div>
        <div className="meta-divider"/>
        <div className="meta-item">
          <div className="meta-label">הושלמו</div>
          <div className="meta-value">{completedCount}<span className="meta-unit">/30</span></div>
        </div>
        <button className="icon-btn" onClick={onReset} title="אפס">
          ↺
        </button>
      </div>
    </header>
  );
}

// ===== Hero =====
function Hero({ completedCount, state }) {
  const pct = (completedCount / 30) * 100;
  const circ = 2 * Math.PI * 90;
  const offset = circ - (pct / 100) * circ;
  const day14Done = !!state.completed[14];
  const day30Done = !!state.completed[30];

  const message = useMemo(() => {
    if (completedCount === 0) return { k: "היום זה היום", sub: "15 דקות. רק להתחיל." };
    if (completedCount < 7)    return { k: "בונים בסיס", sub: "כל יום חשוב יותר מהקודם." };
    if (completedCount < 14)   return { k: "מתקרבים ל-14", sub: "היום הגדול מחכה." };
    if (completedCount === 14) return { k: "חצי הדרך!", sub: "רשמי את המספרים. תשווי בעוד 16 ימים." };
    if (completedCount < 21)   return { k: "הגוף משתנה", sub: "עכשיו כבר רואים." };
    if (completedCount < 30)   return { k: "שבוע אחרון", sub: "את כבר ניצחת." };
    return { k: "שלושים ימים.", sub: "עשית את זה." };
  }, [completedCount]);

  return (
    <section className="hero">
      <div className="hero-ring">
        <svg viewBox="0 0 200 200" className="ring-svg">
          <circle cx="100" cy="100" r="90" fill="none" stroke="rgba(90,70,55,0.08)" strokeWidth="6"/>
          <circle cx="100" cy="100" r="90" fill="none"
            stroke="var(--accent)" strokeWidth="6" strokeLinecap="round"
            strokeDasharray={circ} strokeDashoffset={offset}
            transform="rotate(-90 100 100)"
            style={{transition:"stroke-dashoffset 0.8s cubic-bezier(.4,0,.2,1)"}}/>
          {/* Day 14 milestone tick */}
          {(() => {
            const angle14 = (14/30) * 360 - 90;
            const rad = angle14 * Math.PI / 180;
            const x1 = 100 + 82 * Math.cos(rad);
            const y1 = 100 + 82 * Math.sin(rad);
            const x2 = 100 + 98 * Math.cos(rad);
            const y2 = 100 + 98 * Math.sin(rad);
            return <line x1={x1} y1={y1} x2={x2} y2={y2} stroke="var(--accent)" strokeWidth="3" strokeLinecap="round"/>;
          })()}
        </svg>
        <div className="ring-inner">
          <div className="ring-number">{completedCount}</div>
          <div className="ring-label">מתוך 30</div>
        </div>
      </div>

      <div className="hero-text">
        <div className="hero-eyebrow">
          <span className="eyebrow-dot"/>
          היי, את זו שקמה
        </div>
        <h1 className="hero-title">{message.k}</h1>
        <p className="hero-sub">{message.sub}</p>

        <div className="milestones">
          <MilestonePill label="יום 14" name="אבן דרך" active={completedCount >= 14} done={day14Done}/>
          <div className="mile-track">
            <div className="mile-track-fill" style={{width: `${Math.min(100, (completedCount/30)*100)}%`}}/>
          </div>
          <MilestonePill label="יום 30" name="סיום" active={completedCount >= 30} done={day30Done}/>
        </div>
      </div>

      <div className="hero-stat-block">
        <div className="stat-line">
          <div className="stat-k">15</div>
          <div className="stat-v">דקות<br/>ביום</div>
        </div>
        <div className="stat-line">
          <div className="stat-k">0</div>
          <div className="stat-v">ציוד<br/>נדרש</div>
        </div>
        <div className="stat-line accent-stat">
          <div className="stat-k">14</div>
          <div className="stat-v">יום<br/>לתוצאות</div>
        </div>
      </div>
    </section>
  );
}

function MilestonePill({ label, name, active, done }) {
  return (
    <div className={`mile-pill ${active ? "is-active" : ""} ${done ? "is-done" : ""}`}>
      <div className="mile-pill-label">{label}</div>
      <div className="mile-pill-name">{name}</div>
      {done && <div className="mile-pill-check">✓</div>}
    </div>
  );
}

// ===== Calendar Grid =====
function CalendarGrid({ state, onOpen, onToggle, accent }) {
  const weeks = [1,2,3,4];
  return (
    <section className="calendar">
      <div className="section-header">
        <h2 className="section-title">שלושים הימים</h2>
        <div className="legend">
          <span className="legend-item"><span className="legend-dot legend-foundation"/>יסוד</span>
          <span className="legend-item"><span className="legend-dot legend-build"/>בניין</span>
          <span className="legend-item"><span className="legend-dot legend-peak"/>שיא</span>
          <span className="legend-item"><span className="legend-dot legend-rest"/>מנוחה</span>
        </div>
      </div>

      {weeks.map(w => {
        const weekDays = PROGRAM.filter(d => d.week === w);
        const weekCompleted = weekDays.filter(d => state.completed[d.day]).length;
        return (
          <div className="week" key={w}>
            <div className="week-header">
              <div className="week-number">שבוע {w}</div>
              <div className="week-title">{
                w === 1 ? "בונים בסיס" :
                w === 2 ? "לקראת אבן הדרך" :
                w === 3 ? "מרוממים את הרמה" :
                "השיא"
              }</div>
              <div className="week-progress">
                <div className="week-progress-bar">
                  <div className="week-progress-fill" style={{width: `${(weekCompleted/weekDays.length)*100}%`}}/>
                </div>
                <div className="week-progress-text">{weekCompleted}/{weekDays.length}</div>
              </div>
            </div>
            <div className="week-grid">
              {weekDays.map(d => (
                <DayCard key={d.day} day={d} completed={!!state.completed[d.day]}
                  onOpen={() => onOpen(d.day)} onToggle={(e) => { e.stopPropagation(); onToggle(d.day); }}/>
              ))}
            </div>
          </div>
        );
      })}
    </section>
  );
}

function DayCard({ day, completed, onOpen, onToggle }) {
  const isMilestone = day.isMilestone;
  const isFinale = day.isFinale;
  const isRest = day.phase === "rest" || day.phase === "recovery";
  const classes = [
    "day-card",
    `phase-${day.phase}`,
    completed ? "is-completed" : "",
    isMilestone ? "is-milestone" : "",
    isFinale ? "is-finale" : "",
  ].join(" ");

  return (
    <button className={classes} onClick={onOpen}>
      <div className="day-card-top">
        <div className="day-number">{day.day}</div>
        <div className="day-check" onClick={onToggle} role="button"
          aria-label={completed ? "בוצע" : "לא בוצע"}>
          {completed && <span>✓</span>}
        </div>
      </div>
      <div className="day-focus">{day.focus}</div>
      <div className="day-title">{day.title}</div>
      <div className="day-card-bottom">
        {isRest
          ? <div className="day-rest-label">התאוששות</div>
          : intensityBars(day.intensity)}
        <div className="day-dur">15ד׳</div>
      </div>
      {isMilestone && <div className="milestone-ribbon">חצי הדרך</div>}
      {isFinale && <div className="milestone-ribbon finale">פינאלה</div>}
    </button>
  );
}

// ===== List Layout =====
function ListLayout({ state, onOpen, onToggle }) {
  return (
    <section className="list-layout">
      <div className="section-header"><h2 className="section-title">שלושים הימים</h2></div>
      {PROGRAM.map(d => (
        <button key={d.day} className={`list-row ${state.completed[d.day] ? "is-completed" : ""} ${d.isMilestone ? "is-milestone" : ""}`} onClick={() => onOpen(d.day)}>
          <div className={`list-check ${state.completed[d.day] ? "on" : ""}`} onClick={(e) => { e.stopPropagation(); onToggle(d.day); }}>
            {state.completed[d.day] && "✓"}
          </div>
          <div className="list-day-num">יום {d.day}</div>
          <div className="list-main">
            <div className="list-title">{d.title}</div>
            <div className="list-sub">{d.focus} · {d.subtitle}</div>
          </div>
          <div className="list-intensity">{d.phase === "rest" || d.phase === "recovery" ? "מנוחה" : intensityBars(d.intensity)}</div>
          <div className="list-arrow">←</div>
        </button>
      ))}
    </section>
  );
}

// ===== Day Drawer =====
function DayDrawer({ day, onClose, onToggle, isCompleted, showEnglish, coachVoice, results, onSaveResult }) {
  const d = PROGRAM.find(p => p.day === day);
  const [openDrill, setOpenDrill] = useState(null);
  if (!d) return null;

  const isTest = d.isMilestone || d.isFinale;

  return (
    <div className="drawer-backdrop" onClick={onClose}>
      <div className="drawer" onClick={(e) => e.stopPropagation()}>
        <button className="drawer-close" onClick={onClose}>×</button>
        <div className={`drawer-hero phase-${d.phase}`}>
          <div className="drawer-eyebrow">
            יום {d.day} · שבוע {d.week} · {phaseLabels[d.phase]?.he}
          </div>
          <h2 className="drawer-title">{d.title}</h2>
          <div className="drawer-sub">{d.subtitle}</div>
          <div className="drawer-meta">
            <div className="drawer-meta-item">
              <div className="dm-label">מיקוד</div>
              <div className="dm-value">{d.focus}</div>
            </div>
            <div className="drawer-meta-item">
              <div className="dm-label">עצימות</div>
              <div className="dm-value">{intensityBars(d.intensity)}</div>
            </div>
            <div className="drawer-meta-item">
              <div className="dm-label">משך</div>
              <div className="dm-value">15 דקות</div>
            </div>
          </div>
        </div>

        {coachVoice === "encouraging" && (
          <div className="coach-note">
            <div className="coach-quote-mark">״</div>
            <div className="coach-text">{d.coach}</div>
            <div className="coach-sig">— מאמנת הפטיטיות</div>
          </div>
        )}

        {isTest && (
          <div className="test-panel">
            <div className="test-title">{d.isMilestone ? "רישום תוצאות יום 14" : "השוואה ליום 14"}</div>
            <div className="test-fields">
              {["שכיבות","סקוואט","פלאנק (שניות)"].map(field => (
                <div className="test-field" key={field}>
                  <label>{field}</label>
                  <input type="number"
                    value={results[field] || ""}
                    onChange={(e) => onSaveResult(field, e.target.value)}
                    placeholder="—"/>
                </div>
              ))}
            </div>
            {d.isFinale && <div className="test-hint">בדקי את המספרים מיום 14 — ההבדל הוא סיפור ההצלחה שלך.</div>}
          </div>
        )}

        <div className="blocks">
          {d.blocks.map((block, bi) => (
            <div className="block" key={bi}>
              <div className="block-header">
                <div className="block-name">{block.name}</div>
                <div className="block-meta">
                  {block.rounds > 1 && <span>{block.rounds} סבבים</span>}
                  {block.rest !== "0" && <span>· מנוחה: {block.rest}</span>}
                </div>
              </div>
              <div className="drills">
                {block.drills.map(([key, reps], di) => {
                  const drill = DRILL_LIBRARY[key];
                  if (!drill) return null;
                  const isOpen = openDrill === `${bi}-${di}`;
                  return (
                    <div key={di} className={`drill ${isOpen ? "is-open" : ""}`}>
                      <button className="drill-main" onClick={() => setOpenDrill(isOpen ? null : `${bi}-${di}`)}>
                        <div className="drill-left">
                          <div className="drill-name">
                            {drill.he}
                            {showEnglish && <span className="drill-en">· {drill.en}</span>}
                          </div>
                          <div className="drill-cue">{drill.cue}</div>
                        </div>
                        <div className="drill-right">
                          <div className="drill-reps">{reps}</div>
                          <div className="drill-expand">{isOpen ? "−" : "+"}</div>
                        </div>
                      </button>
                      {isOpen && (
                        <div className="drill-expanded">
                          <div className="drill-why">
                            <div className="drill-why-label">למה זה עובד</div>
                            <div>{drill.why}</div>
                          </div>
                          {drill.mod && (
                            <div className="drill-mod">
                              <div className="drill-why-label">אפשרות קלה יותר</div>
                              <div>{drill.mod}</div>
                            </div>
                          )}
                        </div>
                      )}
                    </div>
                  );
                })}
              </div>
            </div>
          ))}
        </div>

        <div className="drawer-footer">
          <button className={`complete-btn ${isCompleted ? "is-completed" : ""}`} onClick={() => onToggle(d.day)}>
            {isCompleted
              ? <>✓ הושלם — לבטל?</>
              : <>סיימתי את יום {d.day} — נסגר</>}
          </button>
        </div>
      </div>
    </div>
  );
}

// ===== Celebration =====
function Celebration({ day, onClose }) {
  const isFinale = day === 30;
  return (
    <div className="celebrate-backdrop" onClick={onClose}>
      <div className="celebrate" onClick={(e) => e.stopPropagation()}>
        <div className="celebrate-rings">
          <div className="cring cring-1"/>
          <div className="cring cring-2"/>
          <div className="cring cring-3"/>
        </div>
        <div className="celebrate-number">{day}</div>
        <div className="celebrate-title">
          {isFinale ? "עשית את זה." : "חצי הדרך."}
        </div>
        <div className="celebrate-sub">
          {isFinale
            ? "שלושים ימים. אין חזרה לאחור — את אדם אחר."
            : "את באמצע המסע. תרשמי את המספרים — הסיפור מתחיל עכשיו."}
        </div>
        <button className="celebrate-btn" onClick={onClose}>ממשיכים</button>
      </div>
    </div>
  );
}

// ===== Tweaks Panel =====
function TweaksPanel({ tweaks, updateTweak, onClose }) {
  return (
    <div className="tweaks-panel">
      <div className="tweaks-header">
        <div className="tweaks-title">Tweaks</div>
        <button className="tweaks-close" onClick={onClose}>×</button>
      </div>
      <div className="tweaks-body">
        <div className="tweak-row">
          <div className="tweak-label">צבע מבטא</div>
          <div className="tweak-swatches">
            {Object.entries(ACCENTS).map(([k,v]) => (
              <button key={k}
                className={`swatch ${tweaks.accent === k ? "on" : ""}`}
                style={{background: v.color}}
                onClick={() => updateTweak("accent", k)}
                title={v.name}/>
            ))}
          </div>
        </div>
        <div className="tweak-row">
          <div className="tweak-label">פריסה</div>
          <div className="tweak-seg">
            {[["calendar","לוח"],["list","רשימה"]].map(([k,l]) => (
              <button key={k} className={tweaks.layout === k ? "on" : ""} onClick={() => updateTweak("layout", k)}>{l}</button>
            ))}
          </div>
        </div>
        <div className="tweak-row">
          <div className="tweak-label">קול המאמן</div>
          <div className="tweak-seg">
            {Object.entries(COACH_VOICES).map(([k,l]) => (
              <button key={k} className={tweaks.coachVoice === k ? "on" : ""} onClick={() => updateTweak("coachVoice", k)}>{l}</button>
            ))}
          </div>
        </div>
        <div className="tweak-row">
          <div className="tweak-label">שמות באנגלית</div>
          <button className={`toggle ${tweaks.showEnglish ? "on" : ""}`} onClick={() => updateTweak("showEnglish", !tweaks.showEnglish)}>
            <span className="toggle-knob"/>
          </button>
        </div>
      </div>
    </div>
  );
}

// ===== Footer =====
function Footer() {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div className="footer-brand">מאמנת הפטיטיות</div>
        <div className="footer-note">15 דקות ביום. משקל גוף בלבד. 30 ימים שמשנים הכל.</div>
      </div>
    </footer>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);