/* ============================================================
   HISTORIAL — conversaciones y contratos guardados
   ============================================================ */

function Historial({ t, lang, onOpenChat, onOpenContract }) {
  const data = useHistory();
  const [tab, setTab] = useState('chats');
  const [confirmClear, setConfirmClear] = useState(false);

  const list = tab === 'chats' ? data.chats : data.contracts;

  return (
    <div className="section-pad fade-up">
      <div className="hist-head">
        <div>
          <div className="eyebrow">{t('group.workspace')}</div>
          <h1 className="h-title">{t('title.history')}</h1>
          <p className="h-sub">{t('sub.history')}</p>
        </div>
        {(data.chats.length > 0 || data.contracts.length > 0) && (
          confirmClear ? (
            <div className="clear-confirm">
              <button className="btn btn-ghost danger" onClick={() => { lxClearAll(); setConfirmClear(false); }}>{t('hist.clearAll')}</button>
              <button className="btn btn-ghost" onClick={() => setConfirmClear(false)}><Icon name="x" size={15} /></button>
            </div>
          ) : (
            <button className="btn btn-ghost" onClick={() => setConfirmClear(true)}><Icon name="trash" size={15} /> {t('hist.clearAll')}</button>
          )
        )}
      </div>

      <div className="hist-tabs">
        <button className={'hist-tab' + (tab === 'chats' ? ' active' : '')} onClick={() => setTab('chats')}>
          <Icon name="chat" size={15} /> {t('hist.tabChats')} <span className="ht-count">{data.chats.length}</span>
        </button>
        <button className={'hist-tab' + (tab === 'contracts' ? ' active' : '')} onClick={() => setTab('contracts')}>
          <Icon name="contract" size={15} /> {t('hist.tabContracts')} <span className="ht-count">{data.contracts.length}</span>
        </button>
      </div>

      {list.length === 0 ? (
        <div className="hist-empty">
          <div className="he-ic"><Icon name={tab === 'chats' ? 'message' : 'contract'} size={26} /></div>
          <h3>{t(tab === 'chats' ? 'hist.emptyChats' : 'hist.emptyContracts')}</h3>
          <p>{t(tab === 'chats' ? 'hist.emptyChatsDesc' : 'hist.emptyContractsDesc')}</p>
          <button className="btn btn-primary" onClick={() => tab === 'chats' ? onOpenChat() : onOpenContract()}>
            <Icon name={tab === 'chats' ? 'chat' : 'sparkle'} size={15} />
            {t(tab === 'chats' ? 'hist.startChat' : 'hist.newContract')}
          </button>
        </div>
      ) : (
        <div className="hist-list">
          {list.map(item => (
            <HistItem
              key={item.id}
              item={item}
              tab={tab}
              t={t}
              lang={lang}
              onOpen={() => tab === 'chats' ? onOpenChat(item) : onOpenContract(item)}
              onDelete={() => tab === 'chats' ? lxDeleteChat(item.id) : lxDeleteContract(item.id)}
            />
          ))}
        </div>
      )}

      <style>{`
        .hist-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
        .clear-confirm { display: flex; gap: 8px; }
        .btn-ghost.danger { color: var(--red); border-color: rgba(248,113,113,0.25); }
        .btn-ghost.danger:hover { background: var(--red-dim); border-color: rgba(248,113,113,0.4); }
        .hist-tabs { display: flex; gap: 6px; margin: 22px 0 20px; border-bottom: 1px solid var(--line); }
        .hist-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 13.5px; font-weight: 500; color: var(--text-3); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s; }
        .hist-tab .ic { color: inherit; }
        .hist-tab:hover { color: var(--text); }
        .hist-tab.active { color: var(--violet-soft); border-bottom-color: var(--violet-bright); }
        .ht-count { font-size: 11px; background: var(--surface-3); color: var(--text-2); padding: 1px 7px; border-radius: 9px; }
        .hist-tab.active .ht-count { background: var(--violet-dim); color: var(--violet-soft); }

        .hist-list { display: flex; flex-direction: column; gap: 10px; }
        .hist-empty { text-align: center; max-width: 420px; margin: 40px auto; display: flex; flex-direction: column; align-items: center; }
        .he-ic { width: 60px; height: 60px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; color: var(--violet-soft); margin-bottom: 18px; }
        .hist-empty h3 { font-size: 17px; font-weight: 600; color: var(--white); margin-bottom: 9px; }
        .hist-empty p { font-size: 13.5px; color: var(--text-3); line-height: 1.55; margin-bottom: 22px; }
      `}</style>
    </div>
  );
}

function HistItem({ item, tab, t, lang, onOpen, onDelete }) {
  const [confirm, setConfirm] = useState(false);
  const preview = tab === 'chats'
    ? (item.preview || '')
    : (item.typeLabel || '');

  return (
    <div className="hist-item">
      <button className="hi-main" onClick={onOpen}>
        <div className={'hi-ic ' + tab}><Icon name={tab === 'chats' ? 'message' : 'file'} size={17} /></div>
        <div className="hi-meta">
          <strong>{item.title}</strong>
          <span className="hi-preview">{preview}</span>
        </div>
      </button>
      <div className="hi-side">
        <span className="hi-date">{lxRelDate(tab === 'chats' ? item.updatedAt : item.createdAt, lang)}</span>
        {confirm ? (
          <div className="hi-confirm">
            <button className="hi-del-yes" onClick={onDelete} title={t('hist.delete')}><Icon name="check" size={14} /></button>
            <button className="hi-del-no" onClick={() => setConfirm(false)}><Icon name="x" size={14} /></button>
          </div>
        ) : (
          <button className="hi-del" onClick={() => setConfirm(true)} title={t('hist.delete')}><Icon name="trash" size={15} /></button>
        )}
      </div>
      <style>{`
        .hist-item { display: flex; align-items: center; gap: 12px; padding: 6px 14px 6px 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; transition: border-color .15s, background .15s; }
        .hist-item:hover { border-color: var(--line-2); background: var(--surface-2); }
        .hi-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 13px; text-align: left; padding: 8px; }
        .hi-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
        .hi-ic.chats { background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); }
        .hi-ic.contracts { background: var(--violet-dim); border: 1px solid var(--violet-line); color: var(--violet-soft); }
        .hi-meta { flex: 1; min-width: 0; }
        .hi-meta strong { display: block; font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .hi-preview { display: block; font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
        .hi-side { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
        .hi-date { font-size: 12px; color: var(--text-4); white-space: nowrap; }
        .hi-del { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--text-4); transition: color .15s, background .15s; }
        .hi-del:hover { color: var(--red); background: var(--red-dim); }
        .hi-confirm { display: flex; gap: 4px; }
        .hi-del-yes, .hi-del-no { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; }
        .hi-del-yes { color: #fff; background: var(--red); }
        .hi-del-no { color: var(--text-3); background: var(--surface-3); }
        @media (max-width: 600px) { .hi-date { display: none; } }
      `}</style>
    </div>
  );
}

Object.assign(window, { Historial });