Epicure/apps/web/components/shopping-lists/shopping-lists-page-content.tsx

"use client";
import { useState } from "react";
import { useTranslations } from "next-intl";
import Link from "next/link";
import { ShoppingCart } from "lucide-react";
import { NewShoppingListButton } from "@/components/meal-plan/new-shopping-list-button";
import { ShoppingListActionsMenu } from "@/components/shopping-lists/shopping-list-actions-menu";
import { EmptyState } from "@/components/shared/empty-state";

type ShoppingListItem = {
  id: string;
  name: string;
  generatedAt: string | null;
  totalItems: number;
  checkedItems: number;
};

type SharedListItem = {
  id: string;
  name: string;
  ownerName: string;
  role: "viewer" | "editor";
};

type Props = {
  lists: ShoppingListItem[];
  sharedLists?: SharedListItem[];
};

export function ShoppingListsPageContent({ lists: initialLists, sharedLists = [] }: Props) {
  const t = useTranslations("shoppingLists");
  const ts = useTranslations("shareDialog");
  const [lists, setLists] = useState(initialLists);

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">{t("title")}</h1>
          <p className="text-muted-foreground mt-1">{t("subtitle")}</p>
        </div>
        <NewShoppingListButton />
      </div>

      {lists.length === 0 ? (
        <EmptyState
          icon={ShoppingCart}
          title={t("empty")}
          description={t("emptyDescription")}
          actionSlot={<NewShoppingListButton />}
        />
      ) : (
        <div className="space-y-3 max-w-lg">
          {lists.map((list) => (
            <Link
              key={list.id}
              href={`/shopping-lists/${list.id}`}
              className="flex items-center justify-between gap-2 rounded-xl border p-4 hover:shadow-sm transition-shadow"
            >
              <div className="space-y-1 min-w-0">
                <h2 className="font-semibold truncate">{list.name}</h2>
                <p className="text-sm text-muted-foreground">
                  {list.totalItems === 0
                    ? t("listEmpty")
                    : t("items", { checked: list.checkedItems, total: list.totalItems })}
                  {list.generatedAt && ` · ${t("generated")}`}
                </p>
              </div>
              <div className="flex items-center gap-1 shrink-0">
                <div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center text-xs font-bold">
                  {list.totalItems === 0 ? "—" : `${Math.round((list.checkedItems / list.totalItems) * 100)}%`}
                </div>
                <ShoppingListActionsMenu
                  listId={list.id}
                  name={list.name}
                  onRenamed={(name) =>
                    setLists((prev) => prev.map((l) => (l.id === list.id ? { ...l, name } : l)))
                  }
                  onDeleted={() => setLists((prev) => prev.filter((l) => l.id !== list.id))}
                />
              </div>
            </Link>
          ))}
        </div>
      )}

      {sharedLists.length > 0 && (
        <div className="space-y-3 max-w-lg">
          <h2 className="text-sm font-semibold text-muted-foreground">{t("sharedWithYou")}</h2>
          {sharedLists.map((list) => (
            <Link
              key={list.id}
              href={`/shopping-lists/${list.id}`}
              className="flex items-center justify-between rounded-xl border p-4 hover:shadow-sm transition-shadow"
            >
              <div className="space-y-1">
                <h3 className="font-semibold">{list.name}</h3>
                <p className="text-sm text-muted-foreground">
                  {list.ownerName} · {ts(list.role)}
                </p>
              </div>
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}