// Template 1 — Queue view · Wednesday May 18
// Refined to match source content from agent-native-preview.

const QueueTicketCard = ({ priority = 'high', practice, contact, summary, eta, age, bumped, kind }) => {
  const isHigh = priority === 'high';
  const isWaiting = priority === 'waiting';
  return (
    <div style={{
      background: 'var(--cream-deeper)',
      border: '1px solid var(--line)',
      borderRadius: '12px',
      padding: isHigh ? '18px 20px' : '13px 18px',
      cursor: 'pointer',
      transition: 'background 120ms ease',
      position: 'relative',
    }}>
      {isHigh && (
        <div style={{ position: 'absolute', top: 16, right: 16 }}>
          <StatusDot kind="high" size={6} />
        </div>
      )}
      <div style={{ fontSize: 11, color: 'var(--ink-faint)', fontWeight: 500, marginBottom: isHigh ? 8 : 4, display: 'flex', alignItems: 'center', gap: 8 }}>
        <span>{kind}</span>
        {eta && <><span>·</span><span>{eta}</span></>}
      </div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 4 }}>
        <h4 style={{ fontSize: isHigh ? 17 : 14, fontWeight: 500, color: 'var(--ink)', fontFamily: 'var(--serif)', letterSpacing: '-0.005em' }}>{practice}</h4>
      </div>
      <div style={{
        fontSize: isHigh ? 14 : 13,
        color: isHigh ? 'var(--ink-secondary)' : 'var(--ink-faint)',
        lineHeight: 1.5,
        paddingRight: isHigh ? 14 : 0,
      }}>
        {contact && <><span style={{ color: 'var(--ink)', fontWeight: 500 }}>{contact}</span> · </>}
        {summary}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 10, fontSize: 12, color: 'var(--ink-faint)' }}>
        <span>{age}</span>
        {bumped && (
          <>
            <span>·</span>
            <span style={{ color: 'var(--accent)', display: 'inline-flex', alignItems: 'center', gap: 4 }}>
              <svg width="10" height="10" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M8 13 V3 M4 7 L8 3 L12 7" /></svg>
              recently bumped
            </span>
          </>
        )}
      </div>
    </div>
  );
};

const QueueSection = ({ title, kicker, children }) => (
  <section style={{ marginBottom: 36 }}>
    <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 14 }}>
      <h3 style={{ fontSize: 13, fontWeight: 500, color: 'var(--ink-faint)' }}>{title}</h3>
      {kicker && <span style={{ fontSize: 12, color: 'var(--ink-faint)' }}>{kicker}</span>}
    </div>
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>{children}</div>
  </section>
);

const QueueChat = () => (
  <div style={{ display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0 }}>
    <div style={{ padding: '16px 20px 14px', borderBottom: '1px solid var(--line)', flex: '0 0 auto' }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12, marginBottom: 8 }}>
        <div>
          <div style={{ fontSize: 12, color: 'var(--ink-faint)', fontWeight: 500, marginBottom: 4 }}>Today's queue</div>
          <h2 className="head-22" style={{ fontSize: 20 }}>Wednesday, May 18 · 14 open</h2>
        </div>
        <Avatar kind="user" initial="J" color="#9a7a5e" size={24} />
      </div>
      <Pill variant="mode">Practice mode</Pill>
    </div>

    <div style={{ flex: 1, overflowY: 'auto', padding: '24px 24px 12px', display: 'flex', flexDirection: 'column', gap: 22 }} className="no-scroll-chrome">
      <ChatBubble from="claude">
        Morning Jeni. Fourteen in the queue today, three deserve real attention:
        <ul style={{ margin: '14px 0 0 0', padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
          <li><strong style={{ fontWeight: 500, color: 'var(--ink)' }}>Hartwell</strong> has a pop-up request that's worth a strategic note — they're aiming for vaccine bookings and there's a better play. I'd start there.</li>
          <li><strong style={{ fontWeight: 500, color: 'var(--ink)' }}>Catnip BNB</strong> emailed twice — the second one had a slightly worried tone. Quick hours update, but worth answering soon.</li>
          <li><strong style={{ fontWeight: 500, color: 'var(--ink)' }}>Coastal Plains</strong> is asking about a redesign — needs your judgment, not mine.</li>
        </ul>
        <p style={{ marginTop: 14 }}>The other eleven are routine — most will ship in under two minutes each. Want me to walk you into Hartwell, or pick a fast one to warm up?</p>
      </ChatBubble>

      <ChatBubble from="user">Catnip first, then Hartwell.</ChatBubble>

      <ChatBubble from="claude">
        Catnip's loading on the right. I've drafted the opening — should be a thirty-second one.<span className="caret" />
      </ChatBubble>

      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginLeft: 32, fontSize: 12, color: 'var(--ink-faint)' }}>
        <StatusDot kind="good" />
        <span>Queue refreshed · 28s ago</span>
      </div>
    </div>

    <div style={{ padding: '12px 20px 20px', flex: '0 0 auto' }}>
      <ChatComposer
        placeholder="Ask Claude, or click any ticket on the right…"
        footer={<span>⌘+Enter to send · or click any ticket on the right</span>}
      />
    </div>
  </div>
);

