import { cn } from "@/lib/utils";
import type { CalendarCell } from "@/lib/calendar/engine";

const WEEKDAY_LABELS = ["CN", "T2", "T3", "T4", "T5", "T6", "T7"] as const;

export function MonthGrid({
  year,
  month,
  cells,
}: {
  year: number;
  month: number;
  cells: CalendarCell[];
}) {
  return (
    <div className="border-stroke-subtle bg-bg-elevated/40 rounded-2xl border p-3 lg:p-5">
      <div className="mb-3 flex items-center justify-between">
        <h3 className="font-display text-lg font-semibold lg:text-xl">
          Tháng {month}/{year}
        </h3>
        <div className="text-ink-muted flex items-center gap-3 text-[11px]">
          <span className="flex items-center gap-1">
            <span className="inline-block h-2 w-2 rounded-full bg-emerald-500/60" /> Hoàng đạo
          </span>
          <span className="flex items-center gap-1">
            <span className="inline-block h-2 w-2 rounded-full bg-rose-500/60" /> Hắc đạo
          </span>
        </div>
      </div>

      <div className="grid grid-cols-7 gap-1 lg:gap-1.5">
        {WEEKDAY_LABELS.map((d, i) => (
          <div
            key={d}
            className={cn(
              "text-ink-muted py-1 text-center text-[11px] font-medium tracking-wider uppercase",
              i === 0 && "text-brand-red-light"
            )}
          >
            {d}
          </div>
        ))}

        {cells.map((c, idx) => {
          const isSunday = idx % 7 === 0;
          return (
            <a
              key={`${c.iso}-${idx}`}
              href={`/lich-am-duong?d=${c.iso}`}
              className={cn(
                "border-stroke-subtle bg-bg-inset/40 hover:border-brand-gold/50 group relative flex min-h-[64px] flex-col rounded-md border p-2 transition lg:min-h-[80px]",
                !c.isCurrentMonth && "opacity-30",
                c.isToday && "border-brand-gold bg-brand-gold/10 hover:border-brand-gold"
              )}
            >
              <span
                className={cn(
                  "font-numeral text-base leading-none lg:text-lg",
                  isSunday ? "text-brand-red-light" : "text-ink-primary",
                  c.isToday && "text-brand-gold font-semibold"
                )}
              >
                {c.solarDay}
              </span>
              <span
                className={cn(
                  "text-ink-muted mt-auto text-[10px] leading-tight lg:text-[11px]",
                  c.monthMarker && "text-brand-gold-soft font-medium"
                )}
              >
                {c.monthMarker || c.lunarDay}
              </span>
              <span
                className={cn(
                  "absolute top-1.5 right-1.5 h-1.5 w-1.5 rounded-full",
                  c.isHoangDao ? "bg-emerald-500/60" : "bg-rose-500/60"
                )}
                aria-hidden="true"
              />
            </a>
          );
        })}
      </div>
    </div>
  );
}