'use client';

/**
 * NotificationGallery — section 19 of /design-system.
 *
 * Mounted standalone at /design-system/components/notification.astro
 * (client:only="react") to avoid merge conflicts on DesignSystem.tsx
 * during parallel-wave development.
 *
 * Shows all variants of:
 *   - LiveBadge (connected / offline)
 *   - NotificationItem (unread / read)
 *   - NotificationBell (count variants)
 *   - NotificationList (empty state mock)
 */

import { useState } from 'react';
import { HydratedIsland } from '@/components/HydratedIsland';
import { NotificationBell } from '@/components/ui/notification/NotificationBell';
import { NotificationItem } from '@/components/ui/notification/NotificationItem';
import { LiveBadge } from '@/components/ui/notification/LiveBadge';
import { useT } from '@/lib/i18n/react';
import type { NotificationRow } from '@/server/db/queries/live-notifications';

// ── Mock data ─────────────────────────────────────────────────────────────────

const mockUnread: NotificationRow = {
  id: 'mock-1',
  userId: 'user-1',
  event: 'purchase',
  tier: 'optional',
  titleHe: 'הרכישה אושרה!',
  titleEn: 'Purchase confirmed!',
  bodyHe: 'הזמנה #1234 אושרה על ידי המוכר.',
  bodyEn: 'Order #1234 was confirmed by the vendor.',
  link: null,
  payload: {},
  readAt: null,
  createdAt: new Date(Date.now() - 5 * 60_000),
  expiresAt: new Date(Date.now() + 30 * 24 * 3600_000),
};

const mockRead: NotificationRow = {
  id: 'mock-2',
  userId: 'user-1',
  event: 'deal_expiry',
  tier: 'optional',
  titleHe: 'עסקה עומדת לפוג',
  titleEn: 'Deal expiring soon',
  bodyHe: 'קפה ספיישל — נותרו 2 שעות.',
  bodyEn: 'Special Coffee — 2 hours left.',
  link: null,
  payload: {},
  readAt: new Date(Date.now() - 10 * 60_000),
  createdAt: new Date(Date.now() - 26 * 60 * 60_000),
  expiresAt: new Date(Date.now() + 30 * 24 * 3600_000),
};

// ── Gallery component ─────────────────────────────────────────────────────────

