import { useState } from 'react'

const STORAGE_KEY = 'settings_exam_date'

function getDaysUntil(dateStr: string): number {
  const today = new Date()
  today.setHours(0, 0, 0, 0)
  const target = new Date(dateStr)
  target.setHours(0, 0, 0, 0)
  return Math.ceil((target.getTime() - today.getTime()) / (1000 * 60 * 60 * 24))
}

function formatVi(dateStr: string): string {
  const d = new Date(dateStr)
  return d.toLocaleDateString('vi-VN', { day: 'numeric', month: 'long', year: 'numeric' })
}

export function ExamDateCard() {
  const [examDate, setExamDate] = useState<string>(() => localStorage.getItem(STORAGE_KEY) ?? '')
  const [editing, setEditing] = useState(false)
  const [input, setInput] = useState(examDate)

  function save() {
    if (!input) return
    setExamDate(input)
    localStorage.setItem(STORAGE_KEY, input)
    setEditing(false)
  }

  const days = examDate ? getDaysUntil(examDate) : null

  return (
    <section className="col-span-12 md:col-span-6 bg-white rounded-xl p-6 shadow-sm flex flex-col">
      <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 }}>calendar_month</span>
        Ngày thi TOEIC
      </h2>

      <div className="flex-1 flex flex-col justify-center">
        {examDate && days !== null ? (
          <>
            <div className="bg-gradient-to-br from-blue-600 to-blue-500 rounded-xl p-6 text-white text-center shadow-lg shadow-blue-200">
              <p className="text-sm font-medium opacity-80 mb-1">Đếm ngược kỳ thi</p>
              <p className="text-4xl font-extrabold tracking-tight">
                {days > 0 ? `Còn ${days} ngày` : days === 0 ? 'Hôm nay!' : 'Đã qua'}
              </p>
              <div className="mt-3 inline-flex items-center gap-1.5 px-3 py-1 bg-white/20 rounded-full text-xs">
                <span className="material-symbols-outlined" style={{ fontSize: 12 }}>event</span>
                <span>{formatVi(examDate)}</span>
              </div>
            </div>
            <button
              onClick={() => { setInput(examDate); setEditing(true) }}
              className="mt-4 w-full py-2.5 rounded-full border border-blue-200 text-blue-600 font-bold text-sm hover:bg-blue-50 transition-colors"
            >
              Thay đổi ngày thi
            </button>
          </>
        ) : (
          <div className="text-center py-6">
            <span className="material-symbols-outlined text-slate-300 mb-2" style={{ fontSize: 48 }}>event_upcoming</span>
            <p className="text-slate-400 text-sm mb-4">Chưa đặt ngày thi</p>
          </div>
        )}

        {editing || !examDate ? (
          <div className="mt-3 flex gap-2">
            <input
              type="date"
              value={input}
              onChange={(e) => setInput(e.target.value)}
              min={new Date().toISOString().split('T')[0]}
              className="flex-1 border border-slate-200 rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-200"
            />
            <button onClick={save} disabled={!input} className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-bold disabled:opacity-40 hover:bg-blue-700 transition-colors">
              Lưu
            </button>
            {editing && (
              <button onClick={() => setEditing(false)} className="px-3 py-2 text-slate-400 text-sm">Huỷ</button>
            )}
          </div>
        ) : null}
      </div>
    </section>
  )
}