'use client';

import { useEffect, useRef, useState, useCallback } from 'react';
import {
  MessageSquare,
  Search,
  Plus,
  Wifi,
  WifiOff,
  ChevronLeft,
  MoreVertical,
  BellOff,
} from 'lucide-react';
import { apiFetchJson } from '@/lib/auth';
import { useChat, type Conversation, type ChatUser } from '@/lib/hooks/useChat';
import { ConversationItem } from './ConversationItem';
import { MessageBubble } from './MessageBubble';
import { MessageInput } from './MessageInput';
import { DndBanner } from './DndBanner';
import type { QuickReplyTemplate } from './QuickReplyPicker';

// ─── Tipler ─────────────────────────────────────────────────────────────────

interface ContactUser {
  id: string;
  fullName: string;
  role: string;
  photoUrl: string | null;
}

interface DndStatus {
  dndActive: boolean;
  dndStart?: string;
  dndEnd?: string;
}

interface ChatLayoutProps {
  currentUserId: string;
  currentUserRole: string;
}

const ROLE_LABELS: Record<string, string> = {
  ADMIN: 'Yönetici',
  TEACHER: 'Öğretmen',
  PARENT: 'Veli',
};

// ─── Yeni konuşma modalı ─────────────────────────────────────────────────────

function NewConversationModal({
  contacts,
  onSelect,
  onClose,
}: {
  contacts: ContactUser[];
  onSelect: (userId: string) => void;
  onClose: () => void;
}) {
  const [query, setQuery] = useState('');
  const filtered = contacts.filter((c) =>
    c.fullName.toLowerCase().includes(query.toLowerCase()),
  );

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/30 backdrop-blur-sm">
      <div className="w-full max-w-sm rounded-2xl bg-white shadow-2xl">
        <div className="border-b border-slate-100 px-5 py-4">
          <h3 className="font-semibold text-slate-900">Yeni Konuşma</h3>
          <p className="mt-0.5 text-sm text-slate-500">Mesaj göndermek istediğiniz kişiyi seçin</p>
        </div>

        <div className="p-4">
          <div className="flex items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2">
            <Search className="h-4 w-4 text-slate-400" />
            <input
              autoFocus
              type="text"
              placeholder="İsim ara..."
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              className="flex-1 bg-transparent text-sm text-slate-700 outline-none placeholder-slate-400"
            />
          </div>
        </div>

        <ul className="max-h-72 overflow-y-auto pb-2">
          {filtered.length === 0 && (
            <li className="px-5 py-6 text-center text-sm text-slate-400">Sonuç bulunamadı</li>
          )}
          {filtered.map((contact) => (
            <li key={contact.id}>
              <button
                onClick={() => onSelect(contact.id)}
                className="flex w-full items-center gap-3 px-5 py-3 text-left hover:bg-slate-50"
              >
                <div className="flex h-9 w-9 items-center justify-center rounded-full bg-indigo-100 text-sm font-bold text-indigo-700">
                  {contact.fullName.charAt(0).toUpperCase()}
                </div>
                <div>
                  <p className="text-sm font-medium text-slate-800">{contact.fullName}</p>
                  <p className="text-xs text-slate-400">{ROLE_LABELS[contact.role] ?? contact.role}</p>
                </div>
              </button>
            </li>
          ))}
        </ul>

        <div className="border-t border-slate-100 px-5 py-3">
          <button
            onClick={onClose}
            className="w-full rounded-lg py-2 text-sm text-slate-500 hover:bg-slate-50"
          >
            İptal
          </button>
        </div>
      </div>
    </div>
  );
}

// ─── Ana bileşen ─────────────────────────────────────────────────────────────

