import { cn } from '@/lib/utils'

interface Props {
  streak: number
  lastActive: string | null
  weeklyCompleted: number
}

const WEEKLY_GOAL = 5
const DAY_LABELS = ['Th 2', 'Th 3', 'Th 4', 'Th 5', 'Th 6', 'Th 7', 'CN']

function getTodayIdx() {
  const d = new Date().getDay() // 0=Sun
  return d === 0 ? 6 : d - 1   // Mon=0 … Sun=6
}

// Derive which days were active this week from streak + lastActive
function getWeekActivity(streak: number, lastActive: string | null): boolean[] {
  const todayIdx = getTodayIdx()
  const activity = Array(7).fill(false)
  if (!lastActive) return activity
  const today = new Date().toISOString().split('T')[0]
  const isActiveToday = lastActive === today
  // Mark past days as done based on streak length (up to but not including today)
  const doneDays = isActiveToday ? Math.min(todayIdx, streak - 1) : Math.min(todayIdx, streak)
  for (let i = todayIdx - doneDays; i < todayIdx; i++) {
    if (i >= 0) activity[i] = true
  }
  return activity
}

export function WeeklySection({ streak, lastActive, weeklyCompleted }: Props) {
  const todayIdx = getTodayIdx()
  const weekActivity = getWeekActivity(streak, lastActive)
  const progressPct = Math.round((weeklyCompleted / WEEKLY_GOAL) * 100)

  return (
    <div className="lg:col-span-7 space-y-5">
      {/* Weekly goal */}
      <div className="bg-white p-6 rounded-xl shadow-sm">
        <div className="flex justify-between items-end mb-3">
          <div>
            <h3 className="text-base font-bold text-slate-800">Mục tiêu tuần</h3>
            <p className="text-xs text-slate-400">Hoàn thành {WEEKLY_GOAL} bài học mỗi tuần</p>
          </div>
          <span className="text-2xl font-black text-green-600">
            {weeklyCompleted}/{WEEKLY_GOAL}
          </span>
        </div>
        <div className="w-full h-3 bg-slate-100 rounded-full overflow-hidden">
          <div
            className="h-full bg-green-400 rounded-full transition-all duration-500"
            style={{ width: `${progressPct}%` }}
          />
        </div>
      </div>

      {/* Weekly heatmap */}
      <div className="bg-white p-6 rounded-xl shadow-sm">
        <h3 className="text-base font-bold text-slate-800 mb-5">Lịch sử rèn luyện</h3>
        <div className="flex justify-between items-center">
          {DAY_LABELS.map((label, i) => {
            const isToday = i === todayIdx
            const done = weekActivity[i]
            const future = i > todayIdx

            return (
              <div key={label} className={cn('flex flex-col items-center gap-2.5', future && 'opacity-30')}>
                <span className={cn('text-[10px] font-bold uppercase', isToday ? 'text-blue-600' : 'text-slate-400')}>
                  {isToday ? 'H.Nay' : label}
                </span>
                {isToday ? (
                  <div className="w-10 h-10 rounded-xl border-2 border-blue-600 border-dashed flex items-center justify-center">
                    <span className="material-symbols-outlined text-blue-600" style={{ fontSize: 18 }}>play_arrow</span>
                  </div>
                ) : done ? (
                  <div className="w-10 h-10 rounded-xl bg-green-200 flex items-center justify-center">
                    <span className="material-symbols-outlined text-green-700" style={{ fontSize: 18 }}>check</span>
                  </div>
                ) : (
                  <div className="w-10 h-10 rounded-xl bg-slate-100" />
                )}
              </div>
            )
          })}
        </div>
      </div>
    </div>
  )
}
