smoothschedule/frontend/src/pages/Tickets.tsx

import React, { useState, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { Plus, User, Clock, AlertCircle, CheckCircle, XCircle, Circle, Loader2 } from 'lucide-react';
import { useTickets } from '../hooks/useTickets';
import { useTicketWebSocket } from '../hooks/useTicketWebSocket';
import { Ticket, TicketStatus } from '../types';
import TicketModal from '../components/TicketModal';
import { useCurrentUser } from '../hooks/useAuth';

const TicketStatusBadge: React.FC<{ status: Ticket['status'] }> = ({ status }) => {
  const { t } = useTranslation();

  const statusConfig = {
    OPEN: {
      color: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300',
      icon: Circle,
      label: t('tickets.status.open', 'Open'),
    },
    IN_PROGRESS: {
      color: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300',
      icon: Loader2,
      label: t('tickets.status.in_progress', 'In Progress'),
    },
    RESOLVED: {
      color: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300',
      icon: CheckCircle,
      label: t('tickets.status.resolved', 'Resolved'),
    },
    CLOSED: {
      color: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
      icon: XCircle,
      label: t('tickets.status.closed', 'Closed'),
    },
  };

  const config = statusConfig[status] || statusConfig.OPEN;
  const Icon = config.icon;

  return (
    <span className={`inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium ${config.color}`}>
      <Icon size={12} className={status === 'IN_PROGRESS' ? 'animate-spin' : ''} />
      {config.label}
    </span>
  );
};

const TicketPriorityBadge: React.FC<{ priority: Ticket['priority'] }> = ({ priority }) => {
  const { t } = useTranslation();

  const priorityConfig = {
    LOW: {
      color: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
      label: t('tickets.priority.low', 'Low'),
    },
    MEDIUM: {
      color: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300',
      label: t('tickets.priority.medium', 'Medium'),
    },
    HIGH: {
      color: 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300',
      label: t('tickets.priority.high', 'High'),
    },
    URGENT: {
      color: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300',
      label: t('tickets.priority.urgent', 'Urgent'),
    },
  };

  const config = priorityConfig[priority] || priorityConfig.MEDIUM;

  return (
    <span className={`inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium ${config.color}`}>
      <AlertCircle size={12} />
      {config.label}
    </span>
  );
};

const Tickets: React.FC = () => {
  const { t } = useTranslation();
  const { data: currentUser } = useCurrentUser();
  const [statusFilter, setStatusFilter] = useState<TicketStatus | 'ALL'>('ALL');
  const [isTicketModalOpen, setIsTicketModalOpen] = useState(false);
  const [selectedTicket, setSelectedTicket] = useState<Ticket | null>(null);

  // Enable real-time ticket updates via WebSocket
  useTicketWebSocket({ showToasts: true });

  // Fetch all tickets (backend will filter based on user role)
  const { data: tickets = [], isLoading, error } = useTickets();

  // Filter tickets by status
  const filteredTickets = useMemo(() => {
    if (statusFilter === 'ALL') return tickets;
    return tickets.filter(ticket => ticket.status === statusFilter);
  }, [tickets, statusFilter]);

  // Count tickets by status for tabs
  const statusCounts = useMemo(() => {
    const counts = {
      ALL: tickets.length,
      OPEN: 0,
      IN_PROGRESS: 0,
      RESOLVED: 0,
      CLOSED: 0,
    };

    tickets.forEach(ticket => {
      counts[ticket.status]++;
    });

    return counts;
  }, [tickets]);

  const openTicketModal = (ticket: Ticket | null = null) => {
    setSelectedTicket(ticket);
    setIsTicketModalOpen(true);
  };

  const closeTicketModal = () => {
    setSelectedTicket(null);
    setIsTicketModalOpen(false);
  };

  const isOwnerOrManager = currentUser?.role === 'owner' || currentUser?.role === 'manager';

  if (isLoading) {
    return (
      <div className="p-8 max-w-7xl mx-auto">
        <div className="flex items-center justify-center py-12">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-brand-600"></div>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="p-8 max-w-7xl mx-auto">
        <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
          <p className="text-red-800 dark:text-red-300">
            {t('tickets.errorLoading', 'Error loading tickets')}: {(error as Error).message}
          </p>
        </div>
      </div>
    );
  }

  const tabs: Array<{ id: TicketStatus | 'ALL'; label: string }> = [
    { id: 'ALL', label: t('tickets.tabs.all', 'All') },
    { id: 'OPEN', label: t('tickets.tabs.open', 'Open') },
    { id: 'IN_PROGRESS', label: t('tickets.tabs.inProgress', 'In Progress') },
    { id: 'RESOLVED', label: t('tickets.tabs.resolved', 'Resolved') },
    { id: 'CLOSED', label: t('tickets.tabs.closed', 'Closed') },
  ];

  return (
    <div className="p-8 max-w-7xl mx-auto space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
          <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
            {t('tickets.title', 'Support Tickets')}
          </h2>
          <p className="text-gray-500 dark:text-gray-400">
            {isOwnerOrManager
              ? t('tickets.descriptionOwner', 'Manage support tickets for your business')
              : t('tickets.descriptionStaff', 'View and create support tickets')}
          </p>
        </div>
        <button
          onClick={() => openTicketModal()}
          className="flex items-center justify-center gap-2 px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors shadow-sm font-medium"
        >
          <Plus size={18} />
          {t('tickets.newTicket', 'New Ticket')}
        </button>
      </div>

      {/* Status Filter Tabs */}
      <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden">
        <div className="border-b border-gray-200 dark:border-gray-700">
          <nav className="flex -mb-px overflow-x-auto" aria-label="Tabs">
            {tabs.map(tab => (
              <button
                key={tab.id}
                onClick={() => setStatusFilter(tab.id)}
                className={`
                  flex-shrink-0 px-6 py-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap
                  ${statusFilter === tab.id
                    ? 'border-brand-600 text-brand-600 dark:text-brand-400'
                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
                  }
                `}
              >
                {tab.label}
                <span className={`ml-2 py-0.5 px-2 rounded-full text-xs ${
                  statusFilter === tab.id
                    ? 'bg-brand-100 text-brand-800 dark:bg-brand-900/30 dark:text-brand-300'
                    : 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400'
                }`}>
                  {statusCounts[tab.id]}
                </span>
              </button>
            ))}
          </nav>
        </div>

        {/* Tickets Grid */}
        <div className="p-6">
          {filteredTickets.length === 0 ? (
            <div className="text-center py-12">
              <AlertCircle size={48} className="mx-auto mb-4 text-gray-300 dark:text-gray-600" />
              <p className="text-gray-500 dark:text-gray-400">
                {statusFilter === 'ALL'
                  ? t('tickets.noTicketsFound', 'No tickets found')
                  : t('tickets.noTicketsInStatus', `No ${statusFilter.toLowerCase().replace('_', ' ')} tickets`)}
              </p>
            </div>
          ) : (
            <div className="grid grid-cols-1 gap-4">
              {filteredTickets.map(ticket => (
                <div
                  key={ticket.id}
                  onClick={() => openTicketModal(ticket)}
                  className="bg-white dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 rounded-lg p-4 hover:border-brand-300 dark:hover:border-brand-600 hover:shadow-md transition-all cursor-pointer group"
                  style={{
                    borderLeft: ticket.source_email_address
                      ? `4px solid ${ticket.source_email_address.color}`
                      : undefined
                  }}
                >
                  <div className="flex items-start justify-between gap-4">
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2 mb-2">
                        <h3 className="text-base font-semibold text-gray-900 dark:text-white truncate group-hover:text-brand-600 dark:group-hover:text-brand-400">
                          {ticket.subject}
                        </h3>
                      </div>

                      <p className="text-sm text-gray-600 dark:text-gray-300 line-clamp-2 mb-3">
                        {ticket.description}
                      </p>

                      <div className="flex flex-wrap items-center gap-3 text-xs">
                        <TicketStatusBadge status={ticket.status} />
                        <TicketPriorityBadge priority={ticket.priority} />

                        {ticket.category && (
                          <span className="inline-flex items-center gap-1 px-2 py-0.5 bg-gray-100 dark:bg-gray-600 text-gray-700 dark:text-gray-300 rounded-full">
                            {ticket.category}
                          </span>
                        )}

                        {ticket.source_email_address && (
                          <span
                            className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-white text-xs font-medium"
                            style={{ backgroundColor: ticket.source_email_address.color }}
                          >
                            {ticket.source_email_address.display_name}
                          </span>
                        )}

                        <span className="flex items-center gap-1 text-gray-500 dark:text-gray-400">
                          <User size={12} />
                          {ticket.creatorFullName || ticket.creatorEmail}
                        </span>

                        <span className="flex items-center gap-1 text-gray-500 dark:text-gray-400">
                          <Clock size={12} />
                          {new Date(ticket.createdAt).toLocaleDateString()}
                        </span>
                      </div>
                    </div>

                    <div className="flex-shrink-0 text-right">
                      {ticket.assigneeFullName ? (
                        <div className="text-xs text-gray-600 dark:text-gray-400">
                          <div className="font-medium mb-1">{t('tickets.assignedTo', 'Assigned to')}</div>
                          <div className="flex items-center gap-1 justify-end">
                            <User size={12} className="text-brand-500" />
                            <span className="font-medium text-gray-900 dark:text-white">
                              {ticket.assigneeFullName}
                            </span>
                          </div>
                        </div>
                      ) : (
                        <span className="text-xs text-gray-400 dark:text-gray-500">
                          {t('tickets.unassigned', 'Unassigned')}
                        </span>
                      )}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>

      {/* Ticket Create/Detail Modal */}
      {isTicketModalOpen && (
        <TicketModal
          ticket={selectedTicket}
          onClose={closeTicketModal}
        />
      )}
    </div>
  );
};

export default Tickets;