"use client";

import { Check } from "lucide-react";
import { cn } from "@/lib/cn";

interface SignInCalendarProps {
  /** 本周 7 天签到状态（周一→周日） */
  weekly: boolean[];
  /** 今日是否已签到 */
  todaySigned: boolean;
  /** 今天是周几（0~6，对应周一~周日） */
  todayIndex?: number;
  /** 连续签到天数（用于今日格子显示「第 N 天」） */
  streak?: number;
  onSignIn?: () => void;
}

const WEEK_LABELS = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];

export default function SignInCalendar({
  weekly,
  todaySigned,
  todayIndex,
  streak = 0,
  onSignIn,
}: SignInCalendarProps) {
  // 默认今天 = 数组中第一个未签到（或最后一个 true 之后）
  const computedToday =
    todayIndex ??
    (weekly.indexOf(false) === -1
      ? weekly.length - 1
      : weekly.indexOf(false));

  return (
    <div className="grid grid-cols-7 gap-2 sm:gap-3">
      {WEEK_LABELS.map((label, i) => {
        const signed = weekly[i];
        const isToday = i === computedToday;
        const clickable = isToday && !todaySigned;
        return (
          <button
            type="button"
            key={label}
            disabled={!clickable}
            onClick={clickable ? onSignIn : undefined}
            className={cn(
              "rounded-xl py-3 px-2 text-center transition-all border flex flex-col items-center justify-center gap-1.5 min-h-[72px]",
              isToday
                ? clickable
                  ? "bg-grad-purple text-white border-transparent shadow-[0_0_18px_rgba(139,92,246,0.55)] animate-pulse-glow cursor-pointer hover:brightness-110"
                  : "bg-purple-500/15 border-purple-400/45 text-purple-200"
                : signed
                  ? "bg-purple-500/[0.08] border-purple-500/20 text-purple-300"
                  : "bg-surface/40 border-white/10 text-white/35",
            )}
          >
            <div className="font-label text-[10px] tracking-wider opacity-90">
              {label}
            </div>
            {isToday ? (
              <>
                <div className="text-[10px] font-display font-semibold opacity-90 leading-tight">
                  今日
                </div>
                <div className="text-[10px] text-current opacity-75 leading-tight">
                  第 {Math.max(streak, todaySigned ? streak : streak + 1)} 天
                </div>
              </>
            ) : signed ? (
              <Check size={14} strokeWidth={3} />
            ) : (
              <span className="w-1 h-1 rounded-full bg-current opacity-30" />
            )}
          </button>
        );
      })}
    </div>
  );
}
