"use client";

import type { ShiftEntity } from "@/lib/types";

import type { ShiftCardProps } from "./ShiftCard.types";

function formatWage(wage: number): string {
  if (wage >= 1000) {
    return `${(wage / 1000).toFixed(0)}k`;
  }
  return wage.toLocaleString("vi-VN");
}

export default function ShiftCard({
  shift,
  compact = false,
  onClick,
}: ShiftCardProps) {
  console.log(shift);

  if (compact) {
    return (
      <button
        type="button"
        onClick={() => onClick?.(shift)}
        className={`w-full cursor-pointer rounded-lg border px-2 py-1.5 text-left text-xs transition-shadow hover:shadow-sm`}
      >
        <p className="font-semibold">
          {shift.startTime} – {shift.endTime}
        </p>
        <p className="mt-0.5 opacity-75">
          {}h · {formatWage(shift.wage)}
        </p>
      </button>
    );
  }

  return (
    <button
      type="button"
      onClick={() => onClick?.(shift)}
      className={`w-full cursor-pointer rounded-xl border p-3 text-left transition-shadow hover:shadow-md`}
    >
      <div className="flex items-start justify-between">
        <div>
          <p className="text-sm font-bold">
            {shift.startTime} – {shift.endTime}
          </p>
          <p className="mt-1 text-xs opacity-75">
            {}h · {formatWage(shift.wage)} VND
          </p>
        </div>
        <span
          className={`rounded-full px-2 py-0.5 text-[10px] font-semibold ${
            // shift.status === "available"
            //   ? "bg-blue-200 text-blue-800"
            //   : shift.status === "registered"
            //     ? "bg-blue-300 text-blue-900"
            //     : shift.status === "approved_leave"
            //       ? "bg-purple-200 text-purple-800"
            //       : "bg-red-200 text-red-800"
            ""
          }`}
        >
          {/* {style.label} */}
        </span>
      </div>

      {shift.registeredStaff && shift.registeredStaff.length > 0 && (
        <div className="mt-2 border-t border-current/10 pt-2">
          <p className="text-[10px] font-medium tracking-wide uppercase opacity-60">
            Nhân viên ({shift.registeredStaff.length}/{shift.maxStaff})
          </p>
          <div className="mt-1 flex flex-wrap gap-1">
            {shift.registeredStaff.map((s) => (
              <span
                key={s.id}
                className="rounded-full bg-white/60 px-2 py-0.5 text-[10px] font-medium"
              >
                {s.staffId}
              </span>
            ))}
          </div>
        </div>
      )}

      {/* {shift.status === "available" && shift.registeredStaff.length === 0 && (
        <p className="mt-2 text-[10px] italic opacity-50">
          {shift.maxStaff} vị trí còn trống
        </p>
      )} */}
    </button>
  );
}