export function ChatLayout({ currentUserId, currentUserRole }: ChatLayoutProps) {
  const {
    connected,
    conversations,
    setConversations,
    messages,
    setMessages,
    activeConversationId,
    joinConversation,
    sendMessage,
    startConversation,
    sendTyping,
    markRead,
    isTyping,
  } = useChat();

  const [searchQuery, setSearchQuery] = useState('');
  const [contacts, setContacts] = useState<ContactUser[]>([]);
  const [showNewModal, setShowNewModal] = useState(false);
  const [quickReplies, setQuickReplies] = useState<QuickReplyTemplate[]>([]);
  const [dndStatus, setDndStatus] = useState<DndStatus | null>(null);
  const [loadingMessages, setLoadingMessages] = useState(false);
  const [mobileShowThread, setMobileShowThread] = useState(false);
  const messagesEndRef = useRef<HTMLDivElement>(null);

  const activeConv = conversations.find((c) => c.id === activeConversationId) ?? null;
  const otherUser = activeConv?.otherUser ?? null;

  // ─── İlk yükleme ────────────────────────────────────────────────────────────

  useEffect(() => {
    (async () => {
      const [convsRes, contactsRes, qrRes] = await Promise.all([
        apiFetchJson<Conversation[]>('/v1/messages/conversations'),
        apiFetchJson<ContactUser[]>('/v1/messages/contacts'),
        apiFetchJson<QuickReplyTemplate[]>('/v1/messages/quick-replies'),
      ]);
      if (convsRes.data) setConversations(convsRes.data);
      if (contactsRes.data) setContacts(contactsRes.data);
      if (qrRes.data) setQuickReplies(qrRes.data);
    })();
  }, []);

  // ─── Konuşma seçilince REST mesaj geçmişini yükle ───────────────────────────

  const handleSelectConversation = useCallback(
    async (conv: Conversation) => {
      setMobileShowThread(true);
      joinConversation(conv.id);
      setLoadingMessages(true);
      const res = await apiFetchJson<typeof messages>(`/v1/messages/conversations/${conv.id}/messages`);
      if (res.data) setMessages(res.data);
      setLoadingMessages(false);
      markRead(conv.id);

      // Karşı tarafın DND durumunu kontrol et
      if (conv.otherUser) {
        const dndRes = await apiFetchJson<DndStatus>(`/v1/messages/dnd/${conv.otherUser.id}`);
        setDndStatus(dndRes.data ?? null);
      }
    },
    [joinConversation, markRead, setMessages],
  );

  // ─── Yeni konuşma başlat ────────────────────────────────────────────────────

  const handleStartConversation = async (participantId: string) => {
    setShowNewModal(false);
    try {
      const conv = await startConversation(participantId);
      // Listeye ekle (webhook zaten ekliyor ama eğer socket kesilmişse)
      setConversations((prev) => {
        if (prev.some((c) => c.id === conv.id)) return prev;
        return [conv, ...prev];
      });
      await handleSelectConversation(conv);
    } catch {
      // hata toast eklenebilir
    }
  };

  // ─── Mesaj listesi otomatik scroll ──────────────────────────────────────────

  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

  // ─── Konuşma listesi filtrele ───────────────────────────────────────────────

  const filteredConvs = conversations.filter((c) =>
    !searchQuery ||
    c.otherUser?.fullName.toLowerCase().includes(searchQuery.toLowerCase()),
  );

  // ─── Yazıyor bildirimi ──────────────────────────────────────────────────────

  const partnerIsTyping =
    activeConversationId && otherUser
      ? isTyping(activeConversationId, otherUser.id)
      : false;

  // ─── Render ─────────────────────────────────────────────────────────────────

  return (
    <div className="flex h-[calc(100vh-64px)] overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
      {/* ─── Sol panel: konuşma listesi ──────────────────────────────────────── */}
      <div
        className={`flex flex-col border-r border-slate-200 bg-white ${
          mobileShowThread ? 'hidden md:flex' : 'flex'
        } w-full md:w-80 lg:w-96 shrink-0`}
      >
        {/* Üst başlık */}
        <div className="border-b border-slate-100 px-4 py-4">
          <div className="flex items-center justify-between">
            <h2 className="text-base font-semibold text-slate-900">Mesajlar</h2>
            <div className="flex items-center gap-2">
              {/* Bağlantı indikatörü */}
              <span
                className={`flex h-2 w-2 rounded-full ${
                  connected ? 'bg-emerald-500' : 'bg-rose-500'
                }`}
                title={connected ? 'Bağlı' : 'Bağlantı kesildi'}
              />
              <button
                onClick={() => setShowNewModal(true)}
                className="rounded-lg bg-indigo-600 p-1.5 text-white hover:bg-indigo-700 transition-colors"
                title="Yeni konuşma"
              >
                <Plus className="h-4 w-4" />
              </button>
            </div>
          </div>

          {/* Arama */}
          <div className="mt-3 flex items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2">
            <Search className="h-4 w-4 text-slate-400 shrink-0" />
            <input
              type="text"
              placeholder="Konuşma ara..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="flex-1 bg-transparent text-sm text-slate-700 outline-none placeholder-slate-400"
            />
          </div>
        </div>

        {/* Konuşma listesi */}
        <div className="flex-1 overflow-y-auto divide-y divide-slate-100">
          {filteredConvs.length === 0 ? (
            <div className="px-4 py-10 text-center">
              <MessageSquare className="mx-auto mb-2 h-8 w-8 text-slate-300" />
              <p className="text-sm text-slate-400">
                {searchQuery ? 'Sonuç bulunamadı' : 'Henüz konuşma yok'}
              </p>
              {!searchQuery && (
                <button
                  onClick={() => setShowNewModal(true)}
                  className="mt-3 text-sm font-medium text-indigo-600 hover:underline"
                >
                  İlk mesajı gönder
                </button>
              )}
            </div>
          ) : (
            filteredConvs.map((conv) => (
              <ConversationItem
                key={conv.id}
                conversation={conv}
                isActive={activeConversationId === conv.id}
                currentUserId={currentUserId}
                onClick={() => handleSelectConversation(conv)}
              />
            ))
          )}
        </div>
      </div>

      {/* ─── Sağ panel: mesaj thread ────────────────────────────────────────── */}
      <div
        className={`flex flex-1 flex-col ${
          mobileShowThread ? 'flex' : 'hidden md:flex'
        }`}
      >
        {!activeConversationId ? (
          // Boş durum
          <div className="flex flex-1 flex-col items-center justify-center gap-4 p-8 text-center">
            <div className="rounded-full bg-indigo-50 p-6">
              <MessageSquare className="h-10 w-10 text-indigo-400" />
            </div>
            <div>
              <h3 className="font-semibold text-slate-700">Bir konuşma seçin</h3>
              <p className="mt-1 text-sm text-slate-400">
                Sol taraftan bir konuşmayı seçin ya da yeni bir konuşma başlatın.
              </p>
            </div>
            <button
              onClick={() => setShowNewModal(true)}
              className="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 transition-colors"
            >
              Yeni Konuşma
            </button>
          </div>
        ) : (
          <>
            {/* Thread başlığı */}
            <div className="flex items-center gap-3 border-b border-slate-200 bg-white px-4 py-3.5 shadow-sm">
              {/* Mobil geri butonu */}
              <button
                onClick={() => setMobileShowThread(false)}
                className="md:hidden text-slate-500 hover:text-slate-700"
              >
                <ChevronLeft className="h-5 w-5" />
              </button>

              {otherUser && (
                <div className="flex h-9 w-9 items-center justify-center rounded-full bg-indigo-100 text-sm font-bold text-indigo-700 shrink-0">
                  {otherUser.fullName.charAt(0).toUpperCase()}
                </div>
              )}

              <div className="flex-1 min-w-0">
                <p className="truncate text-sm font-semibold text-slate-900">
                  {otherUser?.fullName ?? 'Konuşma'}
                </p>
                <p className="text-xs text-slate-400">
                  {otherUser ? (ROLE_LABELS[otherUser.role] ?? otherUser.role) : ''}
                </p>
              </div>

              <div className="flex items-center gap-1">
                {connected ? (
                  <Wifi className="h-4 w-4 text-emerald-500" />
                ) : (
                  <WifiOff className="h-4 w-4 text-rose-400" />
                )}
              </div>
            </div>

            {/* DND banner */}
            {dndStatus?.dndActive && (
              <div className="px-4 pt-3">
                <DndBanner dndStart={dndStatus.dndStart} dndEnd={dndStatus.dndEnd} />
              </div>
            )}

            {/* Mesajlar */}
            <div className="flex-1 overflow-y-auto bg-slate-50 px-4 py-4">
              {loadingMessages ? (
                <div className="space-y-3">
                  {[...Array(5)].map((_, i) => (
                    <div
                      key={i}
                      className={`flex ${i % 2 === 0 ? 'justify-start' : 'justify-end'}`}
                    >
                      <div
                        className={`h-10 animate-pulse rounded-2xl bg-slate-200 ${
                          i % 2 === 0 ? 'w-48' : 'w-36'
                        }`}
                      />
                    </div>
                  ))}
                </div>
              ) : messages.length === 0 ? (
                <div className="flex h-full items-center justify-center">
                  <div className="text-center">
                    <MessageSquare className="mx-auto mb-2 h-8 w-8 text-slate-300" />
                    <p className="text-sm text-slate-400">Henüz mesaj yok. İlk mesajı siz gönderin!</p>
                  </div>
                </div>
              ) : (
                <div className="space-y-1">
                  {messages.map((msg, idx) => {
                    const isOwn = msg.senderId === currentUserId;
                    const prevMsg = messages[idx - 1];
                    const showAvatar =
                      !prevMsg || prevMsg.senderId !== msg.senderId;

                    return (
                      <MessageBubble
                        key={msg.id}
                        message={msg}
                        isOwn={isOwn}
                        showAvatar={showAvatar}
                        readByOther={false}
                      />
                    );
                  })}
                  {/* Yazıyor göstergesi */}
                  {partnerIsTyping && (
                    <div className="flex items-end gap-2">
                      <div className="flex h-7 w-7 items-center justify-center rounded-full bg-indigo-100 text-xs font-bold text-indigo-700">
                        {otherUser?.fullName.charAt(0).toUpperCase()}
                      </div>
                      <div className="rounded-2xl rounded-bl-sm bg-white px-4 py-3 text-sm shadow-sm ring-1 ring-slate-200/60">
                        <div className="flex gap-1">
                          <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-slate-400 [animation-delay:0ms]" />
                          <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-slate-400 [animation-delay:150ms]" />
                          <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-slate-400 [animation-delay:300ms]" />
                        </div>
                      </div>
                    </div>
                  )}
                  <div ref={messagesEndRef} />
                </div>
              )}
            </div>

            {/* Mesaj girişi */}
            <MessageInput
              onSend={sendMessage}
              onTyping={sendTyping}
              quickReplies={quickReplies}
              disabled={!connected}
              placeholder={connected ? 'Bir mesaj yazın...' : 'Bağlanıyor...'}
            />
          </>
        )}
      </div>

      {/* Yeni konuşma modalı */}
      {showNewModal && (
        <NewConversationModal
          contacts={contacts}
          onSelect={handleStartConversation}
          onClose={() => setShowNewModal(false)}
        />
      )}
    </div>
  );
}