edr-platform/apps/edr-passenger-web/backoffice/src/app/support/page.tsx

'use client';

import { Passenger } from '@edr/types';
import { Headset, Search, Send, User } from 'lucide-react';
import { useEffect, useMemo, useRef, useState } from 'react';

import {
  useConversations,
  useMarkRead,
  useMessages,
  useSendMessage,
  useSetStatus,
} from '@/features/support/useSupport';
import { useSupportSocket } from '@/features/support/useSupportSocket';

const GREEN = 'rgb(20 113 76)';
type ConversationDto = Passenger.PassengerSupportConversationDto;
type MessageDto = Passenger.PassengerSupportMessageDto;

const STATUS_CLASS: Record<string, string> = {
  OPEN: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300',
  RESOLVED: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',
  CLOSED: 'bg-gray-200 text-gray-600 dark:bg-slate-700 dark:text-slate-300',
};

const FILTERS = ['ALL', 'OPEN', 'RESOLVED', 'CLOSED'] as const;

function formatTime(iso?: string | null): string {
  if (!iso) return '';
  const d = new Date(iso);
  const now = new Date();
  return d.toDateString() === now.toDateString()
    ? d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
    : d.toLocaleDateString([], { month: 'short', day: 'numeric' });
}

export default function SupportPage() {
  const [status, setStatus] = useState<(typeof FILTERS)[number]>('ALL');
  const [search, setSearch] = useState('');
  const [selectedId, setSelectedId] = useState<string | null>(null);

  const { data, isLoading } = useConversations(
    status === 'ALL' ? { search } : { status, search },
  );
  const items = useMemo(() => data?.items ?? [], [data?.items]);

  useSupportSocket(true);

  const selected = useMemo(
    () => items.find((c) => c.id === selectedId) ?? null,
    [items, selectedId],
  );

  return (
    <div className="space-y-4">
      <div className="flex items-center gap-3">
        <span
          className="flex h-10 w-10 items-center justify-center rounded-lg"
          style={{ background: 'rgba(20,113,76,0.1)', color: GREEN }}
        >
          <Headset size={20} />
        </span>
        <div>
          <h1 className="text-2xl font-bold text-foreground">Support Center</h1>
          <p className="text-sm text-muted-foreground">
            Shared inbox — respond to passenger requests in real time
          </p>
        </div>
      </div>

      <div className="flex h-[calc(100vh-220px)] overflow-hidden rounded-xl border border-border bg-card">
        {/* Conversation list */}
        <div className="flex w-[340px] shrink-0 flex-col border-r border-border">
          <div className="space-y-2 border-b border-border p-3">
            <div className="relative">
              <Search
                size={16}
                className="absolute left-3 top-2.5 text-muted-foreground"
              />
              <input
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                placeholder="Search subject or passenger"
                className="w-full rounded-lg border border-border bg-background py-2 pl-9 pr-3 text-sm outline-none focus:border-emerald-500"
              />
            </div>
            <div className="flex gap-1">
              {FILTERS.map((f) => (
                <button
                  key={f}
                  onClick={() => setStatus(f)}
                  className={`flex-1 rounded-md px-2 py-1 text-xs font-medium capitalize transition ${
                    status === f
                      ? 'text-white'
                      : 'bg-muted text-muted-foreground hover:bg-muted/70'
                  }`}
                  style={status === f ? { background: GREEN } : undefined}
                >
                  {f.toLowerCase()}
                </button>
              ))}
            </div>
          </div>
          <div className="flex-1 overflow-y-auto">
            {isLoading ? (
              <div className="p-6 text-center text-sm text-muted-foreground">
                Loading…
              </div>
            ) : items.length === 0 ? (
              <div className="p-6 text-center text-sm text-muted-foreground">
                No conversations.
              </div>
            ) : (
              items.map((c) => (
                <InboxRow
                  key={c.id}
                  c={c}
                  active={c.id === selectedId}
                  onClick={() => setSelectedId(c.id)}
                />
              ))
            )}
          </div>
        </div>

        {/* Thread */}
        <div className="min-w-0 flex-1">
          {selected ? (
            <ConversationThread conversation={selected} />
          ) : (
            <div className="flex h-full flex-col items-center justify-center gap-2 text-muted-foreground">
              <span
                className="flex h-14 w-14 items-center justify-center rounded-full"
                style={{ background: 'rgba(20,113,76,0.1)', color: GREEN }}
              >
                <Headset size={28} />
              </span>
              <p className="text-sm">Select a conversation to start replying.</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function InboxRow({
  c,
  active,
  onClick,
}: {
  c: ConversationDto;
  active: boolean;
  onClick: () => void;
}) {
  const unread = c.unreadCount > 0;
  return (
    <button
      onClick={onClick}
      className={`block w-full border-b border-border px-4 py-3 text-left transition hover:bg-muted/50 ${
        active ? 'bg-muted/70' : ''
      }`}
      style={active ? { borderLeft: `3px solid ${GREEN}` } : { borderLeft: '3px solid transparent' }}
    >
      <div className="flex items-center justify-between gap-2">
        <span
          className={`truncate text-sm ${
            unread ? 'font-bold text-foreground' : 'font-semibold text-foreground/90'
          }`}
        >
          {c.subject || 'Support request'}
        </span>
        <span className="shrink-0 text-xs text-muted-foreground">
          {formatTime(c.lastMessageAt)}
        </span>
      </div>
      <p className="mt-0.5 truncate text-xs text-muted-foreground">
        {c.passengerName || 'Passenger'}
      </p>
      <div className="mt-1 flex items-center justify-between gap-2">
        <span className="truncate text-xs text-muted-foreground">
          {c.lastMessageSender === 'AGENT' ? 'You: ' : ''}
          {c.lastMessagePreview ?? '—'}
        </span>
        {unread ? (
          <span
            className="flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold text-white"
            style={{ background: GREEN }}
          >
            {c.unreadCount}
          </span>
        ) : (
          <span
            className={`rounded-full px-2 py-0.5 text-[10px] font-medium capitalize ${
              STATUS_CLASS[c.status] ?? ''
            }`}
          >
            {c.status.toLowerCase()}
          </span>
        )}
      </div>
    </button>
  );
}

function ConversationThread({ conversation }: { conversation: ConversationDto }) {
  const { data: messages, isLoading } = useMessages(conversation.id);
  const send = useSendMessage(conversation.id);
  const setStatus = useSetStatus();
  const markRead = useMarkRead();
  const [draft, setDraft] = useState('');
  const viewport = useRef<HTMLDivElement>(null);

  useEffect(() => {
    markRead.mutate(conversation.id);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [conversation.id, messages?.length]);

  useEffect(() => {
    viewport.current?.scrollTo({ top: viewport.current.scrollHeight });
  }, [messages?.length, conversation.id]);

  const submit = async () => {
    const text = draft.trim();
    if (!text) return;
    setDraft('');
    await send.mutateAsync(text);
  };

  const changeStatus = (status: string) =>
    setStatus.mutate({ id: conversation.id, status });

  return (
    <div className="flex h-full flex-col">
      <div className="flex items-center justify-between gap-2 border-b border-border p-4">
        <div className="min-w-0">
          <div className="flex items-center gap-2">
            <span className="truncate font-bold text-foreground">
              {conversation.subject || 'Conversation'}
            </span>
            <span
              className={`rounded-full px-2 py-0.5 text-[10px] font-medium capitalize ${
                STATUS_CLASS[conversation.status] ?? ''
              }`}
            >
              {conversation.status.toLowerCase()}
            </span>
          </div>
          <p className="truncate text-xs text-muted-foreground">
            {conversation.passengerName || 'Passenger'}
            {conversation.guestId ? ' · Guest' : ''}
            {conversation.guestEmail ? ` · ${conversation.guestEmail}` : ''}
            {conversation.guestPhone ? ` · ${conversation.guestPhone}` : ''}
          </p>
        </div>
        <div className="flex shrink-0 gap-2">
          {conversation.status !== 'OPEN' && (
            <button
              onClick={() => changeStatus('OPEN')}
              className="rounded-md px-3 py-1.5 text-xs font-medium text-white"
              style={{ background: GREEN }}
            >
              Reopen
            </button>
          )}
          {conversation.status === 'OPEN' && (
            <button
              onClick={() => changeStatus('RESOLVED')}
              className="rounded-md bg-blue-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-700"
            >
              Resolve
            </button>
          )}
          {conversation.status !== 'CLOSED' && (
            <button
              onClick={() => changeStatus('CLOSED')}
              className="rounded-md bg-muted px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-muted/70"
            >
              Close
            </button>
          )}
        </div>
      </div>

      <div ref={viewport} className="flex-1 space-y-3 overflow-y-auto p-4">
        {isLoading ? (
          <div className="p-6 text-center text-sm text-muted-foreground">
            Loading…
          </div>
        ) : (
          (messages ?? []).map((m) => <AgentBubble key={m.id} m={m} />)
        )}
      </div>

      <div className="border-t border-border p-3">
        <div className="flex items-end gap-2">
          <textarea
            value={draft}
            onChange={(e) => setDraft(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                submit();
              }
            }}
            rows={1}
            placeholder="Type your reply…  (Enter to send, Shift+Enter for newline)"
            className="max-h-28 flex-1 resize-none rounded-lg border border-border bg-background px-3 py-2 text-sm outline-none focus:border-emerald-500"
          />
          <button
            onClick={submit}
            disabled={!draft.trim() || send.isPending}
            className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg text-white transition hover:opacity-90 disabled:opacity-50"
            style={{ background: GREEN }}
            aria-label="Send"
          >
            <Send size={18} />
          </button>
        </div>
      </div>
    </div>
  );
}

function AgentBubble({ m }: { m: MessageDto }) {
  const mine = m.sender === 'AGENT';
  return (
    <div className={`flex ${mine ? 'justify-end' : 'justify-start'} items-end gap-2`}>
      {!mine && (
        <span className="flex h-7 w-7 items-center justify-center rounded-full bg-muted text-muted-foreground">
          <User size={14} />
        </span>
      )}
      <div className="max-w-[70%]">
        <p
          className={`mb-0.5 text-xs text-muted-foreground ${
            mine ? 'text-right' : 'text-left'
          }`}
        >
          {mine ? m.authorName || 'You' : m.authorName || 'Passenger'}
        </p>
        <div
          className={`whitespace-pre-wrap break-words rounded-2xl px-3 py-2 text-sm ${
            mine
              ? 'rounded-br-sm text-white'
              : 'rounded-bl-sm bg-muted text-foreground'
          }`}
          style={mine ? { background: GREEN } : undefined}
        >
          {m.text}
        </div>
        <p
          className={`mt-0.5 text-[10px] text-muted-foreground ${
            mine ? 'text-right' : 'text-left'
          }`}
        >
          {formatTime(m.createdAt)}
        </p>
      </div>
    </div>
  );
}