"use client";

import { ThemeProvider } from "@/context/ThemeContext";
import { useTodayJalali } from "@/hooks/useTodayJalali";
import PrintCategories from "@/components/PrintCategories";
import ThemeToggle from "@/components/ThemeToggle";

function HomePage() {
  const { todayJalali, loading, error } = useTodayJalali();

  if (loading)
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-700 text-slate-500 dark:text-slate-400">
        در حال دریافت اطلاعات...
      </div>
    );
  if (error)
    return (
      <div className="min-h-screen flex items-center justify-center text-red-600">
        Error: {error}
      </div>
    );
  if (!todayJalali)
    return (
      <div className="min-h-screen flex items-center justify-center text-red-600">
        Error: Null data
      </div>
    );

  const dateStr = todayJalali.toString();
  const formattedDate = `${dateStr.slice(0, 4)}/${dateStr.slice(4, 6)}/${dateStr.slice(6, 8)}`;

  return (
    <ThemeProvider>
      <div className="min-h-screen bg-slate-50 dark:bg-slate-900 p-4 md:p-6 transition-colors">
        <div className="max-w-7xl mx-auto">
          <header className="mb-6 flex items-center justify-between">
            <div className="text-right">
              <h1 className="text-3xl font-extrabold text-slate-800 dark:text-slate-100">
                لیست پرینت روزانه
              </h1>
              <span className="text-sm text-slate-500 dark:text-slate-400">
                {formattedDate}
              </span>
            </div>
            <ThemeToggle />
          </header>
          <div className="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-4 md:p-6">
            <PrintCategories todayJalali={todayJalali} />
          </div>
        </div>
      </div>
    </ThemeProvider>
  );
}

export default HomePage;
