Epicure/apps/web/components/meal-plan/shared-meal-plan-view.tsx

"use client";

import { useState } from "react";
import { toast } from "sonner";
import { Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";

type Day = "mon" | "tue" | "wed" | "thu" | "fri" | "sat" | "sun";
type MealType = "breakfast" | "lunch" | "dinner" | "snack";

const DAYS: Day[] = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];
const MEAL_TYPES: MealType[] = ["breakfast", "lunch", "dinner", "snack"];

type Entry = {
  id: string;
  day: Day;
  mealType: MealType;
  servings: number;
  recipe: { id: string; title: string } | null;
};

type UserRecipe = { id: string; title: string };

export function SharedMealPlanView({
  mealPlanId,
  initialEntries,
  userRecipes,
  canEdit,
}: {
  mealPlanId: string;
  initialEntries: Entry[];
  userRecipes: UserRecipe[];
  canEdit: boolean;
}) {
  const [entries, setEntries] = useState<Entry[]>(initialEntries);
  const [addingCell, setAddingCell] = useState<string | null>(null);

  function cellKey(day: Day, mealType: MealType) {
    return `${day}-${mealType}`;
  }

  async function addEntry(day: Day, mealType: MealType, recipeId: string) {
    const res = await fetch(`/api/v1/meal-plans/shared/${mealPlanId}/entries`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ day, mealType, recipeId, servings: 2 }),
    });
    if (!res.ok) { toast.error("Could not add recipe"); return; }
    const { id } = await res.json() as { id: string };
    const recipe = userRecipes.find((r) => r.id === recipeId) ?? null;
    setEntries((prev) => [
      ...prev.filter((e) => !(e.day === day && e.mealType === mealType)),
      { id, day, mealType, servings: 2, recipe },
    ]);
    setAddingCell(null);
  }

  async function removeEntry(entry: Entry) {
    const res = await fetch(`/api/v1/meal-plans/shared/${mealPlanId}/entries?entryId=${entry.id}`, {
      method: "DELETE",
    });
    if (!res.ok) { toast.error("Could not remove entry"); return; }
    setEntries((prev) => prev.filter((e) => e.id !== entry.id));
  }

  return (
    <div className="overflow-x-auto">
      <table className="w-full border-collapse text-sm min-w-[640px]">
        <thead>
          <tr>
            <th className="text-left p-2 text-muted-foreground font-medium"></th>
            {DAYS.map((day) => (
              <th key={day} className="text-left p-2 text-muted-foreground font-medium capitalize">{day}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {MEAL_TYPES.map((mealType) => (
            <tr key={mealType} className="border-t">
              <td className="p-2 text-muted-foreground font-medium capitalize align-top">{mealType}</td>
              {DAYS.map((day) => {
                const entry = entries.find((e) => e.day === day && e.mealType === mealType);
                const key = cellKey(day, mealType);
                return (
                  <td key={key} className="p-2 align-top min-w-[120px]">
                    {entry ? (
                      <div className="flex items-start justify-between gap-1 rounded-lg border p-2">
                        <span className="text-xs">{entry.recipe?.title ?? "—"}</span>
                        {canEdit && (
                          <Button variant="ghost" size="icon" className="h-5 w-5 shrink-0" onClick={() => void removeEntry(entry)}>
                            <Trash2 className="h-3 w-3" />
                          </Button>
                        )}
                      </div>
                    ) : canEdit ? (
                      addingCell === key ? (
                        <Select onValueChange={(v) => void addEntry(day, mealType, v as string)}>
                          <SelectTrigger className="h-8 text-xs">
                            <SelectValue placeholder="Pick recipe" />
                          </SelectTrigger>
                          <SelectContent>
                            {userRecipes.map((r) => (
                              <SelectItem key={r.id} value={r.id}>{r.title}</SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      ) : (
                        <button
                          className="w-full h-8 rounded-lg border border-dashed text-xs text-muted-foreground hover:bg-muted/30"
                          onClick={() => setAddingCell(key)}
                        >
                          + Add
                        </button>
                      )
                    ) : (
                      <span className="text-xs text-muted-foreground">—</span>
                    )}
                  </td>
                );
              })}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}