WhatsAppCentralizado/frontend/src/pages/Inbox.tsx

import { useState } from 'react';
import {
  Card,
  List,
  Avatar,
  Typography,
  Input,
  Button,
  Tag,
  Empty,
  Spin,
  Space,
  Badge,
  Dropdown,
  Select,
  Tooltip,
  Modal,
  message,
} from 'antd';
import {
  SendOutlined,
  UserOutlined,
  MoreOutlined,
  SwapOutlined,
  RobotOutlined,
  CheckCircleOutlined,
  MessageOutlined,
  FileTextOutlined,
} from '@ant-design/icons';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { apiClient } from '../api/client';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import 'dayjs/locale/es';

dayjs.extend(relativeTime);
dayjs.locale('es');

const { Text } = Typography;

interface Contact {
  id: string;
  phone_number: string;
  name: string | null;
}

interface Message {
  id: string;
  direction: 'inbound' | 'outbound';
  type: string;
  content: string | null;
  media_url: string | null;
  created_at: string;
  is_internal_note: boolean;
  sent_by: string | null;
}

interface Conversation {
  id: string;
  contact: Contact;
  status: string;
  priority: string;
  assigned_to: string | null;
  queue_id: string | null;
  last_message_at: string | null;
  messages?: Message[];
}

interface Queue {
  id: string;
  name: string;
}

interface Agent {
  id: string;
  name: string;
  status: string;
}

interface QuickReply {
  shortcut: string;
  content: string;
}

const STATUS_COLORS: Record<string, string> = {
  bot: 'blue',
  waiting: 'orange',
  active: 'green',
  resolved: 'default',
};

const PRIORITY_COLORS: Record<string, string> = {
  low: 'default',
  normal: 'blue',
  high: 'orange',
  urgent: 'red',
};

function getMessageBackground(msg: Message): string {
  if (msg.is_internal_note) {
    return '#fff7e6';
  }
  if (msg.direction === 'outbound') {
    return '#25D366';
  }
  return '#f0f0f0';
}

function getMessageColor(msg: Message): string {
  if (msg.is_internal_note) {
    return '#d46b08';
  }
  if (msg.direction === 'outbound') {
    return 'white';
  }
  return 'inherit';
}

function getMessageBorder(msg: Message): string {
  if (msg.is_internal_note) {
    return '1px dashed #ffc069';
  }
  return 'none';
}

