// ============================================================
// QBE Chat Panel — left column in the agentic experience.
//
// Messages support four payloads:
//   - content              (always; the bubble text)
//   - chips: string[]      (quick-reply chips under the bubble)
//   - widget: 'rego-state' (inline rego + state inputs in the bubble)
//   - widget: 'address'    (inline address autocomplete in the bubble)
//   - tool: 'nevdis'       (pulsing tool-call indicator variant)
// ============================================================

function ChatPanel({
  messages,
  isTyping,
  onSendMessage,     // free-text + chips → handleAnswer(string)
  onSubmitWidget,    // rego-state / address widget → handleAnswer(payload)
  onClose,
  customerProfile,
}) {
  const [inputValue, setInputValue] = React.useState('');
  const messagesEndRef = React.useRef(null);

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

  const handleSend = () => {
    if (!inputValue.trim()) return;
    onSendMessage(inputValue);
    setInputValue('');
  };

  return (
    <div className="chat-panel">
      <div className="chat-header">
        <div className="avatar">
          <QbeSymbol size={26} />
        </div>
        <div style={{ flex: 1, marginLeft: 4 }}>
          <h3 style={{ color: '#fff' }}>Cumulus Assistant</h3>
          <div className="sub">{customerProfile?.status || 'Online · here to help'}</div>
        </div>
        <button
          onClick={onClose}
          style={{ background: 'transparent', color: '#fff', border: '1px solid rgba(255,255,255,.35)', borderRadius: 4, padding: '6px 10px', cursor: 'pointer', fontSize: 12 }}
          title="Back to homepage"
        >
          Exit
        </button>
      </div>

      <div className="chat-messages">
        {messages.map(m => (
          <ChatMessage
            key={m.id}
            message={m}
            onSendMessage={onSendMessage}
            onSubmitWidget={onSubmitWidget}
          />
        ))}

        {isTyping && (
          <div className="msg agent">
            <div className="avatar">
              <QbeSymbol size={20} />
            </div>
            <div className="typing">
              <span /><span /><span />
            </div>
          </div>
        )}

        <div ref={messagesEndRef} />
      </div>

      <div className="chat-input">
        <input
          type="text"
          value={inputValue}
          onChange={e => setInputValue(e.target.value)}
          onKeyDown={e => e.key === 'Enter' && handleSend()}
          placeholder="Type your message..."
        />
        <button onClick={handleSend} disabled={!inputValue.trim()}>
          <Icon name="send" size={16} />
        </button>
      </div>
    </div>
  );
}

// A single message — handles all four payload variants.
function ChatMessage({ message, onSendMessage, onSubmitWidget }) {
  const m = message;

  // Tool-call indicator variant (no avatar swap, pulsing blue dot bubble).
  if (m.tool) {
    return (
      <div className="msg agent tool-call">
        <div className="avatar"><QbeSymbol size={20} /></div>
        <div className="tool-bubble">
          <span className="tool-dot" />
          <span>{m.content}</span>
        </div>
      </div>
    );
  }

  return (
    <div className={`msg ${m.role}`}>
      <div className="avatar">
        {m.role === 'agent'
          ? <QbeSymbol size={20} />
          : <Icon name="user" size={16} color="#fff" />}
      </div>
      <div className={`msg__body ${m.role === 'user' ? 'msg__body--user' : ''}`}>
        <div className="bubble">{m.content}</div>

        {m.widget === 'rego-state' && (
          <RegoStateWidget onSubmit={onSubmitWidget} />
        )}

        {m.widget === 'address' && (
          <AddressWidget onSubmit={onSubmitWidget} />
        )}

        {m.chips && m.chips.length > 0 && (
          <div className="chips">
            {m.chips.map((chip, i) => (
              <button key={i} className="chip" onClick={() => onSendMessage(chip)}>{chip}</button>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

// Inline rego + state pair — used at the VEHICLE stage.
function RegoStateWidget({ onSubmit }) {
  const [rego, setRego] = React.useState('');
  const [state, setState] = React.useState('NSW');
  const STATES = ['NSW', 'VIC', 'QLD', 'WA', 'SA', 'TAS', 'ACT', 'NT'];
  const canSubmit = rego.trim().length >= 3;
  const submit = () => {
    if (!canSubmit) return;
    onSubmit({ rego: rego.trim().toUpperCase(), state });
  };
  return (
    <div className="chat-widget chat-widget--rego">
      <input
        className="chat-widget__input"
        value={rego}
        onChange={e => setRego(e.target.value.toUpperCase())}
        onKeyDown={e => e.key === 'Enter' && submit()}
        placeholder="Rego (e.g. BXA58T)"
        aria-label="Vehicle registration"
      />
      <select
        className="chat-widget__select"
        value={state}
        onChange={e => setState(e.target.value)}
        aria-label="State"
      >
        {STATES.map(s => <option key={s} value={s}>{s}</option>)}
      </select>
      <button
        className="chat-widget__submit"
        onClick={submit}
        disabled={!canSubmit}
        aria-label="Look up vehicle"
      >
        <Icon name="arrowRight" size={16} />
      </button>
    </div>
  );
}

// Inline address autocomplete — used at the GARAGE stage. Simulated:
// once the user has typed ~3+ chars a suggestion dropdown appears.
function AddressWidget({ onSubmit }) {
  const [value, setValue] = React.useState('');
  const [focused, setFocused] = React.useState(false);
  const SUGGESTIONS = [
    '22 Sydney Street, Rose Bay NSW 2029',
    '14 New South Head Road, Rose Bay NSW 2029',
    '5/40 Dover Road, Rose Bay NSW 2029',
  ];
  const showMenu = focused && value.trim().length >= 2;
  const pick = (s) => {
    setValue(s);
    setFocused(false);
    onSubmit(s);
  };
  const submit = () => {
    if (!value.trim()) return;
    onSubmit(value.trim());
  };
  return (
    <div className="chat-widget chat-widget--address">
      <div className="chat-widget__address-row">
        <span className="chat-widget__lead-icon">{FilledIcons.mapPinFilled}</span>
        <input
          className="chat-widget__input"
          value={value}
          onChange={e => setValue(e.target.value)}
          onFocus={() => setFocused(true)}
          onBlur={() => setTimeout(() => setFocused(false), 120)}
          onKeyDown={e => e.key === 'Enter' && submit()}
          placeholder="Start typing address…"
          aria-label="Garage address"
        />
        <button
          className="chat-widget__submit"
          onClick={submit}
          disabled={!value.trim()}
          aria-label="Confirm address"
        >
          <Icon name="arrowRight" size={16} />
        </button>
      </div>
      {showMenu && (
        <div className="chat-widget__menu">
          {SUGGESTIONS.map(s => (
            <button key={s} className="chat-widget__menu-item" onMouseDown={() => pick(s)}>
              <span className="chat-widget__menu-icon">{FilledIcons.mapPinFilled}</span>
              {s}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { ChatPanel, ChatMessage, RegoStateWidget, AddressWidget });