export interface Complaint {
  id: number | string;
  title: string;
  complain_number: string;
  created_at: string;
  status: string;
  status_translation: string;
}

function getComplaintStatusColor(status: string): string {
  if (status === "new") {
    return "text-[#FCD704] bg-[#FCD704]/15";
  }
  if (status === "in_progress") {
    return "text-blue-400 bg-blue-400/15";
  }
  if (status === "resolved") {
    return "text-green-400 bg-green-400/15";
  }
  if (status === "closed") {
    return "text-gray-400 bg-gray-400/15";
  }
  return "text-gray-400 bg-white/5";
}

export default function ComplaintCard({
  complaint,
  onClick,
}: Readonly<{
  complaint: Complaint;
  onClick: () => void;
}>) {
  const statusColor = getComplaintStatusColor(complaint.status);

  // If no formatDate exists in lib/format, just use the string or a basic formatting
  // Assuming created_at is an ISO string, we can do a simple localized date if needed,
  // but let's try to format it locally if formatDate fails or isn't perfect.
  const displayDate = new Date(complaint.created_at).toLocaleDateString(
    "ar-EG",
    {
      year: "numeric",
      month: "short",
      day: "numeric",
    },
  );

  return (
    <button
      type="button"
      onClick={onClick}
      className="w-full text-right bg-[#1E2128] rounded-2xl p-4 cursor-pointer hover:bg-[#2A2D36] transition-colors border border-transparent hover:border-white/5"
    >
      <div className="flex items-start justify-between mb-3">
        <div className="flex-1 pl-3">
          <span className="text-white font-bold text-base block mb-1">
            {complaint.title}
          </span>
          <span className="text-gray-500 text-xs block">
            رقم الشكوى: {complaint.complain_number}
          </span>
        </div>
        <span
          className={`text-xs font-semibold px-2.5 py-1 rounded-full whitespace-nowrap ${statusColor}`}
        >
          ● {complaint.status_translation}
        </span>
      </div>

      <div className="flex items-center gap-1.5 mt-4">
        <i className="ri-calendar-line text-gray-400 text-sm" />
        <span className="text-gray-400 text-xs">{displayDate}</span>
      </div>
    </button>
  );
}