export default function Inbox(): JSX.Element {
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [messageText, setMessageText] = useState('');
  const [statusFilter, setStatusFilter] = useState<string | null>(null);
  const [isNoteMode, setIsNoteMode] = useState(false);
  const [transferModalOpen, setTransferModalOpen] = useState(false);
  const [transferType, setTransferType] = useState<'queue' | 'agent'>('queue');
  const queryClient = useQueryClient();

  const { data: conversations, isLoading } = useQuery({
    queryKey: ['conversations', statusFilter],
    queryFn: async () => {
      const url = statusFilter
        ? `/api/whatsapp/conversations?status=${statusFilter}`
        : '/api/whatsapp/conversations';
      return apiClient.get<Conversation[]>(url);
    },
    refetchInterval: 3000,
  });

  const { data: selectedConversation } = useQuery({
    queryKey: ['conversation', selectedId],
    queryFn: async () => {
      if (!selectedId) return null;
      return apiClient.get<Conversation>(`/api/whatsapp/conversations/${selectedId}`);
    },
    enabled: !!selectedId,
    refetchInterval: 2000,
  });

  const { data: queues } = useQuery({
    queryKey: ['queues'],
    queryFn: () => apiClient.get<Queue[]>('/api/queues'),
  });

  const { data: agents } = useQuery({
    queryKey: ['agents'],
    queryFn: () => apiClient.get<Agent[]>('/api/auth/agents'),
  });

  const { data: quickReplies } = useQuery({
    queryKey: ['quick-replies'],
    queryFn: () => apiClient.get<QuickReply[]>('/api/queues/quick-replies'),
  });

  const sendMutation = useMutation({
    mutationFn: async (data: { conversationId: string; content: string }) => {
      await apiClient.post(`/api/whatsapp/conversations/${data.conversationId}/messages`, {
        type: 'text',
        content: data.content,
      });
    },
    onSuccess: () => {
      setMessageText('');
      queryClient.invalidateQueries({ queryKey: ['conversation', selectedId] });
      queryClient.invalidateQueries({ queryKey: ['conversations'] });
    },
  });

  const noteMutation = useMutation({
    mutationFn: async (data: { conversationId: string; content: string }) => {
      await apiClient.post(`/api/whatsapp/conversations/${data.conversationId}/notes`, {
        content: data.content,
      });
    },
    onSuccess: () => {
      setMessageText('');
      setIsNoteMode(false);
      message.success('Nota agregada');
      queryClient.invalidateQueries({ queryKey: ['conversation', selectedId] });
    },
  });

  const transferQueueMutation = useMutation({
    mutationFn: async (data: { conversationId: string; queueId: string }) => {
      await apiClient.post(`/api/whatsapp/conversations/${data.conversationId}/transfer-to-queue`, {
        queue_id: data.queueId,
      });
    },
    onSuccess: () => {
      message.success('Transferido a cola');
      setTransferModalOpen(false);
      queryClient.invalidateQueries({ queryKey: ['conversations'] });
    },
  });

  const transferAgentMutation = useMutation({
    mutationFn: async (data: { conversationId: string; agentId: string }) => {
      await apiClient.post(`/api/whatsapp/conversations/${data.conversationId}/transfer-to-agent`, {
        agent_id: data.agentId,
      });
    },
    onSuccess: () => {
      message.success('Transferido a agente');
      setTransferModalOpen(false);
      queryClient.invalidateQueries({ queryKey: ['conversations'] });
    },
  });

  const transferBotMutation = useMutation({
    mutationFn: async (conversationId: string) => {
      await apiClient.post(`/api/whatsapp/conversations/${conversationId}/transfer-to-bot`, {});
    },
    onSuccess: () => {
      message.success('Transferido a bot');
      queryClient.invalidateQueries({ queryKey: ['conversations'] });
    },
  });

  const resolveMutation = useMutation({
    mutationFn: async (conversationId: string) => {
      await apiClient.post(`/api/whatsapp/conversations/${conversationId}/resolve`, {});
    },
    onSuccess: () => {
      message.success('Conversacion resuelta');
      queryClient.invalidateQueries({ queryKey: ['conversations'] });
    },
  });

  function handleSend(): void {
    if (!messageText.trim() || !selectedId) return;
    if (isNoteMode) {
      noteMutation.mutate({ conversationId: selectedId, content: messageText });
    } else {
      sendMutation.mutate({ conversationId: selectedId, content: messageText });
    }
  }

  function handleTransferQueue(): void {
    setTransferType('queue');
    setTransferModalOpen(true);
  }

  function handleTransferAgent(): void {
    setTransferType('agent');
    setTransferModalOpen(true);
  }

  function handleTransferBot(): void {
    if (selectedId) {
      transferBotMutation.mutate(selectedId);
    }
  }

  function handleResolve(): void {
    if (selectedId) {
      resolveMutation.mutate(selectedId);
    }
  }

  function handleQueueSelect(value: string): void {
    if (selectedId) {
      transferQueueMutation.mutate({ conversationId: selectedId, queueId: value });
    }
  }

  function handleAgentSelect(value: string): void {
    if (selectedId) {
      transferAgentMutation.mutate({ conversationId: selectedId, agentId: value });
    }
  }

  const actionMenuItems = [
    {
      key: 'transfer-queue',
      icon: <SwapOutlined />,
      label: 'Transferir a cola',
      onClick: handleTransferQueue,
    },
    {
      key: 'transfer-agent',
      icon: <UserOutlined />,
      label: 'Transferir a agente',
      onClick: handleTransferAgent,
    },
    {
      key: 'transfer-bot',
      icon: <RobotOutlined />,
      label: 'Transferir a bot',
      onClick: handleTransferBot,
    },
    { type: 'divider' as const },
    {
      key: 'resolve',
      icon: <CheckCircleOutlined />,
      label: 'Resolver conversacion',
      onClick: handleResolve,
    },
  ];

  function renderConversationList(): JSX.Element {
    if (isLoading) {
      return (
        <div style={{ padding: 40, textAlign: 'center' }}>
          <Spin />
        </div>
      );
    }

    if (!conversations || conversations.length === 0) {
      return <Empty description="Sin conversaciones" style={{ padding: 40 }} />;
    }

    return (
      <List
        dataSource={conversations}
        renderItem={(conv) => (
          <List.Item
            onClick={() => setSelectedId(conv.id)}
            style={{
              padding: '12px 16px',
              cursor: 'pointer',
              background: selectedId === conv.id ? '#f5f5f5' : 'transparent',
            }}
          >
            <List.Item.Meta
              avatar={
                <Badge dot={conv.status !== 'resolved'} color={STATUS_COLORS[conv.status]}>
                  <Avatar icon={<UserOutlined />} />
                </Badge>
              }
              title={
                <Space>
                  <Text strong>{conv.contact.name || conv.contact.phone_number}</Text>
                  <Tag color={STATUS_COLORS[conv.status]} style={{ fontSize: 10 }}>
                    {conv.status}
                  </Tag>
                  {conv.priority !== 'normal' && (
                    <Tag color={PRIORITY_COLORS[conv.priority]} style={{ fontSize: 10 }}>
                      {conv.priority}
                    </Tag>
                  )}
                </Space>
              }
              description={
                <Text type="secondary" style={{ fontSize: 12 }}>
                  {conv.last_message_at ? dayjs(conv.last_message_at).fromNow() : 'Sin mensajes'}
                </Text>
              }
            />
          </List.Item>
        )}
      />
    );
  }

  function renderMessageContent(msg: Message): JSX.Element {
    // Render media based on type
    if (msg.media_url) {
      const mediaType = msg.type?.toUpperCase();

      if (mediaType === 'IMAGE') {
        return (
          <>
            <img
              src={msg.media_url}
              alt="Imagen"
              style={{
                maxWidth: '100%',
                maxHeight: 300,
                borderRadius: 4,
                marginBottom: msg.content ? 8 : 0,
              }}
              onClick={() => window.open(msg.media_url!, '_blank')}
            />
            {msg.content && msg.content !== '[Image]' && (
              <Text style={{ color: 'inherit', display: 'block' }}>{msg.content}</Text>
            )}
          </>
        );
      }

      if (mediaType === 'AUDIO') {
        return (
          <audio controls style={{ maxWidth: '100%' }}>
            <source src={msg.media_url} type="audio/ogg" />
            Tu navegador no soporta audio.
          </audio>
        );
      }

      if (mediaType === 'VIDEO') {
        return (
          <video controls style={{ maxWidth: '100%', maxHeight: 300, borderRadius: 4 }}>
            <source src={msg.media_url} type="video/mp4" />
            Tu navegador no soporta video.
          </video>
        );
      }

      if (mediaType === 'DOCUMENT') {
        return (
          <a href={msg.media_url} target="_blank" rel="noopener noreferrer" style={{ color: 'inherit' }}>
            📄 {msg.content || 'Documento'}
          </a>
        );
      }
    }

    // Default text content
    return <Text style={{ color: 'inherit' }}>{msg.content}</Text>;
  }

  function renderMessage(msg: Message): JSX.Element {
    return (
      <div
        key={msg.id}
        style={{
          alignSelf: msg.direction === 'outbound' ? 'flex-end' : 'flex-start',
          maxWidth: '70%',
        }}
      >
        <div
          style={{
            padding: '8px 12px',
            borderRadius: 8,
            background: getMessageBackground(msg),
            color: getMessageColor(msg),
            border: getMessageBorder(msg),
          }}
        >
          {msg.is_internal_note && (
            <Text type="secondary" style={{ fontSize: 10, display: 'block', marginBottom: 4 }}>
              <FileTextOutlined /> Nota interna
            </Text>
          )}
          {renderMessageContent(msg)}
        </div>
        <Text
          type="secondary"
          style={{
            fontSize: 10,
            display: 'block',
            textAlign: msg.direction === 'outbound' ? 'right' : 'left',
            marginTop: 4,
          }}
        >
          {dayjs(msg.created_at).format('HH:mm')}
        </Text>
      </div>
    );
  }

  function renderQuickReplies(): JSX.Element | null {
    if (!quickReplies || quickReplies.length === 0) {
      return null;
    }

    return (
      <div style={{ padding: '8px 16px', borderTop: '1px solid #f0f0f0' }}>
        <Space wrap size={4}>
          {quickReplies.slice(0, 5).map((qr) => (
            <Tooltip key={qr.shortcut} title={qr.content}>
              <Tag style={{ cursor: 'pointer' }} onClick={() => setMessageText(qr.content)}>
                {qr.shortcut}
              </Tag>
            </Tooltip>
          ))}
        </Space>
      </div>
    );
  }

  function renderMessageInput(): JSX.Element {
    const inputStyle = isNoteMode ? { borderColor: '#ffc069' } : {};
    const buttonStyle = isNoteMode
      ? { background: '#d46b08', borderColor: '#d46b08' }
      : { background: '#25D366', borderColor: '#25D366' };

    return (
      <div style={{ padding: 16, borderTop: '1px solid #f0f0f0' }}>
        <div style={{ marginBottom: 8 }}>
          <Space>
            <Button
              size="small"
              type={isNoteMode ? 'default' : 'primary'}
              icon={<MessageOutlined />}
              onClick={() => setIsNoteMode(false)}
            >
              Mensaje
            </Button>
            <Button
              size="small"
              type={isNoteMode ? 'primary' : 'default'}
              icon={<FileTextOutlined />}
              onClick={() => setIsNoteMode(true)}
              style={isNoteMode ? { background: '#d46b08', borderColor: '#d46b08' } : {}}
            >
              Nota interna
            </Button>
          </Space>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <Input
            placeholder={isNoteMode ? 'Escribe una nota interna...' : 'Escribe un mensaje...'}
            value={messageText}
            onChange={(e) => setMessageText(e.target.value)}
            onPressEnter={handleSend}
            style={inputStyle}
          />
          <Button
            type="primary"
            icon={<SendOutlined />}
            onClick={handleSend}
            loading={sendMutation.isPending || noteMutation.isPending}
            style={buttonStyle}
          />
        </div>
      </div>
    );
  }

  function renderChatContent(): JSX.Element {
    if (!selectedConversation) {
      return (
        <div
          style={{
            flex: 1,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Empty description="Selecciona una conversacion" />
        </div>
      );
    }

    return (
      <>
        <div
          style={{
            padding: 16,
            borderBottom: '1px solid #f0f0f0',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}
        >
          <div>
            <Text strong style={{ fontSize: 16 }}>
              {selectedConversation.contact.name || selectedConversation.contact.phone_number}
            </Text>
            <br />
            <Text type="secondary">{selectedConversation.contact.phone_number}</Text>
          </div>
          <Space>
            <Tag color={STATUS_COLORS[selectedConversation.status]}>
              {selectedConversation.status}
            </Tag>
            <Dropdown menu={{ items: actionMenuItems }} trigger={['click']}>
              <Button icon={<MoreOutlined />} />
            </Dropdown>
          </Space>
        </div>

        <div
          style={{
            flex: 1,
            overflow: 'auto',
            padding: 16,
            display: 'flex',
            flexDirection: 'column',
            gap: 8,
          }}
        >
          {selectedConversation.messages?.map(renderMessage)}
        </div>

        {renderQuickReplies()}
        {renderMessageInput()}
      </>
    );
  }

  function renderTransferModal(): JSX.Element {
    const title = transferType === 'queue' ? 'Transferir a Cola' : 'Transferir a Agente';

    return (
      <Modal
        title={title}
        open={transferModalOpen}
        onCancel={() => setTransferModalOpen(false)}
        footer={null}
      >
        {transferType === 'queue' ? (
          <Select
            placeholder="Seleccionar cola"
            style={{ width: '100%' }}
            onChange={handleQueueSelect}
          >
            {queues?.map((q) => (
              <Select.Option key={q.id} value={q.id}>
                {q.name}
              </Select.Option>
            ))}
          </Select>
        ) : (
          <Select
            placeholder="Seleccionar agente"
            style={{ width: '100%' }}
            onChange={handleAgentSelect}
          >
            {agents
              ?.filter((a) => a.status === 'online')
              .map((a) => (
                <Select.Option key={a.id} value={a.id}>
                  {a.name} ({a.status})
                </Select.Option>
              ))}
          </Select>
        )}
      </Modal>
    );
  }

  return (
    <div style={{ display: 'flex', height: 'calc(100vh - 180px)', gap: 16 }}>
      <Card
        style={{ width: 380, overflow: 'auto' }}
        styles={{ body: { padding: 0 } }}
        title={
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span>Conversaciones</span>
            <Select
              placeholder="Filtrar"
              allowClear
              size="small"
              style={{ width: 120 }}
              value={statusFilter}
              onChange={setStatusFilter}
            >
              <Select.Option value="bot">Bot</Select.Option>
              <Select.Option value="waiting">En espera</Select.Option>
              <Select.Option value="active">Activas</Select.Option>
              <Select.Option value="resolved">Resueltas</Select.Option>
            </Select>
          </div>
        }
      >
        {renderConversationList()}
      </Card>

      <Card
        style={{ flex: 1, display: 'flex', flexDirection: 'column' }}
        styles={{ body: { flex: 1, display: 'flex', flexDirection: 'column', padding: 0 } }}
      >
        {renderChatContent()}
      </Card>

      {renderTransferModal()}
    </div>
  );
}