// TicketDetailPanelRefactored - Refactored ticket detail panel with separated concerns
import React from 'react';
import Card from '../Card';
import TicketBasicInfo from './TicketBasicInfo';
import TicketProjectArtifacts from './TicketProjectArtifacts';
import TicketExecutionEvidence from './TicketExecutionEvidence';
import TicketComments from './TicketComments';
import TicketRealizationTimeline from './TicketRealizationTimeline';

function TicketDetailPanelRefactored({ ticket, loading, error, onRefresh }) {
  if (!ticket) return null;

  return (
    <Card title={`Ticket details: ${ticket.title || ticket.id}`}>
      <div className="space-y-4">
        {/* Basic Information */}
        <TicketBasicInfo ticket={ticket} />

        {/* Description */}
        {ticket.description && (
          <div>
            <div className="text-xs font-medium text-gray-500 mb-1">Description</div>
            <p className="text-sm text-gray-700 whitespace-pre-wrap">{ticket.description}</p>
          </div>
        )}

        {/* Project Metadata and Artifacts */}
        <TicketProjectArtifacts ticket={ticket} />

        {/* Latest Execution Evidence */}
        <TicketExecutionEvidence ticket={ticket} />

        {/* Comments */}
        <TicketComments ticket={ticket} />

        {/* Realization Timeline */}
        <TicketRealizationTimeline 
          ticket={ticket} 
          loading={loading} 
          error={error} 
          onRefresh={onRefresh} 
        />
      </div>
    </Card>
  );
}

export default TicketDetailPanelRefactored;
