// ============================================================
// MOORE AI v13 — INBOX TAB
// Requires: shared/utils.js, shared/components.jsx loaded first
// ============================================================

const InboxView = ({ conversations, loadingTabs, fetchConversations }) => {
  const { useState } = React;
  const [selected, setSelected] = useState(null);

  return (
    <div className="h-full flex">
      {/* Conversation List */}
      <div className="w-80 border-r border-slate-800/50 flex flex-col shrink-0">
        <div className="flex items-center justify-between px-5 py-4 border-b border-slate-800/50">
          <div className="font-bold text-white">Inbox</div>
          <button onClick={fetchConversations} className="text-slate-600 hover:text-slate-400 transition-colors">
            <Icon name="refresh-cw" size={13} />
          </button>
        </div>
        <div className="flex-1 overflow-y-auto">
          {loadingTabs.inbox ? (
            <div className="flex justify-center py-12"><div className="w-6 h-6 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" /></div>
          ) : conversations.length === 0 ? (
            <div className="py-12 text-center text-xs mono text-slate-700 uppercase">No conversations</div>
          ) : conversations.map(c => (
            <div key={c.id} onClick={() => setSelected(c)}
              className={`flex items-start gap-3 px-5 py-4 cursor-pointer border-b border-slate-800/30 transition-colors
                ${selected?.id === c.id ? 'bg-blue-600/10 border-l-2 border-blue-500' : 'hover:bg-slate-800/20'}`}>
              <Avatar name={c.contactName} size={36} />
              <div className="flex-1 min-w-0">
                <div className="flex items-center justify-between mb-0.5">
                  <div className="font-bold text-white text-sm truncate">{c.contactName}</div>
                  {c.unreadCount > 0 && (
                    <span className="text-[10px] mono bg-blue-600 text-white px-1.5 py-0.5 rounded-md font-bold shrink-0 ml-2">{c.unreadCount}</span>
                  )}
                </div>
                <div className="text-xs text-slate-500 truncate leading-snug">{c.lastMessage || 'No messages'}</div>
                <div className="text-[10px] mono text-slate-700 mt-0.5">{fmtDate(c.lastMessageDate)}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Message Thread */}
      <div className="flex-1 flex items-center justify-center">
        {selected ? (
          <div className="text-center space-y-3">
            <Avatar name={selected.contactName} size={56} />
            <div className="font-bold text-white">{selected.contactName}</div>
            <div className="text-xs text-slate-500">Last: {selected.lastMessage}</div>
            <div className="text-xs mono text-slate-600">Use Jake AI to compose and send messages</div>
          </div>
        ) : (
          <div className="text-center opacity-40">
            <Icon name="inbox" size={48} className="text-slate-700 mx-auto mb-3" />
            <div className="text-sm text-slate-600 mono">Select a conversation</div>
          </div>
        )}
      </div>
    </div>
  );
};