// ============================================================================
// CHALLENGES — Photo Quest main screen
// ----------------------------------------------------------------------------
// The centerpiece of daily engagement:
//   - Day chip strip (scroll through all 12 days)
//   - Progress ring (X/20 for selected day, concrete + creative split)
//   - Concrete section (10 location-based prompts)
//   - Creative section (10 open prompts)
//   - Each slot shows thumbs from all members; tap to add, tap thumb to view
//   - Offline queue indicator at top-right
//   - On 20/20: badge + confetti + auto-gallery
// ============================================================================

const { useState: cqS, useEffect: cqE, useMemo: cqM, useRef: cqR, useCallback: cqCB } = React;

// ---- Progress ring --------------------------------------------------------
function ProgressRing({ pct, size = 64, stroke = 5, color = 'var(--brand)', track = 'var(--line)' }) {
  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  const offset = c * (1 - Math.max(0, Math.min(100, pct)) / 100);
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ display: 'block' }}>
      <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={offset}
              transform={`rotate(-90 ${size / 2} ${size / 2})`}
              style={{ transition: 'stroke-dashoffset 440ms ease-out' }} />
    </svg>
  );
}

// ---- Slot card (one prompt) ----------------------------------------------
function QuestSlot({ slot, dayId, submissions, onAdd, onThumbTap, actor }) {
  const filled = submissions.length > 0;
  const meContribution = submissions.find((s) => s.memberId === actor);
  const isMyTask = slot.assignedTo === actor;
  const assignee = slot.assignedTo ? (window.TEAM || []).find((m) => m.id === slot.assignedTo) : null;
  return (
    <div className={`qs-slot ${filled ? 'qs-filled' : ''} ${isMyTask ? 'qs-mine' : ''}`}>
      <div className="qs-head">
        <div className="qs-title">{slot.title}</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          {assignee && (
            <div className="qs-assignee" style={{ background: `var(--mcolor-${assignee.id})` }}
                 title={assignee.name}>
              {assignee.name[0]}
            </div>
          )}
          {filled && <div className="qs-check">✓</div>}
        </div>
      </div>
      {isMyTask && !filled && <div className="qs-mytask-label">Twoje zadanie</div>}
      {slot.hint && <div className="qs-hint">{slot.hint}</div>}
      <div className="qs-thumbs">
        {submissions.map((sub, i) => (
          <button key={sub.id} className={`qs-thumb qs-status-${sub.status}`}
                  onClick={() => onThumbTap(sub)}
                  style={{ backgroundImage: sub.localBlobUrl || sub.url ? `url(${sub.localBlobUrl || sub.url})` : 'none' }}
                  aria-label={`Photo by ${(window.TEAM.find(m => m.id === sub.memberId) || {}).name}`}>
            {!(sub.localBlobUrl || sub.url) && <span className="qs-thumb-fallback">IMG</span>}
            {sub.status === 'queued' || sub.status === 'uploading' ? <div className="qs-thumb-overlay"><div className="qs-spinner" /></div> : null}
            {sub.status === 'offline-queued' ? <div className="qs-thumb-overlay"><Icon name="cloudOff" size={14} /></div> : null}
            <div className="qs-thumb-who" style={{ background: `var(--mcolor-${sub.memberId})` }} />
          </button>
        ))}
        <button className={`qs-add ${meContribution ? 'mine' : ''} ${isMyTask && !meContribution ? 'qs-add-primary' : ''}`}
                onClick={() => onAdd(slot)}
                aria-label={meContribution ? 'Replace your photo' : 'Add photo'}>
          {meContribution ? <Icon name="camera" size={16} /> : <Icon name="plus" size={18} />}
          <span>{meContribution ? 'Replace' : isMyTask ? 'Dodaj swoje' : 'Add'}</span>
        </button>
      </div>
    </div>
  );
}

