/* global React, AppIcon, Icon, APPS */
/* Presentational device screens — all data comes in as props (wired to the live API in app.jsx). */

function fmt(s) {
  s = Math.max(0, s | 0);
  const m = Math.floor(s / 60), ss = s % 60;
  return m + ":" + String(ss).padStart(2, "0");
}

function todayLabel() {
  try {
    return new Date().toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric" });
  } catch (e) { return "Today"; }
}

/* ================= HOME / TODAY ================= */
function HomeScreen({ keyholder, blocked, statCount, statCap, grant, secondsLeft, totalSecs, onRequest, onLockNow }) {
  const pct = grant ? Math.max(0, (secondsLeft / totalSecs) * 100) : 0;
  return (
    <div className="home">
      <div className="hero">
        <div className="sun"></div>
        <div className="kick">{todayLabel()}</div>
        <h1>The feeds are <em>quiet.</em></h1>
        <p className="sub">Daylight has held the wall since you woke. Here's your day, undisturbed.</p>
      </div>

      {grant && (
        <div className="active-banner">
          <div className="ab-top">
            <div className="ab-l">
              <AppIcon app={grant.app} />
              <div className="abt">
                <div className="abn">{APPS[grant.app] ? APPS[grant.app].label : grant.app} unlocked</div>
                <div className="abd">Granted by {keyholder} · locks automatically</div>
              </div>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
              <span className="ab-time">{fmt(secondsLeft)}</span>
              <button className="ab-lock" onClick={onLockNow}>Lock now</button>
            </div>
          </div>
          <div className="ab-bar"><i style={{ width: pct + "%" }}></i></div>
        </div>
      )}

      <div className="stats">
        <div className="stat">
          <div className="sv">{statCount}</div>
          <div className="sl">{statCount === 1 ? "wall standing" : "walls standing"} right now</div>
        </div>
        <div className="stat cap-stat">
          <div className="sv">{statCap ? statCap : "—"}<span className="u">{statCap ? "m" : ""}</span></div>
          <div className="sl">{statCap ? "YouTube cap per day" : "No time caps set"}</div>
          {statCap ? <div className="bar"><i style={{ width: "0%" }}></i></div> : null}
        </div>
      </div>

      <div className="panel">
        <div className="panel-h">
          <span className="ph-t">What's blocked right now</span>
          <span className="ph-since">Set by {keyholder}</span>
        </div>
        {blocked.length === 0 && (
          <div className="brow"><div className="bn"><div className="bds">No rules yet — ask {keyholder} to set the wall.</div></div></div>
        )}
        {blocked.map((b) => (
          <div className="brow" key={b.app}>
            <AppIcon app={b.app} />
            <div className="bn">
              <div className="bnm">{APPS[b.app] ? APPS[b.app].label : b.app}</div>
              <div className="bds">{b.desc}</div>
            </div>
            <span className={"pill " + b.pill}>{b.state}</span>
          </div>
        ))}
      </div>

      <div className="btn-row">
        <button className="btn" onClick={onRequest}><Icon.clock /> Request more time</button>
      </div>

      <div className="quote">"Step out of the scroll. Back into the light."</div>
    </div>
  );
}

/* ================= RULES (read-only) ================= */
function RulesScreen({ keyholder, groups, onBack, onRequestChange }) {
  return (
    <React.Fragment>
      <div className="screen-head">
        <div className="sh-titles">
          <button className="sh-back" onClick={onBack}><Icon.back /> Today</button>
          <h2>The rules</h2>
          <p>Set by {keyholder}. You can ask {keyholder} to change them — you can't change them here.</p>
        </div>
        <span className="lock-chip"><Icon.lock /> Read-only</span>
      </div>

      <div className="rules-body">
        {groups.map((g) => (
          <div className="rgroup" key={g.label}>
            <div className="rg-label">{g.label}</div>
            {g.rows.map((r) => (
              <div className="rule-row" key={r.app + g.label}>
                <AppIcon app={r.app} size={40} />
                <div className="rr">
                  <div className="rrn">{APPS[r.app] ? APPS[r.app].label : r.app}</div>
                  <div className="rrd">{r.desc}</div>
                </div>
                <span className="rlk"><Icon.lock /></span>
              </div>
            ))}
          </div>
        ))}
        {groups.length === 0 && (
          <div className="rules-note"><Icon.lock style={{ width: 18, height: 18 }} /><span>No rules set yet. Ask {keyholder} to put the wall up from her dashboard.</span></div>
        )}
        <div className="rules-note">
          <Icon.lock style={{ width: 18, height: 18 }} />
          <span>Locked behind {keyholder}'s Screen Time passcode and iPad supervision. Deleting Daylight or changing these needs {keyholder} — not you.</span>
        </div>
        <button className="btn" style={{ marginTop: 4 }} onClick={onRequestChange}><Icon.clock /> Request a change</button>
      </div>
    </React.Fragment>
  );
}

