'use client';

import { Suspense, useEffect, useMemo, useState } from 'react';
import { useParams, useRouter, useSearchParams } from 'next/navigation';
import { ChatThread } from '@/components/messages/ChatThread';
import { api } from '@/lib/api';
import {
  ChatUser,
  Conversation,
  getConversationOtherUser,
  getConversationTitle,
} from '@/lib/messages';
import { jobContextFromConversation } from '@/lib/jobContextMessage';
import { formatLastActive } from '@/lib/lastActive';
import { JOBS_FEATURE_ENABLED } from '@/lib/features';
import { useAuth } from '@/contexts/AuthContext';

interface ConversationThreadProps {
  role: 'customer' | 'worker';
}

function ConversationThreadContent({ role }: ConversationThreadProps) {
  const { id } = useParams<{ id: string }>();
  const router = useRouter();
  const searchParams = useSearchParams();
  const preferredWorkerId = searchParams.get('workerId') ?? undefined;
  const { user } = useAuth();
  const [conversation, setConversation] = useState<Conversation | null>(null);
  const [contextWorker, setContextWorker] = useState<ChatUser | null>(null);

  useEffect(() => {
    if (!id) return;
    api<{ data: Conversation }>(`/messages/${id}`)
      .then((res) => {
        setConversation(res.data);
        if (res.data.id !== id) {
          const query = searchParams.toString();
          router.replace(
            `/${role}/messages/${res.data.id}${query ? `?${query}` : ''}`,
            { scroll: false }
          );
        }
      })
      .catch(console.error);
  }, [id, role, router, searchParams]);

  useEffect(() => {
    if (!preferredWorkerId || !conversation || !user || role !== 'customer') {
      setContextWorker(null);
      return;
    }

    const knownWorker = getConversationOtherUser(conversation, user.id, preferredWorkerId);
    if (knownWorker) {
      setContextWorker(null);
      return;
    }

    api<{ data: { user: ChatUser } }>(`/workers/${preferredWorkerId}`)
      .then((res) => setContextWorker(res.data.user))
      .catch(() => setContextWorker(null));
  }, [preferredWorkerId, conversation, user, role]);

  const backHref = `/${role}/messages`;
  const peer = useMemo(() => {
    if (!conversation || !user) return contextWorker;
    return (
      contextWorker ??
      getConversationOtherUser(conversation, user.id, preferredWorkerId)
    );
  }, [conversation, user, contextWorker, preferredWorkerId]);

  const title = useMemo(() => {
    if (!conversation || !user) return 'Chat';
    if (contextWorker) {
      return `${contextWorker.firstName} ${contextWorker.lastName}`;
    }
    return getConversationTitle(conversation, user.id, preferredWorkerId);
  }, [conversation, user, contextWorker, preferredWorkerId]);

  const lastActiveSubtitle = useMemo(() => {
    return formatLastActive(peer?.lastActiveAt) || undefined;
  }, [peer?.lastActiveAt]);

  const peerProfileHref = useMemo(() => {
    if (role !== 'customer') return null;
    if (preferredWorkerId) return `/workers/${preferredWorkerId}`;
    if (conversation?.contextWorker?.id) return `/workers/${conversation.contextWorker.id}`;
    if (conversation?.contextWorkerId) return `/workers/${conversation.contextWorkerId}`;
    if (conversation?.job?.worker?.id) return `/workers/${conversation.job.worker.id}`;
    return null;
  }, [role, preferredWorkerId, conversation]);

  const jobContext = useMemo(() => {
    if (!JOBS_FEATURE_ENABLED) return null;
    if ((conversation?.jobCount ?? 0) > 1) return null;
    return jobContextFromConversation(conversation?.job);
  }, [conversation?.job, conversation?.jobCount]);

  const relatedConversationIds = conversation?.relatedConversationIds ?? (id ? [id] : []);

  if (!id) return null;

  return (
    <div className="flex h-full min-h-0 flex-1 flex-col overflow-hidden">
      <ChatThread
        conversationId={conversation?.id ?? id}
        relatedConversationIds={relatedConversationIds}
        backHref={backHref}
        title={title}
        subtitle={lastActiveSubtitle}
        role={role}
        jobContext={jobContext}
        peer={peer}
        peerProfileHref={peerProfileHref}
      />
    </div>
  );
}

export function ConversationThread({ role }: ConversationThreadProps) {
  return (
    <Suspense fallback={null}>
      <ConversationThreadContent role={role} />
    </Suspense>
  );
}