/* flows.jsx — bottom sheets + award flow + celebration (window globals) */
const { useState, useEffect, useRef } = React;

/* Reusable bottom sheet with enter/exit transitions */
function Sheet({ open, onClose, children, grabberFloat }){
  const [mounted, setMounted] = useState(false);
  const [entered, setEntered] = useState(false);
  useEffect(() => {
    let t;
    if (open) {
      setMounted(true);
      t = setTimeout(() => setEntered(true), 24);
      return () => clearTimeout(t);
    } else if (mounted) {
      setEntered(false);
      t = setTimeout(() => setMounted(false), 360);
      return () => clearTimeout(t);
    }
  }, [open]);
  if (!mounted) return null;
  return (
    <div className="sheet-backdrop" data-in={entered} onClick={onClose}>
      <div className="sheet-panel" data-in={entered} onClick={e => e.stopPropagation()}>
        <div className={'grabber' + (grabberFloat ? ' float' : '')}></div>
        {children}
      </div>
    </div>
  );
}

function BadgeVisual({ badge, className, hexClass, size }){
  if (badge?.img) return <img className={className} src={badge.img} alt={badge.name} />;
  return <div className={hexClass}><HexPlaceholder size={size} /></div>;
}

function DetailSheet({ badge, open, onClose, onGive }){
  return (
    <Sheet open={open} onClose={onClose} grabberFloat>
      <div className="sheet-scroll">
        <div className="detail-stage">
          <div className="detail-ped"></div>
          {badge && (badge.img
            ? <img className="detail-badge" src={badge.img} alt={badge.name} />
            : <div style={{ width:188, height:188 }}><HexPlaceholder size={188} /></div>)}
          <h2 className="detail-name">{badge?.name}</h2>
          <div style={{ marginTop:12, zIndex:1 }}><CatTag cat={badge?.cat || 'System'} /></div>
        </div>
        <div className="detail-body">
          <p className="sec-label">How it's earned</p>
          <p className="crit">{badge?.criteria}</p>
          <div className="earned-row">
            <div className="ava-stack">
              {(badge?.earnedBy || []).slice(0,4).map(n => <Avatar key={n} name={n} size={34} />)}
            </div>
            <span className="earned-txt">
              {badge?.earnedCount > 0
                ? <span><b>{badge.earnedCount} teammates</b> have earned this</span>
                : <span>Be the first to award this badge</span>}
            </span>
          </div>
        </div>
      </div>
      <div className="sheet-foot">
        <button className="btn-primary" onClick={onGive}>
          <Ic.Rosette s={20} c="#fff" /> Give this badge
        </button>
      </div>
    </Sheet>
  );
}

const CONFETTI_COLORS = ['#E0A93B','#E0625E','#3E8E8E','#6B6B9E','#E9DFC8'];
function makeConfetti(n){
  const out = [];
  for (let i=0;i<n;i++){
    const round = i % 3 === 0;
    out.push({
      left: 4 + (i * 92 / n) + ((i*37)%9) - 4,
      delay: ((i*53)%70)/100,
      dur: 1.5 + ((i*29)%80)/100,
      w: round ? 8 : 7,
      h: round ? 8 : 12,
      color: CONFETTI_COLORS[i % CONFETTI_COLORS.length],
      round,
      rot: (i*47)%360,
    });
  }
  return out;
}
const CONFETTI = makeConfetti(26);

function Celebration({ data, open, onClose, onAnother }){
  const [mounted, setMounted] = useState(false);
  const [entered, setEntered] = useState(false);
  useEffect(() => {
    let t;
    if (open) { setMounted(true); t = setTimeout(() => setEntered(true), 24); return () => clearTimeout(t); }
    else if (mounted) { setEntered(false); t = setTimeout(() => setMounted(false), 320); return () => clearTimeout(t); }
  }, [open]);
  if (!mounted) return null;

  const badge = data?.badge;
  const count = data?.count || 0;
  const names = data?.names || [];

  return (
    <div className="celebrate" data-in={entered}>
      <div className="confetti" aria-hidden="true">
        {CONFETTI.map((c,i) => (
          <i key={i} style={{
            left: c.left + '%', width: c.w, height: c.h,
            background: c.color, borderRadius: c.round ? '50%' : 2,
            animation: entered ? `fall ${c.dur}s linear ${c.delay}s 1 both` : 'none',
          }}></i>
        ))}
      </div>
      <div className="cele-glow"></div>

      <div className="cele-badge-wrap">
        {badge && (badge.img
          ? <img className="cele-badge" src={badge.img} alt={badge.name} />
          : <div className="cele-hex"><HexPlaceholder size={176} /></div>)}
        <div className="cele-shine"></div>
      </div>

      <p className="cele-eyebrow">{data?.eyebrow || 'Recognition sent'}</p>
      <h2 className="cele-title">{data?.title || 'Awarded!'}</h2>
      <p className="cele-sub"><b>{badge?.name}</b> is on its way to{' '}
        <b>{count === 1 ? names[0] : `${count} teammates`}</b>. They'll get a notification to celebrate.</p>
      <div className="cele-actions">
        <button className="btn-primary" onClick={onClose}>Done</button>
        <button className="btn-ghost" onClick={onAnother}>Award another badge</button>
      </div>
    </div>
  );
}

Object.assign(window, { Sheet, DetailSheet, Celebration });

