'use client';

/**
 * WishlistFavoritesUI — section 14 of /design-system.
 *
 * Demonstrates the wishlist & favorites UI components:
 *  - WishlistButton  (#wishlist-favorites-wishlist-button)
 *  - FavoriteButton  (#wishlist-favorites-favorite-button)
 *
 * All components are wrapped in a WishlistProvider so the context hooks work.
 */

import { HydratedIsland } from '@/components/HydratedIsland';
import { useT } from '@/lib/i18n/react';
import { SectionShell } from '../../components/SectionShell';
import { WishlistProvider } from '@/features/wishlist/WishlistContext.js';
import { WishlistButton } from '@/components/ui/domain/WishlistButton/WishlistButton';
import { FavoriteButton } from '@/components/ui/domain/FavoriteButton/FavoriteButton';

// ─── Token note helper ────────────────────────────────────────────────────────

function TokenNote({ children }: { children: React.ReactNode }) {
  return (
    <p className="text-text-secondary rounded-sm bg-neutral-50 px-3 py-2 font-mono text-sm">
      {children}
    </p>
  );
}

// ─── Section ──────────────────────────────────────────────────────────────────

export function WishlistFavoritesUI() {
  return (
    <HydratedIsland>
      <WishlistFavoritesUIInner />
    </HydratedIsland>
  );
}

function WishlistFavoritesUIInner() {
  const t = useT('design_system');

  return (
    <SectionShell
      id="wishlist-favorites"
      title={t('sidebar_wishlist_favorites')}
      description="Wishlist and favorites UI components. WishlistButton saves a deal; FavoriteButton saves a vendor."
    >
      {/* ── WishlistButton ───────────────────────────────────────────────────── */}
      <section
        id="wishlist-favorites-wishlist-button"
        className="border-border-default flex flex-col gap-3 rounded-lg border p-4"
      >
        <h3 className="text-text-primary text-sm font-semibold">WishlistButton</h3>
        <TokenNote>
          {`color-error (saved) · color-muted (unsaved) · aria-pressed · Heart icon fill-current when saved`}
        </TokenNote>
        <p className="text-text-secondary text-sm">
          Toggle button that adds/removes a deal from the user&apos;s wishlist. Optimistic update
          via WishlistContext. Calls <code>/api/wishlist/toggle</code> (will 401 in gallery — no
          auth). Supports RTL mirror prop on the Heart icon.
        </p>

        {/* Unsaved state */}
        <WishlistProvider>
          <div className="flex flex-wrap items-center gap-4">
            <div className="flex flex-col items-center gap-1">
              <WishlistButton dealId="deal-unsaved" />
              <span className="text-text-secondary text-xs">Unsaved</span>
            </div>
            {/* Saved state — seed provider with the deal id */}
            <WishlistProvider initialDealIds={['deal-saved']}>
              <div className="flex flex-col items-center gap-1">
                <WishlistButton dealId="deal-saved" />
                <span className="text-text-secondary text-xs">Saved</span>
              </div>
            </WishlistProvider>
            {/* RTL mirror */}
            <WishlistProvider initialDealIds={['deal-mirror']}>
              <div className="flex flex-col items-center gap-1">
                <WishlistButton dealId="deal-mirror" mirror />
                <span className="text-text-secondary text-xs">Saved + mirror</span>
              </div>
            </WishlistProvider>
          </div>
        </WishlistProvider>
      </section>

      {/* ── FavoriteButton ───────────────────────────────────────────────────── */}
      <section
        id="wishlist-favorites-favorite-button"
        className="border-border-default flex flex-col gap-3 rounded-lg border p-4"
      >
        <h3 className="text-text-primary text-sm font-semibold">FavoriteButton</h3>
        <TokenNote>
          {`color-warning (saved) · color-muted (unsaved) · aria-pressed · Star icon fill-[color-warning] when saved`}
        </TokenNote>
        <p className="text-text-secondary text-sm">
          Toggle button that adds/removes a vendor from the user&apos;s favorites. Optimistic update
          via WishlistContext. Calls <code>/api/favorites/toggle</code> (will 401 in gallery — no
          auth).
        </p>

        <div className="flex flex-wrap items-center gap-4">
          {/* Unsaved state */}
          <WishlistProvider>
            <div className="flex flex-col items-center gap-1">
              <FavoriteButton vendorId="vendor-unsaved" />
              <span className="text-text-secondary text-xs">Unsaved</span>
            </div>
          </WishlistProvider>
          {/* Saved state */}
          <WishlistProvider initialVendorIds={['vendor-saved']}>
            <div className="flex flex-col items-center gap-1">
              <FavoriteButton vendorId="vendor-saved" />
              <span className="text-text-secondary text-xs">Saved</span>
            </div>
          </WishlistProvider>
        </div>
      </section>

    </SectionShell>
  );
}