function GalleryInner() {
  const t = useT('notif');
  const [readIds, setReadIds] = useState<Set<string>>(new Set());

  const handleRead = (id: string) => setReadIds((prev) => new Set([...prev, id]));

  const liveUnread: NotificationRow = {
    ...mockUnread,
    readAt: readIds.has(mockUnread.id) ? new Date() : null,
  };
  const liveRead: NotificationRow = {
    ...mockRead,
    readAt: readIds.has(mockRead.id) ? new Date() : mockRead.readAt,
  };
  const soloUnread: NotificationRow = {
    ...mockUnread,
    id: 'mock-solo-1',
    readAt: readIds.has('mock-solo-1') ? new Date() : null,
  };
  const soloRead: NotificationRow = {
    ...mockRead,
    id: 'mock-solo-2',
    readAt: readIds.has('mock-solo-2') ? new Date() : mockRead.readAt,
  };

  return (
    <div className="mx-auto max-w-2xl space-y-10">
      <header>
        <h1 className="text-text-primary text-2xl font-bold">19. Notification Components</h1>
        <p className="text-text-secondary mt-1 text-sm">
          NotificationBell · NotificationItem · NotificationList · LiveBadge
        </p>
      </header>

      {/* ── LiveBadge ───────────────────────────────────────────────────── */}
      <section aria-labelledby="s-live-badge">
        <h2 id="s-live-badge" className="text-text-primary mb-4 text-base font-semibold">
          LiveBadge
        </h2>
        <div className="border-border-default bg-surface-base flex flex-wrap gap-6 rounded-lg border p-4">
          <div>
            <p className="text-text-muted mb-2 text-xs">connected=true</p>
            <LiveBadge connected />
          </div>
          <div>
            <p className="text-text-muted mb-2 text-xs">connected=false</p>
            <LiveBadge connected={false} />
          </div>
        </div>
        <dl className="text-text-muted mt-3 space-y-1 text-xs">
          <div>
            <dt className="inline font-medium">Token: </dt>
            <dd className="inline">
              --color-feedback-success-{'{'}400,500{'}'} for pulse/dot
            </dd>
          </div>
          <div>
            <dt className="inline font-medium">A11y: </dt>
            <dd className="inline">
              {'role="status" aria-live="polite" — screen reader announces state change'}
            </dd>
          </div>
          <div>
            <dt className="inline font-medium">Motion: </dt>
            <dd className="inline">animate-ping — respects prefers-reduced-motion via Tailwind</dd>
          </div>
        </dl>
      </section>

      {/* ── NotificationItem ────────────────────────────────────────────── */}
      <section aria-labelledby="s-item">
        <h2 id="s-item" className="text-text-primary mb-4 text-base font-semibold">
          NotificationItem
        </h2>
        <div className="border-border-default bg-surface-base rounded-lg border">
          <ul>
            <NotificationItem notification={soloUnread} onRead={handleRead} staggerIndex={0} />
            <NotificationItem notification={soloRead} onRead={handleRead} />
          </ul>
        </div>
        <dl className="text-text-muted mt-3 space-y-1 text-xs">
          <div>
            <dt className="inline font-medium">Unread: </dt>
            <dd className="inline">bg-brand-primary-50 + font-semibold + blue dot at start</dd>
          </div>
          <div>
            <dt className="inline font-medium">Read: </dt>
            <dd className="inline">bg-transparent + font-medium + no dot</dd>
          </div>
          <div>
            <dt className="inline font-medium">A11y: </dt>
            <dd className="inline">
              {'<button> for click target, aria-label=title, time[dateTime] for timestamps'}
            </dd>
          </div>
          <div>
            <dt className="inline font-medium">i18n: </dt>
            <dd className="inline">
              {'locale-keyed titleHe/titleEn, bodyHe/bodyEn — click "EN" toggle above to verify'}
            </dd>
          </div>
        </dl>
      </section>

      <section aria-labelledby="s-list">
        <h2 id="s-list" className="text-text-primary mb-4 text-base font-semibold">
          NotificationList
        </h2>
        <div className="border-border-default bg-surface-base rounded-lg border">
          <section aria-labelledby="mock-notif-today">
            <h3 id="mock-notif-today" className="text-text-muted px-3 py-2 text-xs font-medium">
              {t('group_today')}
            </h3>
            <ul>
              <NotificationItem notification={liveUnread} onRead={handleRead} />
            </ul>
          </section>
          <section aria-labelledby="mock-notif-yesterday">
            <h3
              id="mock-notif-yesterday"
              className="text-text-muted border-border-subtle border-t px-3 py-2 text-xs font-medium"
            >
              {t('group_yesterday')}
            </h3>
            <ul>
              <NotificationItem
                notification={{ ...liveRead, id: 'mock-2-yesterday' }}
                onRead={handleRead}
                staggerIndex={1}
              />
            </ul>
          </section>
        </div>
      </section>

      {/* ── NotificationBell ────────────────────────────────────────────── */}
      <section aria-labelledby="s-bell">
        <h2 id="s-bell" className="text-text-primary mb-4 text-base font-semibold">
          NotificationBell
        </h2>
        <div className="border-border-default bg-surface-base flex flex-wrap items-center gap-8 rounded-lg border p-4">
          <div>
            <p className="text-text-muted mb-2 text-xs">unreadCount=0 (no badge)</p>
            <NotificationBell unreadCount={0} />
          </div>
          <div>
            <p className="text-text-muted mb-2 text-xs">unreadCount=3</p>
            <NotificationBell unreadCount={3} />
          </div>
          <div>
            <p className="text-text-muted mb-2 text-xs">unreadCount=100 (capped to 99+)</p>
            <NotificationBell unreadCount={100} />
          </div>
          <div>
            <p className="text-text-muted mb-2 text-xs">connected=true (with LiveBadge)</p>
            <NotificationBell unreadCount={2} connected={true} />
          </div>
          <div>
            <p className="text-text-muted mb-2 text-xs">connected=false</p>
            <NotificationBell unreadCount={2} connected={false} />
          </div>
        </div>
        <dl className="text-text-muted mt-3 space-y-1 text-xs">
          <div>
            <dt className="inline font-medium">A11y: </dt>
            <dd className="inline">
              {
                'aria-label={t(\'bell_aria\')}, aria-haspopup="dialog", popover role="dialog" aria-modal'
              }
            </dd>
          </div>
          <div>
            <dt className="inline font-medium">Badge: </dt>
            <dd className="inline">{'Badge tone="brand" size="sm", count capped at 99+'}</dd>
          </div>
          <div>
            <dt className="inline font-medium">RTL: </dt>
            <dd className="inline">Badge positioned with -end-1/-top-1 (logical, RTL-safe)</dd>
          </div>
        </dl>
      </section>
    </div>
  );
}

/** Standalone gallery island — mounted at /design-system/components/notification */
export function NotificationGallery() {
  return (
    <HydratedIsland>
      <GalleryInner />
    </HydratedIsland>
  );
}