"use client";
import { useState, FormEvent } from 'react';
import { checkTicketStatus, SupportTicket } from '@/lib/api/supportService';

const TicketStatusCheck = () => {
  const [ticketNumber, setTicketNumber] = useState('');
  const [isSearching, setIsSearching] = useState(false);
  const [searchError, setSearchError] = useState<string | null>(null);
  const [ticket, setTicket] = useState<SupportTicket | null>(null);

  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setIsSearching(true);
    setSearchError(null);
    setTicket(null);

    try {
      const response = await checkTicketStatus(ticketNumber);
      setTicket(response);
    } catch (error: any) {
      if (error.message === 'Ticket not found') {
        setSearchError('Ticket not found. Please check your ticket number and try again.');
      } else {
        setSearchError('An error occurred while searching. Please try again.');
      }
    } finally {
      setIsSearching(false);
    }
  };

  const formatDate = (dateString: string) => {
    const date = new Date(dateString);
    return date.toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    });
  };

  const getRelativeTime = (dateString: string) => {
    const date = new Date(dateString);
    const now = new Date();
    const diffMs = now.getTime() - date.getTime();
    const diffMins = Math.floor(diffMs / 60000);
    const diffHours = Math.floor(diffMins / 60);
    const diffDays = Math.floor(diffHours / 24);

    if (diffMins < 60) return `${diffMins} minute${diffMins !== 1 ? 's' : ''} ago`;
    if (diffHours < 24) return `${diffHours} hour${diffHours !== 1 ? 's' : ''} ago`;
    if (diffDays < 7) return `${diffDays} day${diffDays !== 1 ? 's' : ''} ago`;
    return formatDate(dateString);
  };

  const getStatusIcon = (statusName: string) => {
    const status = statusName.toLowerCase();
    if (status.includes('open') || status.includes('new')) return 'fa-inbox';
    if (status.includes('progress') || status.includes('working')) return 'fa-spinner';
    if (status.includes('pending') || status.includes('waiting')) return 'fa-clock';
    if (status.includes('resolved') || status.includes('closed')) return 'fa-check-circle';
    return 'fa-ticket';
  };

  const getPriorityIcon = (priorityName: string) => {
    const priority = priorityName.toLowerCase();
    if (priority.includes('urgent') || priority.includes('critical')) return 'fa-exclamation-triangle';
    if (priority.includes('high')) return 'fa-arrow-up';
    if (priority.includes('medium')) return 'fa-minus';
    if (priority.includes('low')) return 'fa-arrow-down';
    return 'fa-flag';
  };

  return (
    <div className="ticket-status-check enterprise-status-check">
      <div className="row justify-content-center">
        <div className="col-12">
          <div className="status-header-enterprise">
            <div className="status-header-icon">
              <i className="fa-solid fa-magnifying-glass"></i>
            </div>
            <h2>Check Ticket Status</h2>
            <p>Track your support request in real-time with instant status updates</p>
          </div>

          <form onSubmit={handleSubmit} className="status-search-form-enterprise">
            <div className="search-container">
              <div className="search-input-wrapper">
                <i className="fa-solid fa-ticket search-icon"></i>
                <input
                  type="text"
                  value={ticketNumber}
                  onChange={(e) => setTicketNumber(e.target.value.toUpperCase())}
                  placeholder="TKT-YYYYMMDD-XXXXX"
                  required
                  className="search-input-enterprise"
                  pattern="TKT-\d{8}-[A-Z0-9]{5}"
                  title="Please enter a valid ticket number (e.g., TKT-20231015-ABCDE)"
                />
                {ticketNumber && (
                  <button
                    type="button"
                    className="clear-btn"
                    onClick={() => {
                      setTicketNumber('');
                      setTicket(null);
                      setSearchError(null);
                    }}
                  >
                    <i className="fa-solid fa-times"></i>
                  </button>
                )}
              </div>
              <button 
                type="submit" 
                className="btn-search-enterprise"
                disabled={isSearching}
              >
                {isSearching ? (
                  <>
                    <span className="spinner-enterprise"></span>
                    <span>Searching...</span>
                  </>
                ) : (
                  <>
                    <i className="fa-solid fa-search"></i>
                    <span>Search</span>
                  </>
                )}
              </button>
            </div>
            <p className="search-hint">
              <i className="fa-solid fa-info-circle"></i>
              Enter your ticket number exactly as it appears in your confirmation email
            </p>
          </form>

          {searchError && (
            <div className="alert-enterprise alert-error">
              <i className="fa-solid fa-exclamation-circle"></i>
              <div>
                <strong>Ticket Not Found</strong>
                <p>{searchError}</p>
              </div>
            </div>
          )}

          {ticket && (
            <div className="ticket-details-enterprise">
              {/* Header Section */}
              <div className="ticket-header-enterprise">
                <div className="ticket-number-section">
                  <span className="ticket-label">Ticket Number</span>
                  <div className="ticket-number-display">
                    <i className="fa-solid fa-ticket"></i>
                    <span>{ticket.ticket_number}</span>
                    <button
                      className="btn-copy-inline"
                      onClick={() => {
                        navigator.clipboard.writeText(ticket.ticket_number);
                        const btn = document.querySelector('.btn-copy-inline');
                        if (btn) {
                          const originalHTML = btn.innerHTML;
                          btn.innerHTML = '<i class="fa-solid fa-check"></i>';
                          setTimeout(() => {
                            btn.innerHTML = originalHTML;
                          }, 2000);
                        }
                      }}
                    >
                      <i className="fa-solid fa-copy"></i>
                    </button>
                  </div>
                </div>
                <div 
                  className="status-badge-enterprise"
                  style={{ 
                    backgroundColor: ticket.status_color || '#6366f1',
                    boxShadow: `0 0 20px ${ticket.status_color}33`
                  }}
                >
                  <i className={`fa-solid ${getStatusIcon(ticket.status_name)}`}></i>
                  <span>{ticket.status_name}</span>
                </div>
              </div>

              {/* Info Cards Section */}
              <div className="ticket-info-cards">
                <div className="info-card">
                  <i className="fa-solid fa-calendar-plus"></i>
                  <div>
                    <span className="card-label">Created</span>
                    <span className="card-value">{getRelativeTime(ticket.created_at)}</span>
                  </div>
                </div>
                <div className="info-card">
                  <i className="fa-solid fa-clock"></i>
                  <div>
                    <span className="card-label">Last Updated</span>
                    <span className="card-value">{getRelativeTime(ticket.updated_at)}</span>
                  </div>
                </div>
                {ticket.priority_name && (
                  <div className="info-card">
                    <i className={`fa-solid ${getPriorityIcon(ticket.priority_name)}`}></i>
                    <div>
                      <span className="card-label">Priority</span>
                      <span 
                        className="card-value priority-value"
                        style={{ color: ticket.priority_color }}
                      >
                        {ticket.priority_name}
                      </span>
                    </div>
                  </div>
                )}
                {ticket.category_name && (
                  <div className="info-card">
                    <i className="fa-solid fa-folder-open"></i>
                    <div>
                      <span className="card-label">Category</span>
                      <span className="card-value">{ticket.category_name}</span>
                    </div>
                  </div>
                )}
              </div>

              {/* Main Content */}
              <div className="ticket-content-section">
                <div className="content-header">
                  <h3>{ticket.title}</h3>
                  <div className="content-meta">
                    <span><i className="fa-solid fa-user"></i> {ticket.user_name}</span>
                    {ticket.company && (
                      <span><i className="fa-solid fa-building"></i> {ticket.company}</span>
                    )}
                  </div>
                </div>
                
                <div className="description-section">
                  <h4><i className="fa-solid fa-align-left"></i> Description</h4>
                  <p>{ticket.description}</p>
                </div>

                {/* Messages Section */}
                {ticket.messages && ticket.messages.filter(msg => !msg.is_internal).length > 0 && (
                  <div className="messages-section-enterprise">
                    <h4>
                      <i className="fa-solid fa-comments"></i> 
                      Conversation 
                      <span className="count-badge">{ticket.messages.filter(msg => !msg.is_internal).length}</span>
                    </h4>
                    <div className="messages-list-enterprise">
                      {ticket.messages
                        .filter(msg => !msg.is_internal)
                        .map((message) => (
                          <div key={message.id} className="message-card-enterprise">
                            <div className="message-avatar">
                              <i className="fa-solid fa-user"></i>
                            </div>
                            <div className="message-content-wrapper">
                              <div className="message-header-enterprise">
                                <span className="message-author">{message.author_name || message.author_email}</span>
                                <span className="message-time">{getRelativeTime(message.created_at)}</span>
                              </div>
                              <div className="message-text">
                                {message.content}
                              </div>
                            </div>
                          </div>
                        ))}
                    </div>
                  </div>
                )}

                {/* Activity Timeline */}
                {ticket.activities && ticket.activities.length > 0 && (
                  <div className="timeline-section-enterprise">
                    <h4>
                      <i className="fa-solid fa-list-check"></i> 
                      Activity Timeline
                    </h4>
                    <div className="timeline-items">
                      {ticket.activities.slice(0, 5).map((activity, index) => (
                        <div key={activity.id} className="timeline-item-enterprise">
                          <div className="timeline-marker">
                            <i className="fa-solid fa-circle"></i>
                          </div>
                          <div className="timeline-content-wrapper">
                            <div className="timeline-text">{activity.description}</div>
                            <div className="timeline-time">{getRelativeTime(activity.created_at)}</div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>

              {/* Footer Actions */}
              <div className="ticket-footer-enterprise">
                <div className="footer-info">
                  <i className="fa-solid fa-shield-check"></i>
                  <span>This ticket is securely tracked and monitored by our support team</span>
                </div>
                <button 
                  className="btn-refresh"
                  onClick={() => handleSubmit({ preventDefault: () => {} } as FormEvent<HTMLFormElement>)}
                >
                  <i className="fa-solid fa-rotate"></i>
                  Refresh Status
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default TicketStatusCheck;