// ---- Capture sheet (hidden file input + preview) -------------------------
function CaptureSheet({ slot, dayId, onClose }) {
  const pq = usePhotoQuest();
  const fileRef = cqR(null);
  const [selected, setSelected] = cqS(null);

  cqE(() => { if (slot) setTimeout(() => fileRef.current?.click(), 50); }, [slot]);

  if (!slot) return null;

  const handleFile = (e) => {
    const file = e.target.files?.[0];
    if (!file) { onClose(); return; }
    setSelected({ url: URL.createObjectURL(file), blob: file });
  };
  const submit = async () => {
    if (!selected) return;
    await pq.createSubmission({ dayId, slotId: slot.id, blob: selected.blob });
    setSelected(null);
    onClose();
  };

  return (
    <div className="qc-sheet-backdrop" onClick={onClose}>
      <div className="qc-sheet" onClick={(e) => e.stopPropagation()}>
        <input ref={fileRef} type="file" accept="image/*" capture="environment"
               style={{ display: 'none' }} onChange={handleFile} />
        <div className="qc-sheet-head">
          <div className="qc-sheet-kind" style={{ background: slot.kind === 'concrete' ? 'var(--brand-soft)' : 'color-mix(in oklch, var(--accent) 14%, transparent)' }}>
            {slot.kind === 'concrete' ? 'LOCATION' : 'CREATIVE'}
          </div>
          <button onClick={onClose} className="qc-close">✕</button>
        </div>
        <div className="qc-title">{slot.title}</div>
        {slot.hint && <div className="qc-hint">{slot.hint}</div>}
        {selected ? (
          <div>
            <img src={selected.url} alt="" className="qc-preview" />
            <div className="qc-actions">
              <button className="qc-btn-secondary" onClick={() => { setSelected(null); fileRef.current?.click(); }}>Retake</button>
              <button className="qc-btn-primary" onClick={submit}>Submit</button>
            </div>
          </div>
        ) : (
          <div className="qc-empty">Camera opening…</div>
        )}
      </div>
    </div>
  );
}

// ---- Confetti overlay -----------------------------------------------------
function ConfettiOverlay({ event, onDismiss }) {
  if (!event) return null;
  const quest = (window.PHOTO_QUESTS || {})[event.dayId];
  const day = (window.DAYS || []).find((d) => d.id === event.dayId);
  return (
    <div className="qc-confetti-root" onClick={onDismiss}>
      <div className="qc-confetti-field">
        {Array.from({ length: 40 }).map((_, i) => (
          <span key={i} className="qc-confetti-piece" style={{
            left: `${Math.random() * 100}%`,
            animationDelay: `${Math.random() * 0.4}s`,
            background: ['var(--brand)', 'var(--accent)', 'var(--status-ok)', 'var(--status-stale)'][i % 4],
          }} />
        ))}
      </div>
      <div className="qc-confetti-card">
        <div className="qc-badge">
          <svg viewBox="0 0 100 100" width="72" height="72" aria-hidden="true">
            <circle cx="50" cy="50" r="44" fill="var(--brand)" />
            <path d="M28 52 L44 66 L72 36" stroke="white" strokeWidth="6" fill="none" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>
        <div className="qc-confetti-eyebrow">DAY {day?.n} · COMPLETE</div>
        <div className="qc-confetti-title">20 of 20</div>
        <div className="qc-confetti-sub">{day?.title}</div>
        <button className="qc-btn-primary" onClick={onDismiss}>See the gallery</button>
      </div>
    </div>
  );
}

