import { RefreshCcw } from "lucide-react";
import StatusIcon from "./StatusIcon";

export interface TimelineItemData {
  id: number;
  title: string;
  description: string;
  date: string;
  status: "Completed" | "In Progress" | "Rejected" | "Pending";
}

interface TimelineItemProps {
  item: TimelineItemData;
  onResubmit?: (id: number) => void;
}

export default function TimelineItem({ item, onResubmit }: TimelineItemProps) {
  const isRejected = item.status === "Rejected";
  const isInProgress = item.status === "In Progress";
  const isCompleted = item.status === "Completed";
  const isPending = item.status === "Pending";

  const getCardStyles = () => {
    if (isCompleted) return "border-teal-200 bg-teal-50/30 hover:bg-teal-50/60";
    if (isRejected) return "border-red-200 bg-red-50/40";
    if (isInProgress) return "border-blue-500 bg-blue-50 shadow-md ring-1 ring-blue-200";
    if (isPending) return "bg-white border-dashed opacity-60";
    return "bg-white border-gray-100";
  };

  const getTitleStyles = () => {
    if (isRejected) return "text-red-700";
    if (isInProgress) return "text-blue-700";
    if (isCompleted) return "text-teal-900";
    return "text-gray-700";
  };

  const getStatusBadgeStyles = () => {
    if (isCompleted) return "bg-teal-600 text-white";
    if (isInProgress) return "bg-blue-600 text-white animate-pulse";
    if (isRejected) return "bg-red-600 text-white";
    return "bg-gray-100 text-gray-400";
  };

  return (
    <div className="relative flex items-start group">
      <div className="relative z-10 flex items-center justify-center bg-white p-1 ml-[-4px]">
        <StatusIcon status={item.status} />
      </div>

      <div className={`ml-4 p-4 rounded-xl border transition-all duration-200 w-full ${getCardStyles()}`}>
        <div className="flex flex-col xl:flex-row xl:items-center justify-between gap-1">
          <h3 className={`text-sm font-bold leading-tight ${getTitleStyles()}`}>
            {item.title}
          </h3>
          <span className="text-[10px] font-semibold text-gray-400 uppercase">
            {item.date}
          </span>
        </div>

        <p className="text-xs text-gray-500 mt-1 leading-relaxed">
          {item.description}
        </p>

        <div className="flex items-center gap-2 mt-3">
          <span className={`px-2 py-0.5 rounded-[4px] text-[10px] font-bold tracking-wider uppercase ${getStatusBadgeStyles()}`}>
            {item.status}
          </span>

          {isRejected && onResubmit && (
            <button 
              onClick={() => onResubmit(item.id)}
              className="flex items-center gap-1 text-[10px] font-bold text-red-600 hover:text-red-800 transition-colors uppercase"
            >
              <RefreshCcw className="w-3 h-3" /> Re-fill App
            </button>
          )}
        </div>
      </div>
    </div>
  );
}