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

const GOAL_OPTIONS = [
  { value: '10', label: '10p', sublabel: 'Dễ dàng' },
  { value: '20', label: '20p', sublabel: 'Tiêu chuẩn' },
  { value: '30', label: '30p', sublabel: 'Thử thách' },
  { value: '60', label: '1h', sublabel: 'Chuyên sâu' },
]

const XP_MAP: Record<string, number> = { '10': 20, '20': 50, '30': 80, '60': 120 }
const STORAGE_KEY = 'settings_daily_goal'

export function DailyGoalCard() {
  const [goal, setGoal] = useState<string>(() => localStorage.getItem(STORAGE_KEY) ?? '20')

  function handleSelect(value: string) {
    setGoal(value)
    localStorage.setItem(STORAGE_KEY, value)
  }

  return (
    <section className="col-span-12 md:col-span-6 bg-white rounded-xl p-6 shadow-sm">
      <h2 className="text-lg font-bold mb-5 flex items-center gap-2 text-slate-800">
        <span className="material-symbols-outlined text-blue-600" style={{ fontSize: 22 }}>target</span>
        Mục tiêu hàng ngày
      </h2>

      <div className="grid grid-cols-2 gap-3">
        {GOAL_OPTIONS.map((opt) => {
          const active = goal === opt.value
          return (
            <button
              key={opt.value}
              onClick={() => handleSelect(opt.value)}
              className={cn(
                'p-4 rounded-xl border-2 text-center transition-all',
                active
                  ? 'border-blue-600 bg-blue-50 text-blue-600'
                  : 'border-slate-100 bg-slate-50 text-slate-700 hover:border-slate-200',
              )}
            >
              <span className={cn('block text-sm font-bold', active && 'text-blue-600')}>{opt.label}</span>
              <span className={cn('text-xs', active ? 'text-blue-500' : 'text-slate-400')}>{opt.sublabel}</span>
            </button>
          )
        })}
      </div>

      <div className="mt-5 p-3.5 rounded-xl bg-blue-50 flex items-center justify-center gap-2 text-blue-600 font-bold text-sm">
        <span className="material-symbols-outlined" style={{ fontSize: 18, fontVariationSettings: "'FILL' 1" }}>stars</span>
        +{XP_MAP[goal]} XP mỗi ngày
      </div>
    </section>
  )
}