import { useState } from 'react';
import { SharePanel, type ShareIntentProperties, type SharePanelTranslations } from '../components/SharePanel';
import { TryOnFigure } from './TryOnFigure';
import { formatTryOnDate } from './dateLabels';
import type { TryOnHistoryItem } from '../types';
import type { WidgetTranslations } from '../i18n';

interface GalleryViewProps {
  items: TryOnHistoryItem[];
  onBack: () => void;
  onDelete: (id: string) => void;
  t: WidgetTranslations['gallery'];
  shareT: SharePanelTranslations;
  onShareIntent?: (properties: ShareIntentProperties) => void;
  /** Injected by tests so the date labels are deterministic. */
  now?: Date;
}

/**
 * Everything the shopper has tried on, on this device.
 *
 * The Shopify original put an add-to-cart on every row. Here each row links
 * back to the item instead: this is a demo where nothing is for sale, and a
 * cart button would contradict the banner at the top of the page. The way
 * back to the product is the point.
 */
export function GalleryView({ items, onBack, onDelete, t, shareT, onShareIntent, now }: GalleryViewProps) {
  const [sharingId, setSharingId] = useState<string | null>(null);

  return (
    <div className="aisthetix-gallery">
      <div className="aisthetix-gallery-header">
        <button type="button" onClick={onBack} className="aisthetix-btn aisthetix-btn-text">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <polyline points="15 18 9 12 15 6" />
          </svg>
          {t.back}
        </button>
      </div>

      {items.length === 0 ? (
        <div className="aisthetix-gallery-empty">
          <h3>{t.emptyTitle}</h3>
          <p>{t.emptyMessage}</p>
        </div>
      ) : (
        <>
          <ul className="aisthetix-gallery-list">
            {items.map((item) => {
              const title = item.productTitle || t.untitledProduct;
              return (
                <li key={item.id} className="aisthetix-gallery-item">
                  <TryOnFigure
                    variant="gallery"
                    image={item.resultImage}
                    garmentImage={item.clothingImage}
                    alt={title}
                    garmentAlt={t.garmentThumbnail}
                  />

                  <div className="aisthetix-gallery-item-body">
                    <p className="aisthetix-gallery-item-title">{title}</p>
                    <p className="aisthetix-gallery-item-date">
                      {formatTryOnDate(item.createdAt, t, now)}
                    </p>

                    <div className="aisthetix-gallery-item-actions">
                      {item.productUrl && (
                        <a
                          href={item.productUrl}
                          className="aisthetix-btn aisthetix-btn-primary aisthetix-btn-small"
                        >
                          {t.viewProduct}
                        </a>
                      )}
                      <button
                        type="button"
                        aria-expanded={sharingId === item.id}
                        onClick={() => setSharingId(sharingId === item.id ? null : item.id)}
                        className="aisthetix-btn aisthetix-btn-secondary aisthetix-btn-small"
                      >
                        {t.share}
                      </button>
                      <button
                        type="button"
                        onClick={() => onDelete(item.id)}
                        aria-label={t.removeLabel(title)}
                        title={t.remove}
                        className="aisthetix-gallery-remove"
                      >
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 24 24"
                          fill="none"
                          stroke="currentColor"
                          strokeWidth="2"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        >
                          <polyline points="3 6 5 6 21 6" />
                          <path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6" />
                          <path d="M10 11v6" />
                          <path d="M14 11v6" />
                          <path d="M9 6V4a2 2 0 012-2h2a2 2 0 012 2v2" />
                        </svg>
                      </button>
                    </div>
                    {sharingId === item.id ? (
                      <SharePanel
                        initiallyExpanded
                        resultImage={item.resultImage}
                        productName={title}
                        productUrl={item.productUrl || null}
                        brandName={item.merchantName}
                        productImage={item.clothingImage}
                        productId={item.productId || ''}
                        t={shareT}
                        onIntent={(properties) => {
                          // Legacy history entries have no product ID. Never
                          // attribute their actions to the current product.
                          if (item.productId) onShareIntent?.(properties);
                        }}
                      />
                    ) : null}
                  </div>
                </li>
              );
            })}
          </ul>

          <p className="aisthetix-gallery-privacy">{t.privacyNote}</p>
        </>
      )}
    </div>
  );
}