// TicketBasicInfo - Component for displaying basic ticket information
import React from 'react';

function TicketBasicInfo({ ticket }) {
  if (!ticket) return null;

  return (
    <div className="grid grid-cols-1 md:grid-cols-4 gap-3 text-xs">
      <div className="rounded-lg bg-white border border-gray-200 p-3">
        <div className="text-gray-400 uppercase">Ticket</div>
        <div className="font-medium text-gray-800 mt-1">{ticket.title || ticket.task || ticket.id}</div>
        <div className="text-gray-500 mt-1 font-mono">{ticket.id}</div>
        <div className="text-gray-400 mt-1">{ticket.status}</div>
        {(ticket.sprint_name || ticket.milestone_name) && (
          <div className="mt-2 flex flex-wrap gap-1">
            {ticket.milestone_name && <span className="text-[11px] px-2 py-0.5 rounded-full bg-purple-100 text-purple-700">{ticket.milestone_name}</span>}
            {ticket.sprint_name && <span className="text-[11px] px-2 py-0.5 rounded-full bg-sky-100 text-sky-700">{ticket.sprint_name}</span>}
          </div>
        )}
      </div>
      <div className="rounded-lg bg-white border border-gray-200 p-3">
        <div className="text-gray-400 uppercase">Assignment</div>
        <div className="font-medium text-gray-800 mt-1">{ticket.assigned_tool?.tool || "—"}</div>
        <div className="text-gray-400 mt-1">{ticket.assigned_tool?.agent_mode || ""}</div>
      </div>
      <div className="rounded-lg bg-white border border-gray-200 p-3">
        <div className="text-gray-400 uppercase">Latest job</div>
        <div className="font-medium text-gray-800 mt-1">{ticket.last_job?.status || "—"}</div>
        <div className="text-gray-400 mt-1">{ticket.last_job?.tool || "—"}</div>
      </div>
      <div className="rounded-lg bg-white border border-gray-200 p-3">
        <div className="text-gray-400 uppercase">Progress</div>
        <div className="font-medium text-gray-800 mt-1">{ticket.actual_hours > 0 ? `${ticket.actual_hours}h spent` : "—"}</div>
        <div className="text-gray-400 mt-1">{ticket.completed_at ? `Done: ${formatTimestamp(ticket.completed_at)}` : `Updated: ${formatTimestamp(ticket.updated_at)}`}</div>
      </div>
    </div>
  );
}

export default TicketBasicInfo;