// ---- Main screen ----------------------------------------------------------
function ChallengesScreen() {
  const nav = useNav();
  const pq = usePhotoQuest();
  const [selectedDayId, setSelectedDayId] = cqS(() => pq.getTodayDayId() || (window.DAYS[0] && window.DAYS[0].id));
  const [captureSlot, setCaptureSlot] = cqS(null);

  const day = (window.DAYS || []).find((d) => d.id === selectedDayId) || window.DAYS[0];
  const quest = (window.PHOTO_QUESTS || {})[selectedDayId];
  const summary = pq.getDaySummary(selectedDayId);
  const leaderboard = pq.getLeaderboard();

  const onAdd = (slot) => setCaptureSlot(slot);
  const onThumbTap = (sub) => {
    // For prototype just open a quick fullscreen viewer
    const url = sub.localBlobUrl || sub.url;
    if (url) window.open(url, '_blank');
  };

  return (
    <div className="screen">
      <div className="screen-inner">
        {/* Top bar */}
        <div className="top-bar">
          <button className="rbtn" onClick={() => nav.back()}>
            <Icon name="chevronLeft" size={16} />
          </button>
          <div className="top-title">Photo Quest</div>
          <div className="cq-sync">
            {!pq.online && <div className="cq-sync-pill offline"><span className="dot" /> Offline</div>}
            {pq.online && pq.queue.length > 0 && <div className="cq-sync-pill"><span className="dot" /> {pq.queue.length} syncing</div>}
            {pq.online && pq.queue.length === 0 && <div className="cq-sync-pill ok"><span className="dot" /> Synced</div>}
          </div>
        </div>

        {/* Day strip */}
        <div className="cq-day-strip">
          {window.DAYS.map((d) => {
            const s = pq.getDaySummary(d.id);
            const hasBadge = pq.hasBadge(d.id);
            return (
              <button key={d.id} className={`cq-day-chip ${d.id === selectedDayId ? 'active' : ''}`}
                      onClick={() => setSelectedDayId(d.id)}>
                <div className="cq-day-n">D{d.n}</div>
                <div className="cq-day-ring">
                  <ProgressRing pct={s.pct} size={36} stroke={3} />
                  <div className="cq-day-pct">{s.filled}</div>
                </div>
                {hasBadge && <div className="cq-day-badge">✓</div>}
              </button>
            );
          })}
        </div>

        {/* Day header */}
        <div className="cq-day-head">
          <div className="cq-day-head-left">
            <div className="cq-day-head-eyebrow">DAY {day?.n} · {day?.date}</div>
            <div className="cq-day-head-title">{day?.title}</div>
          </div>
          <div className="cq-day-head-right">
            <ProgressRing pct={summary.pct} size={64} stroke={5} />
            <div className="cq-day-head-count"><strong>{summary.filled}</strong>/{summary.total}</div>
          </div>
        </div>

        {/* Split counters */}
        <div className="cq-split">
          <div className="cq-split-cell">
            <div className="cq-split-n">{summary.concreteFilled}/10</div>
            <div className="cq-split-label">Locations</div>
          </div>
          <div className="cq-split-divider" />
          <div className="cq-split-cell">
            <div className="cq-split-n">{summary.creativeFilled}/10</div>
            <div className="cq-split-label">Creative</div>
          </div>
        </div>

        {/* Leaderboard */}
        <div className="cq-leader">
          <div className="cq-leader-head">Family leaderboard · all days</div>
          <div className="cq-leader-row">
            {leaderboard.map((m, i) => (
              <div key={m.id} className="cq-leader-cell">
                <div className="cq-leader-avatar" style={{ background: `var(--mcolor-${m.id})` }}>{m.name[0]}</div>
                <div className="cq-leader-n">{m.contributions}</div>
                <div className="cq-leader-name">{m.name.split(' ')[0]}</div>
                {i === 0 && m.contributions > 0 && <div className="cq-leader-crown">★</div>}
              </div>
            ))}
          </div>
        </div>

        {/* Concrete section */}
        <div className="section-head" style={{ marginTop: 24 }}>
          <div>
            <div className="eyebrow">LOCATIONS</div>
            <div className="section-title">10 specific shots</div>
          </div>
          <div className="cq-section-count">{summary.concreteFilled}/10</div>
        </div>
        <div className="cq-slots">
          {(quest?.concrete || []).map((slot) => (
            <QuestSlot key={slot.id} slot={slot} dayId={selectedDayId}
                       submissions={pq.getSlotSubmissions(selectedDayId, slot.id)}
                       onAdd={onAdd} onThumbTap={onThumbTap} actor={pq.actor} />
          ))}
        </div>

        {/* Creative section */}
        <div className="section-head" style={{ marginTop: 24 }}>
          <div>
            <div className="eyebrow">CREATIVE</div>
            <div className="section-title">10 open prompts</div>
          </div>
          <div className="cq-section-count">{summary.creativeFilled}/10</div>
        </div>
        <div className="cq-slots">
          {(quest?.creative || []).map((slot) => (
            <QuestSlot key={slot.id} slot={slot} dayId={selectedDayId}
                       submissions={pq.getSlotSubmissions(selectedDayId, slot.id)}
                       onAdd={onAdd} onThumbTap={onThumbTap} actor={pq.actor} />
          ))}
        </div>

        <div style={{ height: 140 }} />
      </div>

      {captureSlot && <CaptureSheet slot={captureSlot} dayId={selectedDayId} onClose={() => setCaptureSlot(null)} />}
      {pq.completionEvent && <ConfettiOverlay event={pq.completionEvent} onDismiss={pq.clearCompletionEvent} />}
    </div>
  );
}

window.ChallengesScreen = ChallengesScreen;
window.ProgressRing = ProgressRing;