const QueueView = () => (
  <div className="de" style={{ width: 1440, height: 900, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
    <TopNav active="queue" />
    <div style={{ flex: 1, display: 'flex', minHeight: 0 }}>
      {/* Left chat */}
      <div style={{ width: 480, flex: '0 0 auto', borderRight: '1px solid var(--line)', background: 'var(--cream)', display: 'flex', flexDirection: 'column', minHeight: 0 }}>
        <QueueChat />
      </div>

      {/* Right queue */}
      <div style={{ flex: 1, background: 'var(--cream)', overflowY: 'auto', minHeight: 0 }} className="no-scroll-chrome">
        <div style={{ padding: '40px 56px 64px', maxWidth: 900, margin: '0 auto' }}>
          {/* Queue header */}
          <header style={{ marginBottom: 28 }}>
            <div style={{ fontSize: 12, color: 'var(--ink-faint)', fontWeight: 500, marginBottom: 10 }}>Live queue</div>
            <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24, marginBottom: 8 }}>
              <h1 className="display-32" style={{ color: 'var(--ink)' }}>14 tickets · 3 high-priority</h1>
              <LivePulse label="Auto-refreshing" sub="last update 28s ago" />
            </div>
          </header>

          {/* Filter chips */}
          <div style={{ display: 'flex', gap: 8, marginBottom: 36, flexWrap: 'wrap' }}>
            <Pill variant="solid">3 high</Pill>
            <Pill variant="quiet">1 strategic note</Pill>
            <Pill variant="quiet">8 routine</Pill>
            <Pill variant="quiet">2 waiting on client</Pill>
          </div>

          {/* High-priority */}
          <QueueSection title="High-priority">
            <QueueTicketCard
              priority="high"
              kind="High · routine update · ~30s"
              practice="Catnip Bed & Breakfast"
              contact="Mel"
              summary="Saturday urgent-care hours, May 20–25 only. Wrote twice in 8 minutes — slight worry in the second."
              age="12 min ago"
              bumped
            />
            <QueueTicketCard
              priority="high"
              kind="High · strategic note · ~4 min"
              practice="Hartwell Animal Hospital"
              contact="Mel"
              summary="Spring vaccine pop-up. Pop-ups underperform combo (banner + landing page + email) on mobile. Worth offering both."
              age="38 min ago"
            />
            <QueueTicketCard
              priority="high"
              kind="High · judgment call · ~12 min"
              practice="Coastal Plains Veterinary"
              contact="Dr. Reyes"
              summary="Asking about a redesign. Open-ended; needs a real conversation, not a quick draft."
              age="1h 24m ago"
            />
          </QueueSection>

          {/* Routine */}
          <QueueSection title="Routine — ready to ship" kicker="6 tickets · ~5 min total">
            <QueueTicketCard
              kind="Routine · ~45s"
              practice="Animal Eye Specialists · phone update"
              contact="Karen"
              summary="New main line, cascades to footer, contact, schema."
              age="22 min ago"
            />
            <QueueTicketCard
              kind="Routine · ~30s"
              practice="Tallmadge Animal Hospital · hours fix"
              contact="Dana"
              summary="Wednesday close time wrong on three pages."
              age="42 min ago"
            />
            <QueueTicketCard
              kind="Routine · ~1 min"
              practice="Olive Animal Hospital · bio addition"
              contact="Tracy"
              summary="Add new tech (Chrissy), photo attached, team page."
              age="1h 2m ago"
            />
            <QueueTicketCard
              kind="Routine · ~2 min"
              practice="Chain of Lakes Animal Clinic · service copy"
              contact="Mike"
              summary="Tightening dental services description."
              age="2h 11m ago"
            />
            <QueueTicketCard
              kind="Routine · ~30s"
              practice="Cedar Park Veterinary · typo fix"
              contact="Anna"
              summary='"feline" misspelled on services page.'
              age="2h 38m ago"
            />
            <QueueTicketCard
              kind="Routine · ~1 min"
              practice="Bayside Pet Hospital · image swap"
              contact="Jamie"
              summary="New homepage hero (attached)."
              age="3h 4m ago"
            />
          </QueueSection>

          {/* Waiting on client */}
          <QueueSection title="Waiting on client">
            <QueueTicketCard
              priority="waiting"
              kind="Preview sent · awaiting reply"
              practice="Sunrise Veterinary · landing page draft"
              summary="Last touch yesterday, 4:12pm. Auto-followup in 2 days."
              age="Yesterday"
            />
            <QueueTicketCard
              priority="waiting"
              kind="Preview sent · awaiting reply"
              practice="Harborview Animal Care · brand refresh"
              summary="Last touch Monday. Auto-followup tomorrow."
              age="3 days ago"
            />
          </QueueSection>
        </div>
      </div>
    </div>
  </div>
);

window.QueueView = QueueView;