// dash-concierge.jsx — Concierge chat

const CONCIERGE_SEED = [
  { from: 'c', text: "Evening, Marc. It's Liv from the concierge desk. How can I help tonight?" },
  { from: 'u', text: "Need a table for 4 at Nobu Malibu, 8:30pm, ocean view." },
  { from: 'c', text: "On it. Booking under your name, patio table with ocean view. Your card will earn ~1,200 sats on dinner." },
  { from: 'c', text: "✓ Confirmed. 8:30pm, Table 7. Uber Black queued for 7:50pm." },
];

function ConciergeTab() {
  const [msgs, setMsgs] = React.useState(CONCIERGE_SEED);
  const [input, setInput] = React.useState('');
  const [typing, setTyping] = React.useState(false);
  const scrollRef = React.useRef(null);

  React.useEffect(() => {
    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
  }, [msgs, typing]);

  const send = () => {
    if (!input.trim()) return;
    const userMsg = input.trim();
    setMsgs(m => [...m, { from: 'u', text: userMsg }]);
    setInput('');
    setTyping(true);
    setTimeout(() => {
      setTyping(false);
      setMsgs(m => [...m, { from: 'c', text: "I'm on it. Let me pull that together and get back to you in a moment." }]);
    }, 1600);
  };

  return (
    <DashScreen scroll={false} padTop={0} padBottom={0}>
      <DashHeader
        subtitle="24/7 · Human-assisted"
        title="Concierge"
        right={
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{ width: 32, height: 32, borderRadius: '50%', background: 'linear-gradient(135deg, #A78BFA, #EC4899)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 700, fontSize: 12, fontFamily: DASH_DISPLAY }}>L</div>
          </div>
        }
      />

      <div ref={scrollRef} style={{
        position: 'absolute', top: 108, bottom: 152, left: 0, right: 0,
        overflowY: 'auto', padding: '12px 16px',
      }}>
        {msgs.map((m, i) => (
          <div key={i} style={{
            display: 'flex', justifyContent: m.from === 'u' ? 'flex-end' : 'flex-start',
            marginBottom: 8,
          }}>
            <div style={{
              maxWidth: '80%',
              padding: '10px 14px', borderRadius: 18,
              background: m.from === 'u' ? DASH_GRADIENT : 'rgba(255,255,255,0.06)',
              border: m.from === 'u' ? 'none' : '1px solid rgba(255,255,255,0.08)',
              color: m.from === 'u' ? '#000' : '#F5F5F7',
              fontSize: 13, lineHeight: 1.4,
              fontWeight: m.from === 'u' ? 500 : 400,
              borderBottomRightRadius: m.from === 'u' ? 6 : 18,
              borderBottomLeftRadius: m.from === 'c' ? 6 : 18,
            }}>{m.text}</div>
          </div>
        ))}
        {typing && (
          <div style={{ display: 'flex', justifyContent: 'flex-start', marginBottom: 8 }}>
            <div style={{ padding: '12px 16px', borderRadius: 18, background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.08)', display: 'flex', gap: 4 }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#FF9F0A', animation: 'typing 1.3s infinite', animationDelay: '0s' }}/>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#FF9F0A', animation: 'typing 1.3s infinite', animationDelay: '0.2s' }}/>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#FF9F0A', animation: 'typing 1.3s infinite', animationDelay: '0.4s' }}/>
            </div>
          </div>
        )}
      </div>

      {/* Quick chips + input */}
      <div style={{ position: 'absolute', bottom: 82, left: 0, right: 0, padding: '10px 14px', background: 'linear-gradient(180deg, transparent 0%, rgba(5,5,7,0.95) 30%)' }}>
        <div style={{ display: 'flex', gap: 6, overflowX: 'auto', marginBottom: 8, paddingBottom: 2 }}>
          {['Book dinner', 'Private jet', 'Hotel tonight', 'Gift a friend'].map(chip => (
            <button key={chip} onClick={() => setInput(chip)} style={{
              padding: '7px 12px', borderRadius: 100, whiteSpace: 'nowrap',
              background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)',
              color: 'rgba(245,245,247,0.8)', fontSize: 11, fontWeight: 500, cursor: 'pointer',
            }}>{chip}</button>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center', background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 100, padding: '4px 4px 4px 16px' }}>
          <input
            value={input}
            onChange={e => setInput(e.target.value)}
            onKeyDown={e => e.key === 'Enter' && send()}
            placeholder="Ask Liv anything..."
            style={{ flex: 1, background: 'transparent', border: 'none', outline: 'none', color: '#fff', fontSize: 13, padding: '8px 0' }}
          />
          <button onClick={send} style={{
            width: 36, height: 36, borderRadius: '50%',
            background: DASH_GRADIENT, border: 'none',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            cursor: 'pointer', flexShrink: 0,
          }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#000" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </button>
        </div>
      </div>

      <style>{`@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }`}</style>
    </DashScreen>
  );
}

Object.assign(window, { ConciergeTab });