/* ================= REQUEST SHEET (compose → waiting → granted) ================= */
function RequestSheet({ step, keyholder, choices, onClose, onSend, onOpen, picked, setPicked, mins, setMins, reason, setReason, error }) {
  const durations = [15, 30, 60];
  const label = APPS[picked] ? APPS[picked].label : picked;

  if (step === "waiting") {
    return (
      <div className="scrim">
        <div className="sheet">
          <div className="grab"></div>
          <div className="waiting">
            <div className="pending">
              <div className="ring"></div>
              <div className="ring spin"></div>
              <div className="pulse"></div>
              <div className="av">{keyholder.slice(0, 1).toUpperCase()}</div>
            </div>
            <h3>Asked {keyholder}.</h3>
            <p className="sub">{keyholder} has been notified. {label} unlocks the moment she taps approve — and re-locks on its own after {mins} minutes.</p>
            <button className="btn btn-ghost" style={{ marginTop: 28, maxWidth: 260 }} onClick={onClose}>Close</button>
          </div>
        </div>
      </div>
    );
  }

  if (step === "granted") {
    return (
      <div className="scrim">
        <div className="sheet">
          <div className="grab"></div>
          <div className="granted">
            <div className="burst"></div>
            <div className="check"><svg width="56" height="56" viewBox="0 0 24 24"><path d="M5 13l4 4 10-11" /></svg></div>
            <h3>{keyholder} said yes.</h3>
            <p className="sub">{mins} minutes of {label}. The timer starts now, and it locks again on its own.</p>
            <button className="btn" style={{ marginTop: 30, maxWidth: 320 }} onClick={onOpen}>Start the timer</button>
          </div>
        </div>
      </div>
    );
  }

  // compose
  return (
    <div className="scrim" onClick={onClose}>
      <div className="sheet" onClick={(e) => e.stopPropagation()}>
        <div className="grab"></div>
        <h3>Ask for some time</h3>
        <p className="sub">{keyholder} holds the keys. Tell {keyholder} what you need and she'll approve it from her phone.</p>

        <div className="field-label">What do you need?</div>
        <div className="opt-row">
          {choices.map((c) => (
            <div className={"opt" + (picked === c ? " sel" : "")} key={c} onClick={() => setPicked(c)}>
              <AppIcon app={c} size={38} />
              <span className="on">{APPS[c] ? APPS[c].label : c}</span>
            </div>
          ))}
        </div>

        <div className="field-label">For how long?</div>
        <div className="chips">
          {durations.map((d) => (
            <div className={"dchip" + (mins === d ? " sel" : "")} key={d} onClick={() => setMins(d)}>
              {d < 60 ? d + " min" : "1 hour"}
            </div>
          ))}
        </div>

        <div className="field-label">Why? ({keyholder} will see this)</div>
        <textarea className="reason" placeholder="Looking up a recipe / a tutorial for the deck…" value={reason} onChange={(e) => setReason(e.target.value)}></textarea>

        {error && <div className="form-err">{error}</div>}
        <button className="btn" style={{ marginTop: 22 }} onClick={onSend}>Send to {keyholder}</button>
      </div>
    </div>
  );
}

Object.assign(window, { HomeScreen, RulesScreen, RequestSheet, fmt });