/* global React, Phone, Butterfly, Avatar, CompanyMark, MatchRing, TabBar */

/* =========================================================
   25 · APPLICATIONS TRACKER — All roles you've engaged
   ========================================================= */
function ScrApplications() {
  const states = {
    interview: { l: 'Interview booked', bg: 'var(--cocoon-yellow)', col: 'var(--cocoon-ink)' },
    shortlisted: { l: 'Shortlisted',     bg: 'var(--cocoon-ink)',   col: 'var(--cocoon-yellow)' },
    pending: { l: 'Awaiting reply',      bg: 'rgba(31,36,33,0.06)', col: 'var(--cocoon-graphite)' },
    declined: { l: 'Declined',           bg: 'rgba(180,58,46,0.10)', col: 'var(--color-error)' },
  };
  const rows = [
    { co: 'Folk & Form',      role: 'Brand Designer',    pct: 96, st: 'interview', when: 'Interview · Wed 22 May', letter: 'F' },
    { co: 'Northwind Studio', role: 'Product Designer',  pct: 89, st: 'shortlisted', when: 'They viewed · 2h ago', letter: 'N' },
    { co: 'Atlas & Co',       role: 'Junior Designer',   pct: 84, st: 'pending', when: 'Sent · 3 days ago', letter: 'A' },
    { co: 'Bright & Co',      role: 'Brand Strategist',  pct: 81, st: 'pending', when: 'Sent · 5 days ago', letter: 'B' },
    { co: 'Loop Labs',        role: 'Brand Designer',    pct: 78, st: 'declined', when: 'Closed · last week', letter: 'L' },
  ];
  return (
    <Phone bg="var(--cocoon-paper)">
      <div className="scr" style={{ paddingTop: 56 }}>

        <div style={{ padding: '0 20px 14px' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
            <Butterfly size={28} />
            <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(31,36,33,0.06)', display: 'grid', placeItems: 'center' }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M3 6h18M6 12h12M9 18h6" stroke="var(--cocoon-ink)" strokeWidth="1.8" strokeLinecap="round"/></svg>
            </div>
          </div>
          <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 32, lineHeight: 1, color: 'var(--cocoon-ink)' }}>Applications</div>
          <div style={{ fontSize: 13, color: 'var(--cocoon-graphite)', marginTop: 4 }}>5 active · 1 interview booked</div>
        </div>

        <div className="scr-inner" style={{ paddingTop: 12 }}>

          {/* Filter tabs */}
          <div style={{ display: 'flex', gap: 6, marginBottom: 16, overflowX: 'auto' }}>
            <span className="app-chip ink">All · 5</span>
            <span className="app-chip">Active</span>
            <span className="app-chip">Booked</span>
            <span className="app-chip">Closed</span>
          </div>

          {/* Rows */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {rows.map((r, i) => {
              const s = states[r.st];
              return (
                <div key={i} style={{ background: '#fff', border: '1px solid var(--cocoon-border)', borderRadius: 16, padding: 14 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10 }}>
                    <div style={{ width: 38, height: 38, borderRadius: 9, background: 'var(--cocoon-ink)', display: 'grid', placeItems: 'center' }}>
                      <span style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 18, color: 'var(--cocoon-yellow)' }}>{r.letter}</span>
                    </div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--cocoon-ink)' }}>{r.co}</div>
                      <div style={{ fontSize: 11.5, color: 'var(--cocoon-mid)' }}>{r.role}</div>
                    </div>
                    <MatchRing value={r.pct} size={44} stroke={3.5} label="" />
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderTop: '1px solid var(--cocoon-border)', paddingTop: 10 }}>
                    <span style={{
                      background: s.bg, color: s.col,
                      fontSize: 11, fontWeight: 600, padding: '4px 10px', borderRadius: 999,
                      letterSpacing: '0.02em',
                    }}>{s.l}</span>
                    <span style={{ fontSize: 11, color: 'var(--cocoon-mid)' }}>{r.when}</span>
                  </div>
                </div>
              );
            })}
          </div>

          <div style={{ textAlign: 'center', marginTop: 16, fontSize: 12, color: 'var(--cocoon-mid)' }}>
            Cocoon ranks active applications by likelihood of reply.
          </div>
        </div>

        <TabBar active="inbox" />
      </div>
    </Phone>
  );
}

/* =========================================================
   26 · APPLICATION DETAIL — Timeline view
   ========================================================= */
