'use client';

import { useState } from 'react';
import { MessageSquare } from 'lucide-react';
import { ConversationList } from '@/components/conversations/conversation-list';
import { ChatThread } from '@/components/conversations/chat-thread';

export default function ConversationsPage() {
  const [selectedId, setSelectedId] = useState<string | null>(null);

  return (
    <div className="flex h-[calc(100vh-64px)] overflow-hidden">
      {/* Left panel – conversation list */}
      <div
        className={`w-full lg:w-[380px] flex-shrink-0 ${
          selectedId ? 'hidden lg:flex' : 'flex'
        }`}
      >
        <div className="w-full h-full">
          <ConversationList selectedId={selectedId} onSelect={setSelectedId} />
        </div>
      </div>

      {/* Right panel – chat thread or placeholder */}
      <div className={`flex-1 ${selectedId ? 'flex' : 'hidden lg:flex'}`}>
        {selectedId ? (
          <ChatThread
            key={selectedId}
            contactId={selectedId}
            onBack={() => setSelectedId(null)}
          />
        ) : (
          <div className="flex-1 flex items-center justify-center bg-[#0f1729]">
            <div className="text-center">
              <div className="w-20 h-20 rounded-2xl bg-[#1a2332] border border-[#334155] flex items-center justify-center mx-auto mb-5">
                <MessageSquare className="w-10 h-10 text-cyan-400/40" />
              </div>
              <h3 className="text-xl font-bold text-slate-300 mb-2">
                Select a Conversation
              </h3>
              <p className="text-sm text-slate-500 max-w-[280px]">
                Choose a contact from the list to view their messages and continue the conversation
              </p>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}
