/* =============================================================
   Hans — messages, thread, composer
   ============================================================= */

const { useState: useStateMsg, useRef: useRefMsg, useEffect: useEffectMsg } = React;

// ---------- AGENT MESSAGE ----------
function AgentMessage({ time, children }) {
  return (
    <div className="hans-msg hans-msg--agent">
      <div className="hans-msg__avatar hans-msg__avatar--gradient" />
      <div className="hans-msg__body">
        <div className="hans-msg__head">
          <span className="ll-tag" style={{ color: 'var(--ll-ink)' }}>HANS</span>
          <span className="hans-msg__time">{time}</span>
        </div>
        <div className="hans-msg__text">{children}</div>
      </div>
    </div>
  );
}

// ---------- CREATOR MESSAGE ----------
function CreatorMessage({ time, name = 'You', children }) {
  return (
    <div className="hans-msg hans-msg--creator">
      <div className="hans-msg__avatar hans-msg__avatar--creator">{name[0]}</div>
      <div className="hans-msg__body">
        <div className="hans-msg__head">
          <span className="ll-tag" style={{ color: 'var(--ll-ink)' }}>{name.toUpperCase()}</span>
          <span className="hans-msg__time">{time}</span>
        </div>
        <div className="hans-msg__text hans-msg__text--creator">{children}</div>
      </div>
    </div>
  );
}

// ---------- INLINE CARDS ----------
function VenueCard({ name, location, capacity, match, tags }) {
  return (
    <div className="hans-venue">
      <div className="hans-venue__row">
        <span className="ll-tag">{location.toUpperCase()}</span>
        <span className="hans-venue__match">
          <span className="hans-venue__dot" style={{ background: match >= 90 ? 'var(--ll-success)' : 'var(--ll-warning)' }} />
          MATCH {match}
        </span>
      </div>
      <div className="hans-venue__name">{name}</div>
      <div className="hans-venue__meta">{capacity} · 4-night avail</div>
      <div className="hans-venue__divider" />
      <div className="hans-venue__tags">
        {tags.map(t => <span key={t} className="hans-venue__tag">{t}</span>)}
      </div>
    </div>
  );
}

function VenueGroup({ venues, onPrimary, onSecondary }) {
  return (
    <div className="hans-venuegroup">
      <div className="hans-venuegroup__grid">
        {venues.map(v => <VenueCard key={v.name} {...v} />)}
      </div>
      <div className="hans-venuegroup__actions">
        <button className="hans-btn hans-btn--primary" onClick={onPrimary}>
          <i className="ph ph-check" /> Shortlist these three
        </button>
        <button className="hans-btn" onClick={onSecondary}>
          Reach out for me
        </button>
        <button className="hans-btn hans-btn--ghost">See all 12</button>
      </div>
    </div>
  );
}

// ---------- THREAD ----------
function Thread({ children }) {
  const ref = useRefMsg(null);
  useEffectMsg(() => {
    if (ref.current) ref.current.scrollTop = ref.current.scrollHeight;
  });
  return (
    <div className="hans-thread" ref={ref}>
      <div className="hans-thread__inner">{children}</div>
    </div>
  );
}

// ---------- COMPOSER ----------
function Composer({ onSubmit }) {
  const [value, setValue] = useStateMsg('');
  const submit = (e) => {
    e.preventDefault();
    const v = value.trim();
    if (!v) return;
    onSubmit(v);
    setValue('');
  };
  return (
    <form className="hans-composer" onSubmit={submit}>
      <div className="hans-composer__chrome">
        <div className="hans-composer__quick">
          <button type="button" className="hans-quick"><i className="ph ph-paperclip" />Drop a URL or asset</button>
          <button type="button" className="hans-quick"><i className="ph ph-magic-wand" />Run the dossier</button>
          <button type="button" className="hans-quick"><i className="ph ph-map-pin" />Find a venue</button>
        </div>
        <div className="hans-composer__inputrow">
          <textarea
            className="hans-composer__input"
            placeholder="Tell me about the world you're building…"
            value={value}
            onChange={(e) => setValue(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); submit(e); }
            }}
            rows={1}
          />
          <button type="submit" className="hans-composer__send" aria-label="Send">
            <i className="ph ph-arrow-up" />
          </button>
        </div>
      </div>
      <div className="hans-composer__hint">
        <span className="ll-tag">PLAN · RECOMMEND · EXECUTE</span>
        <span className="hans-composer__hintright">Enter to send · Shift-Enter for newline</span>
      </div>
    </form>
  );
}

Object.assign(window, { AgentMessage, CreatorMessage, VenueCard, VenueGroup, Thread, Composer });