frontend/components/molecules/cards/ShiftCard.tsx

"use client";

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

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

function getShiftPeriod(startTime: string): "morning" | "afternoon" | "evening" {
  const h = parseInt(startTime.split(":")[0] ?? "0", 10);
  if (h < 12) return "morning";
  if (h < 18) return "afternoon";
  return "evening";
}

const PERIOD_STYLES = {
  morning: {
    border: "border-l-indigo-500",
    text: "text-indigo-700",
    badge: "bg-indigo-100 text-indigo-700",
    dot: "bg-indigo-400",
  },
  afternoon: {
    border: "border-l-amber-500",
    text: "text-amber-700",
    badge: "bg-amber-100 text-amber-700",
    dot: "bg-amber-400",
  },
  evening: {
    border: "border-l-violet-500",
    text: "text-violet-700",
    badge: "bg-violet-100 text-violet-700",
    dot: "bg-violet-400",
  },
};

export default function ShiftCard({ shift, compact = false, onClick }: ShiftCardProps) {
  const registeredCount = shift.registeredStaff?.length ?? 0;
  const period = getShiftPeriod(shift.startTime);
  const s = PERIOD_STYLES[period];

  if (compact) {
    return (
      <button
        type="button"
        onClick={() => onClick?.(shift)}
        className={`group w-full cursor-pointer rounded-xl border-l-[3px] bg-white text-left shadow-sm transition hover:-translate-y-px hover:shadow-md ${s.border}`}
      >
        <div className="px-2.5 py-2">
          <p className={`text-xs font-bold leading-tight ${s.text}`}>
            {shift.startTime}–{shift.endTime}
          </p>
          <div className="mt-1 flex items-center justify-between gap-1">
            <p className="text-[10px] text-(--color-text-muted)">{formatWage(shift.wage ?? 0)}đ</p>
            <span className={`rounded-full px-1.5 py-px text-[9px] font-semibold ${s.badge}`}>
              {registeredCount}/{shift.maxStaff}
            </span>
          </div>
        </div>
      </button>
    );
  }

  return (
    <button
      type="button"
      onClick={() => onClick?.(shift)}
      className={`group w-full cursor-pointer rounded-2xl border-l-[4px] bg-white text-left shadow-sm transition hover:-translate-y-0.5 hover:shadow-lg ${s.border}`}
    >
      <div className="p-4">
        <div className="flex items-start justify-between gap-3">
          <div className="min-w-0">
            <div className="flex items-center gap-2">
              <span className={`h-2 w-2 shrink-0 rounded-full ${s.dot}`} />
              <p className={`text-base font-bold ${s.text}`}>
                {shift.startTime} – {shift.endTime}
              </p>
            </div>
            <p className="mt-1 text-xs text-(--color-text-muted)">
              {(shift.wage ?? 0).toLocaleString("vi-VN")} VND/ca
            </p>
          </div>
          <span className={`shrink-0 rounded-full px-2.5 py-1 text-xs font-semibold ${s.badge}`}>
            {registeredCount}/{shift.maxStaff} staff
          </span>
        </div>

        {registeredCount > 0 && (
          <div className="mt-3 border-t border-gray-100 pt-3">
            <p className="mb-2 text-[10px] font-semibold tracking-wider text-(--color-text-muted) uppercase">
              Registered staff
            </p>
            <div className="flex flex-wrap gap-1.5">
              {shift.registeredStaff!.map((staff) => (
                <span
                  key={staff.id}
                  className="rounded-full bg-gray-100 px-2.5 py-0.5 text-[11px] font-medium text-(--color-text-secondary)"
                >
                  {staff.staffId}
                </span>
              ))}
            </div>
          </div>
        )}
      </div>
    </button>
  );
}