// components/rinpo-phone-profile.jsx — profile + personalized memory

function RinpoPhoneProfile() {
  const store = useStore();
  const user = store.state.user;
  const history = window.CustomerRinpo ? window.CustomerRinpo.history() : [];
  const [note, setNote] = React.useState(function () {
    try { return localStorage.getItem('hap.rinpo.memory.note') || ''; } catch (_) { return ''; }
  });

  const saveNote = () => {
    try { localStorage.setItem('hap.rinpo.memory.note', note); } catch (_) {}
    HAPStore.notify('Note saved locally');
  };

  const interests = [];
  history.slice(0, 12).forEach(function (row) {
    const t = (row.intent || '').toLowerCase();
    if (/white|pebble|pot/.test(t) && interests.indexOf('White pebbles for pots') < 0) interests.push('White pebbles for pots');
    if (/track|order/.test(t) && interests.indexOf('Order tracking') < 0) interests.push('Order tracking');
    if (/bulk|wholesale|truck/.test(t) && interests.indexOf('Bulk supply') < 0) interests.push('Bulk supply');
    if (/glass/.test(t) && interests.indexOf('Glass pebbles') < 0) interests.push('Glass pebbles');
    if (/black/.test(t) && interests.indexOf('Black pebbles') < 0) interests.push('Black pebbles');
  });

  const favCats = [];
  store.recentProducts().forEach(function (p) {
    (p.categories || []).forEach(function (c) {
      if (favCats.indexOf(c) < 0) favCats.push(c);
    });
  });

  const initials = user ? (user.name || user.email || 'U').slice(0, 1).toUpperCase() : 'G';

  return (
    <div className="rinpo-os-profile">
      <div className="rinpo-os-profile__card">
        <div className="rinpo-os-profile__avatar">{initials}</div>
        <div className="rinpo-os-profile__name">{user ? user.name : 'Guest'}</div>
        <div className="rinpo-os-profile__meta">
          {user ? user.email : 'Visitor'} · {history.length} interactions
        </div>
        {!user && (
          <a href="#/account/login" className="rinpo-os-profile__login">Log in / Sign up</a>
        )}
      </div>

      <div className="rinpo-os-profile__section">
        <div className="rinpo-os-profile__heading"><Icon name="spark" size={14} /> RINPO Personalized Memory</div>
        {interests.length > 0 && (
          <div style={{ marginBottom: 12 }}>
            <div className="rinpo-os-profile__label">Your interests</div>
            <div className="rinpo-os-profile__tags">
              {interests.map(function (t) { return <span key={t} className="rinpo-os-profile__tag">{t}</span>; })}
            </div>
          </div>
        )}
        {favCats.length > 0 && (
          <div style={{ marginBottom: 12 }}>
            <div className="rinpo-os-profile__label">Favorite categories</div>
            <div className="rinpo-os-profile__tags">
              {favCats.slice(0, 6).map(function (t) { return <span key={t} className="rinpo-os-profile__tag rinpo-os-profile__tag--green">{t}</span>; })}
            </div>
          </div>
        )}
        <div className="rinpo-os-profile__label">Custom notes</div>
        <div className="rinpo-os-profile__note-row">
          <input className="rinpo-os-chat__input" value={note} onChange={(e) => setNote(e.target.value)} placeholder="Add a note for RINPO context…" />
          <button type="button" className="rinpo-os-chat__send" onClick={saveNote}>Add</button>
        </div>
      </div>
    </div>
  );
}

window.RinpoPhoneProfile = RinpoPhoneProfile;