// app/widgets.jsx — Scriptable-style Home Screen + Lock Screen widget mocks.
// Real iOS widget proportions. Shared via window.

// Small ring used inside widgets
function WRing({ pct, size, stroke, color, track, children }) {
  const r = (size - stroke) / 2, c = 2 * Math.PI * r, off = c * (1 - pct / 100);
  return (
    <div style={{ position: 'relative', width: size, height: size }}>
      <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={track} strokeWidth={stroke} />
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={color} strokeWidth={stroke} strokeLinecap="round" strokeDasharray={c} strokeDashoffset={off} />
      </svg>
      <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{children}</div>
    </div>
  );
}

// ── Home Screen widget — small (158×158) ─────────────────────────────────────
function WidgetHomeSmall({ accent, font, day, dayNum, total, pct, streak }) {
  return (
    <div style={{ width: 158, height: 158, borderRadius: 30, background: 'linear-gradient(155deg,#1b2d4f,#0c1830)', padding: 16, position: 'relative', overflow: 'hidden', boxShadow: '0 12px 26px rgba(0,0,0,0.25)' }}>
      <div style={{ position: 'absolute', inset: 8, border: `1px solid ${accent.base}`, opacity: 0.2, borderRadius: 22, pointerEvents: 'none' }} />
      <div style={{ position: 'relative', height: '100%', display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span style={{ fontSize: 9.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: accent.base, fontWeight: 800 }}>Day {dayNum}</span>
          <span style={{ display: 'flex', alignItems: 'center', gap: 3, color: accent.base, fontSize: 11, fontWeight: 800 }}>
            <Icon name="flame" size={13} stroke={2.1} />{streak}
          </span>
        </div>
        <div style={{ flex: 1, display: 'flex', alignItems: 'center' }}>
          <div style={{ fontFamily: font, fontSize: 25, lineHeight: 1.05, color: '#f3ecd9', fontWeight: 600 }}>{day.ref}</div>
        </div>
        <div>
          <div style={{ height: 5, borderRadius: 999, background: 'rgba(255,255,255,0.15)', overflow: 'hidden' }}>
            <div style={{ height: '100%', width: `${pct}%`, background: accent.base, borderRadius: 999 }} />
          </div>
          <div style={{ fontSize: 9.5, color: 'rgba(243,236,217,0.6)', fontWeight: 600, marginTop: 5 }}>{pct}% · {day.verses} verses today</div>
        </div>
      </div>
    </div>
  );
}

// ── Home Screen widget — medium (338×158) ────────────────────────────────────
function WidgetHomeMedium({ accent, font, day, dayNum, total, pct, streak, verse }) {
  return (
    <div style={{ width: 338, height: 158, borderRadius: 30, background: 'linear-gradient(155deg,#1b2d4f,#0c1830)', padding: 18, position: 'relative', overflow: 'hidden', boxShadow: '0 12px 26px rgba(0,0,0,0.25)' }}>
      <div style={{ position: 'absolute', inset: 9, border: `1px solid ${accent.base}`, opacity: 0.18, borderRadius: 22, pointerEvents: 'none' }} />
      <div style={{ position: 'relative', height: '100%', display: 'flex', gap: 18 }}>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: accent.base, fontWeight: 800 }}>Today · Day {dayNum}</span>
          </div>
          <div style={{ fontFamily: font, fontSize: 27, lineHeight: 1.05, color: '#f3ecd9', fontWeight: 600, marginTop: 7 }}>{day.ref}</div>
          <div style={{ fontSize: 11.5, color: 'rgba(243,236,217,0.66)', fontWeight: 500, marginTop: 4, fontStyle: 'italic', fontFamily: font, lineHeight: 1.35, overflow: 'hidden', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' }}>“{verse.text}”</div>
          <div style={{ flex: 1 }} />
          <div style={{ height: 5, borderRadius: 999, background: 'rgba(255,255,255,0.15)', overflow: 'hidden' }}>
            <div style={{ height: '100%', width: `${pct}%`, background: accent.base, borderRadius: 999 }} />
          </div>
        </div>
        <div style={{ width: 1, background: accent.base, opacity: 0.18 }} />
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 8, width: 70 }}>
          <WRing pct={pct} size={62} stroke={6} color={accent.base} track="rgba(255,255,255,0.14)">
            <span style={{ fontFamily: font, fontSize: 17, color: '#f3ecd9', fontWeight: 700 }}>{pct}%</span>
          </WRing>
          <span style={{ display: 'flex', alignItems: 'center', gap: 4, color: accent.base, fontSize: 12, fontWeight: 800 }}>
            <Icon name="flame" size={14} stroke={2.1} />{streak}
          </span>
        </div>
      </div>
    </div>
  );
}

// ── Lock Screen widgets ──────────────────────────────────────────────────────
// circular (gauge)
function WidgetLockCircular({ day, dayNum, pct }) {
  return (
    <div style={{ width: 72, height: 72, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
      <WRing pct={pct} size={64} stroke={6} color="#fff" track="rgba(255,255,255,0.32)">
        <div style={{ textAlign: 'center' }}>
          <Icon name="book" size={16} stroke={2} style={{ color: '#fff' }} />
          <div style={{ fontSize: 11, color: '#fff', fontWeight: 800, lineHeight: 1, marginTop: 1 }}>{dayNum}</div>
        </div>
      </WRing>
    </div>
  );
}
// rectangular
function WidgetLockRect({ day, dayNum, pct, font }) {
  return (
    <div style={{ width: 170, height: 72, display: 'flex', flexDirection: 'column', justifyContent: 'center', color: '#fff' }}>
      <div style={{ fontSize: 10.5, letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 800, opacity: 0.85, display: 'flex', alignItems: 'center', gap: 4 }}>
        <Icon name="book" size={12} stroke={2.2} /> Day {dayNum}
      </div>
      <div style={{ fontFamily: font, fontSize: 21, fontWeight: 700, lineHeight: 1.05, marginTop: 2 }}>{day.ref}</div>
      <div style={{ height: 4, borderRadius: 999, background: 'rgba(255,255,255,0.3)', overflow: 'hidden', marginTop: 5 }}>
        <div style={{ height: '100%', width: `${pct}%`, background: '#fff', borderRadius: 999 }} />
      </div>
    </div>
  );
}
// inline (above clock)
function WidgetLockInline({ day, dayNum }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 5, color: '#fff', fontSize: 13.5, fontWeight: 600 }}>
      <Icon name="book" size={14} stroke={2} /> {day.ref} · Day {dayNum}
    </div>
  );
}

Object.assign(window, { WidgetHomeSmall, WidgetHomeMedium, WidgetLockCircular, WidgetLockRect, WidgetLockInline, WRing });