"use client";

interface Payment {
  id: number;
  invoiceNumber: string;
  amount: string;
  paid: string;
  status: string;
}

const STATUS_COLORS: Record<string, string> = {
  paid: "text-green-600 bg-green-100",
  pending: "text-yellow-600 bg-yellow-100",
  due_today: "text-red-600 bg-red-100",
};

export default function PaymentTracker({ payments }: { payments: Payment[] }) {
  return (
    <div className="bg-white border border-slate-100 rounded-xl overflow-hidden">
      <div className="px-4 py-3 border-b border-slate-100">
        <h2 className="text-sm font-bold text-slate-900">Payment Tracking</h2>
      </div>
      <div className="divide-y divide-slate-50">
        {payments.map((payment) => {
          const paidNum = parseFloat(payment.paid);
          const totalNum = parseFloat(payment.amount);
          const pct = totalNum > 0 ? Math.min(100, (paidNum / totalNum) * 100) : 0;

          return (
            <div key={payment.id} className="px-4 py-3 hover:bg-slate-50 transition-colors">
              <div className="flex items-center justify-between mb-1.5">
                <div>
                  <p className="text-xs font-bold text-slate-800">{payment.invoiceNumber}</p>
                  <p className="text-[10px] text-slate-400">৳ {Number(payment.paid).toLocaleString("en-IN")}</p>
                </div>
                <div className="text-right">
                  <p className="text-xs text-slate-600">৳ {Number(payment.amount).toLocaleString("en-IN")}</p>
                  <span
                    className={`text-[10px] font-semibold px-2 py-0.5 rounded-full ${
                      STATUS_COLORS[payment.status] || "bg-slate-100 text-slate-600"
                    }`}
                  >
                    {payment.status === "paid" ? "Paid" : payment.status === "due_today" ? "Due Today" : "Pending"}
                  </span>
                </div>
              </div>
              {/* Progress bar */}
              <div className="h-1.5 bg-slate-100 rounded-full overflow-hidden">
                <div
                  className={`h-full rounded-full transition-all duration-700 ${
                    payment.status === "paid" ? "bg-green-500" : payment.status === "due_today" ? "bg-red-400" : "bg-yellow-400"
                  }`}
                  style={{ width: `${pct}%` }}
                />
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}