import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { ArrowRight, Coffee, Croissant, Moon, Soup } from "lucide-react";
import type { LucideIcon } from "lucide-react";
import { useCategories } from "@/hooks/useRecipes";
import { useAuth } from "@/hooks/useAuth";
import { MEAL_CATEGORY_ROUTES, MealCategory } from "@/types/recipe.types";
import { useMealCategoryLabels } from "@/i18n/useMealCategoryLabel";
import { Skeleton } from "@/components/ui/Skeleton";
import { ErrorState } from "@/components/ui/ErrorState";
import { extractApiError } from "@/api/axiosInstance";

const CARD_META: Record<MealCategory, { icon: LucideIcon; gradient: string }> = {
  [MealCategory.Breakfast]: { icon: Coffee, gradient: "from-amber-400 to-orange-500" },
  [MealCategory.SecondBreakfast]: { icon: Croissant, gradient: "from-sky-400 to-blue-500" },
  [MealCategory.Lunch]: { icon: Soup, gradient: "from-brand-400 to-brand-600" },
  [MealCategory.Dinner]: { icon: Moon, gradient: "from-violet-400 to-purple-600" },
};

export function DashboardPage() {
  const { t } = useTranslation();
  const { user } = useAuth();
  const categoryLabels = useMealCategoryLabels();
  const { data: categories, isLoading, isError, error, refetch } = useCategories();

  return (
    <div className="space-y-8">
      <header>
        <h1 className="text-2xl font-extrabold tracking-tight sm:text-3xl">
          {user?.userName ? t("dashboard.welcomeNamed", { name: user.userName }) : t("dashboard.welcome")}
        </h1>
        <p className="mt-1 text-slate-500 dark:text-slate-400">{t("dashboard.subtitle")}</p>
      </header>

      {isError ? (
        <ErrorState
          message={extractApiError(error, t("errors.loadCategoriesFailed"))}
          onRetry={() => void refetch()}
        />
      ) : (
        <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
          {isLoading
            ? Array.from({ length: 4 }).map((_, i) => <Skeleton key={i} className="h-40" />)
            : categories?.map((cat) => {
                const meta = CARD_META[cat.category as MealCategory];
                const Icon = meta?.icon ?? Coffee;
                return (
                  <Link
                    key={cat.category}
                    to={MEAL_CATEGORY_ROUTES[cat.category as MealCategory]}
                    className="card group relative overflow-hidden p-6 hover:shadow-lg"
                  >
                    <div
                      className={`absolute -right-6 -top-6 grid h-24 w-24 place-items-center rounded-full bg-gradient-to-br ${meta?.gradient} opacity-90`}
                    >
                      <Icon className="h-9 w-9 text-white" />
                    </div>
                    <p className="text-sm font-medium text-slate-500 dark:text-slate-400">
                      {t("common.category")}
                    </p>
                    <h2 className="mt-1 text-xl font-bold">
                      {categoryLabels[cat.category as MealCategory]}
                    </h2>
                    <p className="mt-6 text-3xl font-extrabold text-brand-600">{cat.count}</p>
                    <p className="text-sm text-slate-500 dark:text-slate-400">
                      {t("common.recipeCount", { count: cat.count })}
                    </p>
                    <span className="mt-4 inline-flex items-center gap-1 text-sm font-semibold text-brand-600 group-hover:gap-2">
                      {t("dashboard.viewRecipes")} <ArrowRight className="h-4 w-4 transition-all" />
                    </span>
                  </Link>
                );
              })}
        </div>
      )}
    </div>
  );
}