/* ---------- Overflow action sheet (iOS HIG style) ---------- */
function ActionSheet({ badge, open, onClose, onDelete }){
  const [mounted, setMounted] = useState(false);
  const [entered, setEntered] = useState(false);
  useEffect(() => {
    let t;
    if (open) { setMounted(true); t = setTimeout(() => setEntered(true), 24); return () => clearTimeout(t); }
    else if (mounted) { setEntered(false); t = setTimeout(() => setMounted(false), 300); return () => clearTimeout(t); }
  }, [open]);
  if (!mounted) return null;

  const actions = [
    { key:'delete', label:'Delete badge', icon: Ic.Trash, on:onDelete, destructive:true },
  ];

  return (
    <div className="as-backdrop" data-in={entered} onClick={onClose}>
      <div className="as-wrap" data-in={entered} onClick={e => e.stopPropagation()}>
        <div className="as-group">
          <div className="as-header">
            <div className="as-thumb">
              {badge && (badge.img ? <img src={badge.img} alt="" /> : <HexPlaceholder size={30} hint={false} />)}
            </div>
            <div className="as-header-text">
              <div className="as-badge-name">{badge?.name}</div>
              <div className="as-badge-sub">{badge?.cat} badge</div>
            </div>
          </div>
          {actions.map(a => (
            <button key={a.key} className={'as-row' + (a.destructive ? ' destructive' : '')} onClick={a.on}>
              <span className="as-ic"><a.icon s={21} c={a.destructive ? 'var(--ios-red-strong)' : 'var(--ink)'} /></span>
              <span className="as-label">{a.label}</span>
            </button>
          ))}
        </div>
        <button className="as-cancel" onClick={onClose}>Cancel</button>
      </div>
    </div>
  );
}

/* ---------- Delete badge confirmation modal (checkbox-gated) ---------- */
function DeleteBadgeModal({ badge, open, onCancel, onConfirm }){
  const [mounted, setMounted] = useState(false);
  const [entered, setEntered] = useState(false);
  const [checked, setChecked] = useState(false);
  useEffect(() => {
    let t;
    if (open) { setChecked(false); setMounted(true); t = setTimeout(() => setEntered(true), 24); return () => clearTimeout(t); }
    else if (mounted) { setEntered(false); t = setTimeout(() => setMounted(false), 240); return () => clearTimeout(t); }
  }, [open]);
  if (!mounted) return null;

  return (
    <div className="dm-backdrop" data-in={entered} onClick={onCancel}>
      <div className="dm-box" data-in={entered} onClick={e => e.stopPropagation()}>
        <button className="dm-close" onClick={onCancel} aria-label="Close"><Ic.Close s={20} c="var(--ink-2)" /></button>
        <h2 className="dm-title">Delete this badge?</h2>

        <div className="dm-art" aria-hidden="true">
          <div className="dm-surface"></div>
          <div className="dm-shadow"></div>
          {badge && (badge.img
            ? <img className="dm-badge" src={badge.img} alt="" />
            : <div className="dm-badge" style={{ display:'flex' }}><HexPlaceholder size={104} /></div>)}
          <div className="dm-alert"><span>!</span></div>
        </div>

        <div className="dm-name">{badge?.name}</div>
        <p className="dm-sub">This can't be undone.</p>

        <button className={'dm-check-row' + (checked ? ' on' : '')} onClick={() => setChecked(v => !v)} role="checkbox" aria-checked={checked}>
          <span className="dm-check">{checked && <Ic.Check s={16} c="#fff" />}</span>
          <span className="dm-check-label">Yes, delete this badge</span>
        </button>

        <button className="dm-delete" disabled={!checked} onClick={onConfirm}>
          <Ic.Trash s={20} c="#fff" /> Delete
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { ActionSheet, DeleteBadgeModal });

/* ---------- Sort bottom sheet (compact, content-hugging) ---------- */
const SORT_OPTIONS = [
  { id:'newest', label:'Newest first' },
  { id:'oldest', label:'Oldest first' },
  { id:'az', label:'A → Z' },
  { id:'za', label:'Z → A' },
];

function SortSheet({ open, value, onClose, onPick, options }){
  const opts = options || SORT_OPTIONS;
  const [mounted, setMounted] = useState(false);
  const [entered, setEntered] = useState(false);
  useEffect(() => {
    let t;
    if (open) { setMounted(true); t = setTimeout(() => setEntered(true), 24); return () => clearTimeout(t); }
    else if (mounted) { setEntered(false); t = setTimeout(() => setMounted(false), 300); return () => clearTimeout(t); }
  }, [open]);
  if (!mounted) return null;

  return (
    <div className="srt-backdrop" data-in={entered} onClick={onClose}>
      <div className="srt-panel" data-in={entered} onClick={e => e.stopPropagation()}>
        <div className="srt-head">
          <h3 className="srt-title">Sort</h3>
          <button className="srt-done" onClick={onClose}>Done</button>
        </div>
        <div className="srt-divider"></div>
        <div className="srt-options">
          {opts.map(opt => {
            const sel = opt.id === value;
            return (
              <button key={opt.id} className={'srt-opt' + (sel ? ' sel' : '')} onClick={() => onPick(opt)} role="radio" aria-checked={sel}>
                <span className="srt-radio">{sel && <span className="srt-dot"></span>}</span>
                <span className="srt-opt-label">{opt.label}</span>
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SortSheet, SORT_OPTIONS });