function ScrApplicationDetail() {
  const events = [
    { day: 'Today',        time: '14:48', t: 'Interview booked',      m: 'Wed 22 May · 11:30 with James Carter', tone: 'yellow' },
    { day: 'Today',        time: '14:32', t: "You confirmed a slot",  m: 'Picked Wed 22 May · 11:30' },
    { day: 'Today',        time: '13:18', t: 'They invited you',       m: '"Loved your fintech story — free for a chat?"', tone: 'ink' },
    { day: 'Yesterday',    time: '09:04', t: 'Shortlisted',            m: 'Folk & Form moved you to their shortlist' },
    { day: '3 days ago',   time: '21:11', t: 'You sent interest',      m: 'With your verified Figma badge' },
  ];
  return (
    <Phone bg="#fff">
      <div className="scr no-tab" style={{ paddingTop: 56 }}>

        <div style={{ padding: '0 20px 14px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(31,36,33,0.06)', display: 'grid', placeItems: 'center' }}>
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M13 8H3M7 4L3 8l4 4" stroke="var(--cocoon-ink)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </div>
          <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--cocoon-graphite)' }}>Application</div>
          <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(31,36,33,0.06)', display: 'grid', placeItems: 'center' }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><circle cx="5" cy="12" r="1.5" fill="var(--cocoon-ink)"/><circle cx="12" cy="12" r="1.5" fill="var(--cocoon-ink)"/><circle cx="19" cy="12" r="1.5" fill="var(--cocoon-ink)"/></svg>
          </div>
        </div>

        <div className="scr-inner" style={{ paddingTop: 0, paddingBottom: 8 }}>

          {/* Hero */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 14 }}>
            <div style={{ width: 56, height: 56, borderRadius: 13, background: 'var(--cocoon-ink)', display: 'grid', placeItems: 'center' }}>
              <span style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 26, color: 'var(--cocoon-yellow)' }}>F</span>
            </div>
            <div>
              <div style={{ fontSize: 12, color: 'var(--cocoon-mid)', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase' }}>Folk &amp; Form</div>
              <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 22, lineHeight: 1.1, color: 'var(--cocoon-ink)' }}>Brand Designer</div>
            </div>
          </div>

          {/* Status pill */}
          <div style={{ display: 'flex', gap: 6, marginBottom: 18 }}>
            <span style={{ background: 'var(--cocoon-yellow)', color: 'var(--cocoon-ink)', fontSize: 12, fontWeight: 600, padding: '6px 12px', borderRadius: 999 }}>● Interview booked</span>
            <span className="app-chip">96% match</span>
          </div>

          {/* Timeline */}
          <div style={{ position: 'relative', paddingLeft: 24, marginTop: 8 }}>
            <div style={{ position: 'absolute', left: 9, top: 8, bottom: 8, width: 2, background: 'var(--cocoon-border)' }} />
            {events.map((e, i) => (
              <div key={i} style={{ position: 'relative', marginBottom: 18 }}>
                <div style={{
                  position: 'absolute', left: -18, top: 4,
                  width: 14, height: 14, borderRadius: '50%',
                  background: e.tone === 'yellow' ? 'var(--cocoon-yellow)' : e.tone === 'ink' ? 'var(--cocoon-ink)' : '#fff',
                  border: e.tone ? 'none' : '2px solid var(--cocoon-border)',
                  boxShadow: e.tone === 'yellow' ? '0 0 0 4px rgba(252,210,9,0.2)' : 'none',
                }} />
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 4 }}>
                  <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--cocoon-graphite)' }}>{e.day}</span>
                  <span style={{ fontSize: 11, color: 'var(--cocoon-mid)', fontFamily: 'var(--font-mono)' }}>{e.time}</span>
                </div>
                <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--cocoon-ink)' }}>{e.t}</div>
                <div style={{ fontSize: 12.5, color: 'var(--cocoon-graphite)', lineHeight: 1.45, marginTop: 2 }}>{e.m}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Sticky CTA */}
        <div style={{
          position: 'absolute', bottom: 0, left: 0, right: 0,
          padding: '14px 20px 30px',
          background: 'rgba(255,255,255,0.95)', backdropFilter: 'blur(16px) saturate(180%)',
          WebkitBackdropFilter: 'blur(16px) saturate(180%)',
          borderTop: '1px solid var(--cocoon-border)',
          display: 'flex', gap: 10,
        }}>
          <button className="app-btn app-btn-ghost" style={{ padding: '12px 18px' }}>Message</button>
          <button className="app-btn app-btn-primary" style={{ flex: 1 }}>Prep for interview</button>
        </div>
      </div>
    </Phone>
  );
}

Object.assign(window, { ScrApplications, ScrApplicationDetail });