import { useState } from "react";
import { router } from "expo-router";
import { useQuery } from "@tanstack/react-query";
import { api } from "@/lib/api";
import { t } from "@/lib/i18n";
import {
  Card,
  EmptyState,
  ErrorView,
  Heading,
  Input,
  LoadingView,
  Screen,
  Small,
} from "@/components/ui";
import { spacing } from "@/lib/theme";

/** Dina sparade recept (favoriter) – sökbar lista. Backend: GET /v1/recipes/favorites/mine. */

interface SavedRecipe {
  id: string;
  titleSv: string;
  totalTimeMinutes: number | null;
  nutritionPerPortion: { kcal?: number } | null;
}
interface FavoritesResponse {
  recipes: SavedRecipe[];
}

export default function SavedRecipesScreen() {
  const [query, setQuery] = useState("");
  const favs = useQuery<FavoritesResponse>({
    queryKey: ["favorites-mine"],
    queryFn: () => api<FavoritesResponse>("/v1/recipes/favorites/mine"),
  });

  if (favs.isLoading) return <LoadingView />;
  if (favs.isError) return <ErrorView onRetry={() => void favs.refetch()} />;

  const all = favs.data?.recipes ?? [];
  const q = query.trim().toLowerCase();
  const filtered = q ? all.filter((r) => r.titleSv.toLowerCase().includes(q)) : all;

  return (
    <Screen style={{ gap: spacing.md }}>
      <Input
        placeholder={t("savedRecipes.searchPlaceholder")}
        autoCapitalize="none"
        value={query}
        onChangeText={setQuery}
      />
      {all.length === 0 ? (
        <EmptyState text={t("savedRecipes.empty")} />
      ) : filtered.length === 0 ? (
        <EmptyState text={t("savedRecipes.emptySearch")} />
      ) : (
        filtered.map((r) => (
          <Card
            key={r.id}
            onPress={() => router.push(`/recipe/${r.id}`)}
            style={{ gap: spacing.xs }}
          >
            <Heading>{r.titleSv}</Heading>
            <Small>
              {[
                r.totalTimeMinutes != null ? `${r.totalTimeMinutes} min` : null,
                r.nutritionPerPortion?.kcal != null
                  ? `${Math.round(r.nutritionPerPortion.kcal)} kcal`
                  : null,
              ]
                .filter(Boolean)
                .join(" · ")}
            </Small>
          </Card>
        ))
      )}
    </Screen>
  );
}
