/* CoHaven — Custody Schedule Builder (free tool)
   Real rotation logic + per-day overrides + live split + print. */
const { useState, useEffect, useMemo, useCallback } = React;
const { LeadGateModal, useLeadGate, PrintBrand, LeadNextStep } = window;

/* ---------------- rotation logic ---------------- */
const PRESETS = {
  "2-2-3":   { label: "2-2-3", blurb: "Two days, two days, then a long weekend — alternating.", cycle: ["A","A","B","B","A","A","A","B","B","A","A","B","B","B"] },
  "woww":    { label: "Week on / week off", blurb: "A full week with each parent.", cycle: ["A","A","A","A","A","A","A","B","B","B","B","B","B","B"] },
  "2-2-5-5": { label: "2-2-5-5", blurb: "Short midweek blocks, longer weekend stretches.", cycle: ["A","A","B","B","A","A","A","A","A","B","B","B","B","B"] },
  "3-4-4-3": { label: "3-4-4-3", blurb: "Balanced near-even split across two weeks.", cycle: ["A","A","A","B","B","B","B","A","A","A","A","B","B","B"] },
  "weekends":{ label: "Every weekend", blurb: "One home on weekdays, the other on weekends.", weekday: true },
  "alt-wknd":{ label: "Alternating weekends", blurb: "Weekdays with one parent; every other weekend away.", altWeekend: true },
};

function ymd(d){ return d.getFullYear()+"-"+String(d.getMonth()+1).padStart(2,"0")+"-"+String(d.getDate()).padStart(2,"0"); }
function parseYmd(s){ const [y,m,d]=s.split("-").map(Number); return new Date(y, m-1, d); }
function addDays(d,n){ const x=new Date(d); x.setDate(x.getDate()+n); return x; }
function daysBetween(a,b){ return Math.round((b.setHours(0,0,0,0), a.setHours(0,0,0,0), (new Date(b)-new Date(a))/86400000)); }
function diffDays(start, day){
  const s = new Date(start.getFullYear(), start.getMonth(), start.getDate());
  const d = new Date(day.getFullYear(), day.getMonth(), day.getDate());
  return Math.round((d - s)/86400000);
}
function mod(n,m){ return ((n % m) + m) % m; }

/* who has the child on `date` given config (ignoring overrides) */
function basePattern(date, preset, startDate, startParent){
  const p = PRESETS[preset];
  const swap = (v)=> startParent==="B" ? (v==="A"?"B":"A") : v;
  if (p.weekday){
    const wd = date.getDay(); // 0 Sun .. 6 Sat
    return swap((wd===0 || wd===6) ? "B" : "A");
  }
  if (p.altWeekend){
    const wd = date.getDay();
    if (wd!==0 && wd!==6) return swap("A");
    // weekend: alternate by week index from start
    const wk = Math.floor(diffDays(startDate, date)/7);
    return swap(mod(wk,2)===0 ? "A" : "B");
  }
  const idx = mod(diffDays(startDate, date), p.cycle.length);
  return swap(p.cycle[idx]);
}

/* ---------------- small UI atoms ---------------- */
function Seg({options, value, onChange}){
  return (
    <div className="seg">
      {options.map(o=>(
        <button key={o.v} className={"seg-btn"+(value===o.v?" on":"")} onClick={()=>onChange(o.v)}>{o.label}</button>
      ))}
    </div>
  );
}

const COLORS = [
  { key:"teal",  c:"#1b4d4a", tint:"#d9e7e2", name:"Teal" },
  { key:"clay",  c:"#c96f4c", tint:"#f0d8c8", name:"Clay" },
  { key:"plum",  c:"#6d5080", tint:"#e4dcec", name:"Plum" },
  { key:"slate", c:"#3f6079", tint:"#d8e2ea", name:"Slate" },
  { key:"olive", c:"#6f7a3a", tint:"#e6e8d2", name:"Olive" },
  { key:"rose",  c:"#a8506a", tint:"#f0d6df", name:"Rose" },
];

function ColorRow({selected, exclude, onPick}){
  return (
    <div className="colorrow">
      {COLORS.map(col=>(
        <button key={col.key}
          className={"sw"+(selected===col.key?" on":"")}
          disabled={col.key===exclude}
          style={{background:col.c, opacity: col.key===exclude?0.25:1}}
          title={col.name}
          onClick={()=>onPick(col.key)} />
      ))}
    </div>
  );
}

function getColor(key){ return COLORS.find(c=>c.key===key) || COLORS[0]; }

/* ---------------- main app ---------------- */
const MONTHS = ["January","February","March","April","May","June","July","August","September","October","November","December"];
const DOW = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];

