// Green Voice — 프리미엄 전용 컨시어지 채팅 플로우
// 원본 스크린샷 재현: 전담 컨시어지 김지후 · 실시간 상담 중 · 채팅 스레드 + Quality Analysis 카드

function GVConciergeFlow({ nav, initialCourseId }) {
  const user = GV_USER;
  const course = GV_COURSES.find(c => c.id === initialCourseId) || GV_COURSES.find(c => c.id === 'labievelle');

  const [messages, setMessages] = React.useState([
    {
      from: 'concierge',
      text: `안녕하세요, ${user.name.replace(' 위원','')}님. 전담 컨시어지 ${user.conciergeName}입니다. 오늘은 어떤 라운드를 도와드릴까요?`,
      time: '오전 10:18',
    },
    {
      from: 'user',
      text: `${course ? course.name.replace(' 올드코스','') : '라비에벨 CC'} 관련해서 6월 주말 오전 티타임을 잡고 싶은데 가능할지 봐주세요.`,
      time: '오전 10:20',
    },
    {
      from: 'concierge',
      text: `현재 곤지암CC와 휘슬링락의 6월 주말 오전 티타임 가능 여부를 우선적으로 확인 중입니다. 혹시 선호하시는 특정 티업 시간대가 더 있으신가요?`,
    },
    {
      from: 'user',
      text: '네, 가급적이면 오전 7시에서 8시 사이를 선호합니다. 진행이 원활한 곳 위주로 부탁드려요.',
      time: '오전 10:24',
    },
    {
      from: 'card',
      cardType: 'quality',
      title: 'QUALITY ANALYSIS',
      body: '컨시어지가 품질 데이터(진행 만족도)를 기반으로 후보지를 선별하고 있습니다.',
    },
    {
      from: 'concierge_profile',
    },
    {
      from: 'concierge',
      text: '확인 감사합니다. 오전 7-8시 시간대를 최우선으로 하여, 최근 진행 품질 평가가 높은 3곳의 제안서를 곧 보내드리겠습니다. 잠시만 기다려 주십시오.',
    },
  ]);

  const [input, setInput] = React.useState('');
  const scrollRef = React.useRef(null);

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

  const send = () => {
    if (!input.trim()) return;
    setMessages(m => [...m, { from: 'user', text: input.trim() }]);
    setInput('');
    // Simulated concierge reply
    setTimeout(() => {
      setMessages(m => [...m, {
        from: 'concierge',
        text: '확인했습니다. 조건을 반영해 후보를 곧 정리해서 보내드릴게요.',
      }]);
    }, 900);
  };

  return (
    <div style={{
      background: GV.color.surface,
      minHeight: '100%',
      display: 'flex',
      flexDirection: 'column',
      height: '100%',
    }}>
      {/* Header */}
      <div style={{
        display: 'flex',
        alignItems: 'flex-start',
        padding: '12px 12px',
        borderBottom: `1px solid ${GV.color.borderSubtle}`,
        gap: 8,
        flexShrink: 0,
        background: GV.color.surface,
      }}>
        <button
          onClick={nav.back}
          style={{
            background: 'none', border: 'none', padding: 6, cursor: 'pointer',
            color: GV.color.forestDeep, display: 'flex',
            marginTop: 4,
          }}
        >
          <Icon name="arrow_back" size={22} />
        </button>
        <div style={{ flex: 1, minWidth: 0, paddingTop: 4 }}>
          <div style={{
            fontFamily: GV.font.sans,
            fontSize: 10,
            fontWeight: 700,
            letterSpacing: '0.14em',
            color: GV.color.outline,
            marginBottom: 1,
          }}>전담 컨시어지</div>
          <div style={{
            fontFamily: GV.font.serif,
            fontSize: 17,
            fontWeight: 600,
            color: GV.color.forestPrimary,
            lineHeight: 1.15,
            letterSpacing: '-0.01em',
          }}>{user.conciergeName}</div>
        </div>
        <div style={{
          display: 'inline-flex',
          alignItems: 'center',
          gap: 6,
          padding: '5px 10px',
          borderRadius: 999,
          background: GV.color.primaryFixed,
          color: GV.color.forestDeep,
          fontFamily: GV.font.sans,
          fontSize: 11,
          fontWeight: 700,
          marginTop: 6,
        }}>
          <span style={{
            width: 7, height: 7, borderRadius: 999,
            background: '#2ea55e',
            boxShadow: '0 0 0 3px rgba(46,165,94,0.20)',
          }} />
          실시간 상담 중
        </div>
      </div>

      {/* Chat scroll area */}
      <div
        ref={scrollRef}
        className="gv-scroll"
        style={{
          flex: 1,
          overflowY: 'auto',
          padding: '18px 16px 12px',
          background: GV.color.surface,
        }}
      >
        {messages.map((m, i) => {
          if (m.from === 'card' && m.cardType === 'quality') {
            return (
              <div key={i} style={{
                background: GV.color.white,
                border: `1px solid ${GV.color.borderSubtle}`,
                borderLeft: `3px solid ${GV.color.prestigeGold}`,
                borderRadius: 10,
                padding: '12px 14px',
                display: 'flex',
                gap: 12,
                alignItems: 'flex-start',
                margin: '4px 0 14px',
                boxShadow: '0 2px 6px rgba(26,67,46,0.04)',
              }}>
                <div style={{
                  width: 34, height: 34, borderRadius: 8,
                  background: GV.color.primaryFixed,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: GV.color.forestDeep,
                  flexShrink: 0,
                }}>
                  <Icon name="analytics" size={18} />
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{
                    fontFamily: GV.font.sans,
                    fontSize: 9.5,
                    fontWeight: 800,
                    letterSpacing: '0.18em',
                    color: GV.color.prestigeGold,
                    marginBottom: 4,
                  }}>{m.title}</div>
                  <p style={{
                    fontFamily: GV.font.sans,
                    fontSize: 12.5,
                    color: GV.color.onSurface,
                    margin: 0,
                    lineHeight: 1.5,
                  }}>{m.body}</p>
                </div>
              </div>
            );
          }

          if (m.from === 'concierge_profile') {
            return (
              <div key={i} style={{
                display: 'flex',
                alignItems: 'center',
                gap: 8,
                margin: '8px 0 6px',
              }}>
                <div style={{
                  width: 26, height: 26, borderRadius: 999,
                  backgroundImage: `url(${user.conciergeAvatar})`,
                  backgroundSize: 'cover',
                  backgroundPosition: 'center',
                  border: `1px solid ${GV.color.borderSubtle}`,
                }} />
                <div style={{
                  fontFamily: GV.font.serif,
                  fontSize: 12,
                  fontWeight: 600,
                  color: GV.color.forestPrimary,
                  letterSpacing: '0.02em',
                }}>Green Voice Concierge</div>
              </div>
            );
          }

          if (m.from === 'concierge') {
            return (
              <div key={i} style={{ marginBottom: 12, display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
                <div style={{
                  maxWidth: '86%',
                  background: GV.color.surfaceContainerLow,
                  border: `1px solid ${GV.color.borderSubtle}`,
                  borderRadius: '4px 14px 14px 14px',
                  padding: '11px 14px',
                  fontFamily: GV.font.sans,
                  fontSize: 13,
                  color: GV.color.onSurface,
                  lineHeight: 1.55,
                }}>
                  {m.text}
                </div>
                {m.time && (
                  <div style={{
                    fontFamily: GV.font.sans,
                    fontSize: 10.5,
                    color: GV.color.outline,
                    marginTop: 4,
                    marginLeft: 4,
                  }}>{m.time}</div>
                )}
              </div>
            );
          }

          // user
          return (
            <div key={i} style={{ marginBottom: 12, display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
              <div style={{
                maxWidth: '86%',
                background: GV.color.forestDeep,
                color: GV.color.white,
                borderRadius: '14px 4px 14px 14px',
                padding: '11px 14px',
                fontFamily: GV.font.sans,
                fontSize: 13,
                lineHeight: 1.55,
              }}>
                {m.text}
              </div>
              {m.time && (
                <div style={{
                  fontFamily: GV.font.sans,
                  fontSize: 10.5,
                  color: GV.color.outline,
                  marginTop: 4,
                  marginRight: 4,
                }}>{m.time}</div>
              )}
            </div>
          );
        })}
      </div>

      {/* Input */}
      <div style={{
        display: 'flex',
        alignItems: 'center',
        gap: 8,
        padding: '10px 12px 14px',
        borderTop: `1px solid ${GV.color.borderSubtle}`,
        background: GV.color.surface,
        flexShrink: 0,
      }}>
        <button style={{
          width: 40, height: 40, borderRadius: 999,
          background: GV.color.surfaceContainer,
          border: 'none', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: GV.color.forestDeep,
          flexShrink: 0,
        }}>
          <Icon name="add" size={20} />
        </button>
        <input
          type="text"
          value={input}
          onChange={e => setInput(e.target.value)}
          onKeyDown={e => { if (e.key === 'Enter') send(); }}
          placeholder="메시지를 입력하세요"
          style={{
            flex: 1,
            background: GV.color.surfaceContainer,
            border: 'none',
            borderRadius: 999,
            padding: '11px 16px',
            fontFamily: GV.font.sans,
            fontSize: 13.5,
            color: GV.color.onSurface,
            outline: 'none',
          }}
        />
        <button
          onClick={send}
          style={{
            width: 40, height: 40, borderRadius: 999,
            background: GV.color.forestDeep,
            border: 'none', cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: GV.color.white,
            flexShrink: 0,
          }}>
          <Icon name="send" size={18} filled />
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { GVConciergeFlow });