import { TryOnFigure } from './TryOnFigure';
import { tryOnFilename } from './share';
import { useShareAction } from './useShareAction';
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: WidgetTranslations['share'];
  /** 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, now }: GalleryViewProps) {
  const { notice, share } = useShareAction(shareT);

  const handleShare = (item: TryOnHistoryItem) => {
    void share({
      image: item.resultImage,
      filename: tryOnFilename(item.productTitle),
      title: item.productTitle || t.title,
      url: item.productUrl,
    });
  };

  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>
      ) : (
        <>
          {notice && (
            <p
              className={
                notice.isError
                  ? 'aisthetix-gallery-notice aisthetix-gallery-notice--error'
                  : 'aisthetix-gallery-notice'
              }
              role="status"
            >
              {notice.text}
            </p>
          )}

          <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"
                        onClick={() => handleShare(item)}
                        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>
                  </div>
                </li>
              );
            })}
          </ul>

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