function App(){
  const todayStr = ymd(new Date());
  const load = (k, def) => { try { const v = JSON.parse(localStorage.getItem("cohaven.sched")||"{}")[k]; return v===undefined?def:v; } catch(e){ return def; } };

  const [aName, setAName] = useState(()=>load("aName","Parent A"));
  const [bName, setBName] = useState(()=>load("bName","Parent B"));
  const [aColor, setAColor] = useState(()=>load("aColor","teal"));
  const [bColor, setBColor] = useState(()=>load("bColor","clay"));
  const [preset, setPreset] = useState(()=>load("preset","2-2-3"));
  const [startDate, setStartDate] = useState(()=>load("startDate", todayStr));
  const [startParent, setStartParent] = useState(()=>load("startParent","A"));
  const [overrides, setOverrides] = useState(()=>load("overrides",{}));
  const [view, setView] = useState(()=>{ const d=new Date(); return { y:d.getFullYear(), m:d.getMonth() }; });

  const { captured, open, gate, onCapture, dismiss } = useLeadGate();

  useEffect(()=>{
    localStorage.setItem("cohaven.sched", JSON.stringify({aName,bName,aColor,bColor,preset,startDate,startParent,overrides}));
  },[aName,bName,aColor,bColor,preset,startDate,startParent,overrides]);

  const start = parseYmd(startDate);
  const colA = getColor(aColor), colB = getColor(bColor);

  const assign = useCallback((date)=>{
    const key = ymd(date);
    if (overrides[key]) return overrides[key];
    return basePattern(date, preset, start, startParent);
  },[overrides, preset, startDate, startParent]);

  /* build month grid */
  const grid = useMemo(()=>{
    const first = new Date(view.y, view.m, 1);
    const startPad = first.getDay();
    const daysInMonth = new Date(view.y, view.m+1, 0).getDate();
    const cells = [];
    for (let i=0;i<startPad;i++) cells.push(null);
    for (let d=1; d<=daysInMonth; d++) cells.push(new Date(view.y, view.m, d));
    while (cells.length % 7 !== 0) cells.push(null);
    return cells;
  },[view]);

  /* month split */
  const monthStats = useMemo(()=>{
    let a=0,b=0; const dim = new Date(view.y, view.m+1, 0).getDate();
    for(let d=1; d<=dim; d++){ assign(new Date(view.y,view.m,d))==="A"?a++:b++; }
    return {a,b,total:dim};
  },[view, assign]);

  /* cycle split (over 28 days from start, representative) */
  const cycleStats = useMemo(()=>{
    let a=0,b=0;
    for(let i=0;i<28;i++){ basePattern(addDays(start,i), preset, start, startParent)==="A"?a++:b++; }
    return { a:Math.round(a/28*100), b:Math.round(b/28*100) };
  },[preset, startDate, startParent]);

  const toggleDay = (date)=>{
    const key = ymd(date);
    const base = basePattern(date, preset, start, startParent);
    const cur = overrides[key] || base;
    const next = cur==="A" ? "B" : "A";
    setOverrides(o=>{
      const n = {...o};
      if (next === base) delete n[key]; else n[key]=next;
      return n;
    });
  };

  const nav = (delta)=> setView(v=>{ let m=v.m+delta, y=v.y; if(m<0){m=11;y--;} if(m>11){m=0;y++;} return {y,m}; });
  const goToday = ()=>{ const d=new Date(); setView({y:d.getFullYear(), m:d.getMonth()}); };
  const resetAll = ()=>{ if(confirm("Reset everything to defaults?")){ setOverrides({}); setPreset("2-2-3"); setStartParent("A"); setStartDate(todayStr); } };
  const clearOverrides = ()=> setOverrides({});

  const overrideCount = Object.keys(overrides).length;
  const todayKey = ymd(new Date());

  return (
    <div className="sb">
      {/* header */}
      <header className="sb-nav no-print">
        <a className="brand" href="/">
          <svg className="logo-mark" viewBox="0 0 40 40" aria-hidden="true">
            <path className="a" d="M20 4 6 15v3l14-11 14 11v-3z"/>
            <path className="b" d="M13 19c0-1 .8-2 2-2h10c1.2 0 2 1 2 2v13c0 1-.8 2-2 2H15c-1.2 0-2-1-2-2z"/>
            <rect className="a" x="18" y="25" width="4" height="9" rx="1"/>
          </svg>
          CoHaven
        </a>
        <span className="tool-tag">Free tool</span>
        <a className="btn btn-primary sb-cta" href="/pricing">Try the full app</a>
      </header>

      {/* title */}
      <div className="sb-head no-print">
        <span className="eyebrow">Custody Schedule Builder</span>
        <h1>See your parenting schedule clearly.</h1>
        <p className="muted">Pick a rotation, set who starts, and adjust any day by tapping it. Your plan saves automatically and prints clean — no account needed.</p>
      </div>

      <div className="sb-grid">
        {/* controls */}
        <aside className="panel controls no-print">
          <div className="ctl">
            <label className="ctl-label">Parents</label>
            <div className="parent-row">
              <span className="pdot" style={{background:colA.c}}></span>
              <input className="pin" value={aName} maxLength={18} onChange={e=>setAName(e.target.value)} />
            </div>
            <ColorRow selected={aColor} exclude={bColor} onPick={setAColor} />
            <div className="parent-row" style={{marginTop:12}}>
              <span className="pdot" style={{background:colB.c}}></span>
              <input className="pin" value={bName} maxLength={18} onChange={e=>setBName(e.target.value)} />
            </div>
            <ColorRow selected={bColor} exclude={aColor} onPick={setBColor} />
          </div>

          <div className="ctl">
            <label className="ctl-label">Rotation</label>
            <div className="preset-list">
              {Object.entries(PRESETS).map(([k,p])=>(
                <button key={k} className={"preset"+(preset===k?" on":"")} onClick={()=>setPreset(k)}>
                  <span className="pname">{p.label}</span>
                  <span className="pblurb">{p.blurb}</span>
                </button>
              ))}
            </div>
          </div>

          <div className="ctl">
            <label className="ctl-label">Cycle starts</label>
            <input type="date" className="datein" value={startDate} onChange={e=>setStartDate(e.target.value)} />
            <label className="ctl-label" style={{marginTop:14}}>Starting parent</label>
            <Seg options={[{v:"A",label:aName},{v:"B",label:bName}]} value={startParent} onChange={setStartParent} />
          </div>

          <div className="ctl">
            <button className="btn btn-ghost full" onClick={() => gate(() => window.print())}>
              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 9V2h12v7M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2M6 14h12v8H6z" strokeLinecap="round" strokeLinejoin="round"/></svg>
              Print / save as PDF
            </button>
            <div className="mini-actions">
              {overrideCount>0 && <button className="link-btn" onClick={clearOverrides}>Clear {overrideCount} edit{overrideCount>1?"s":""}</button>}
              <button className="link-btn" onClick={resetAll}>Reset all</button>
            </div>
          </div>
        </aside>

        {/* calendar */}
        <main className="panel cal">
          <PrintBrand toolName="Custody Schedule Builder" />
          <div className="cal-top">
            <div className="cal-month">
              <h2>{MONTHS[view.m]} {view.y}</h2>
              <span className="print-only sched-name">{PRESETS[preset].label} · {aName} &amp; {bName}</span>
            </div>
            <div className="cal-nav no-print">
              <button className="navb" onClick={()=>nav(-1)} aria-label="Previous month"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M15 18l-6-6 6-6" strokeLinecap="round" strokeLinejoin="round"/></svg></button>
              <button className="navb today" onClick={goToday}>Today</button>
              <button className="navb" onClick={()=>nav(1)} aria-label="Next month"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 18l6-6-6-6" strokeLinecap="round" strokeLinejoin="round"/></svg></button>
            </div>
          </div>

          <div className="dow-row">{DOW.map(d=><span key={d}>{d}</span>)}</div>

          <div className="cal-grid">
            {grid.map((date,i)=>{
              if(!date) return <div key={i} className="cell empty"></div>;
              const who = assign(date);
              const col = who==="A"?colA:colB;
              const key = ymd(date);
              const prev = addDays(date,-1);
              const handoff = assign(prev) !== who;
              const isToday = key===todayKey;
              const edited = !!overrides[key];
              return (
                <button key={i} className={"cell"+(isToday?" today":"")} onClick={()=>toggleDay(date)}
                  style={{background:col.tint, borderColor: isToday?col.c:"transparent"}}>
                  <span className="cd" style={{color:col.c}}>{date.getDate()}</span>
                  <span className="cwho" style={{color:col.c}}>{who==="A"?aName:bName}</span>
                  {handoff && <span className="handoff" title="Handoff" style={{background:col.c}}></span>}
                  {edited && <span className="edited" title="Edited">●</span>}
                </button>
              );
            })}
          </div>

          <div className="cal-foot">
            <div className="legend">
              <span className="lg"><i style={{background:colA.c}}></i> {aName}</span>
              <span className="lg"><i style={{background:colB.c}}></i> {bName}</span>
              <span className="lg handoff-key"><i className="ho"></i> Handoff day</span>
            </div>
            <div className="split">
              <div className="split-bar">
                <span style={{width:`${monthStats.a/monthStats.total*100}%`, background:colA.c}}></span>
                <span style={{width:`${monthStats.b/monthStats.total*100}%`, background:colB.c}}></span>
              </div>
              <div className="split-nums">
                <span>{aName}: <b>{monthStats.a}</b> nights</span>
                <span>{bName}: <b>{monthStats.b}</b> nights</span>
                <span className="cyc">Rotation split <b>{cycleStats.a}/{cycleStats.b}</b></span>
              </div>
            </div>
          </div>
          <p className="tap-hint no-print">Tip: tap any day to override who has the kids — handy for swaps, holidays and one-offs.</p>
          <LeadNextStep
            captured={captured}
            title="Keep this schedule synced."
            body="Your printable plan is unlocked. CoHaven can keep it live with handoff reminders, shared changes, and expense context."
          />
        </main>
      </div>

      <footer className="sb-footer no-print">
        <p>Free from <b>CoHaven</b> — keep your schedule, expenses and reminders in one shared place. <a href="/pricing">Start a 30-day trial →</a></p>
      </footer>

      <LeadGateModal
        isOpen={open}
        onCapture={onCapture}
        onDismiss={dismiss}
        headline="Send your parenting plan to your email."
        subline="We'll email your calendar so you always have a copy — and unlock printing on this device."
      />
    </div>
  );
}

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