// src/features/flyer/FlyerDisplay.tsx
import React from 'react';
import { ScanIcon } from '../../components/icons/ScanIcon';
import type { Store } from '../../types';

const formatDateRange = (from: string | null | undefined, to: string | null | undefined): string | null => {
  if (!from && !to) return null;
  const options: Intl.DateTimeFormatOptions = { month: 'long', day: 'numeric', year: 'numeric' };
  
  const fromDate = from ? new Date(`${from}T00:00:00`).toLocaleDateString('en-US', options) : null;
  const toDate = to ? new Date(`${to}T00:00:00`).toLocaleDateString('en-US', options) : null;

  if (fromDate && toDate) {
    return fromDate === toDate ? `Valid on ${fromDate}` : `Deals valid from ${fromDate} to ${toDate}`;
  }
  return fromDate ? `Deals start ${fromDate}` : (toDate ? `Deals end ${toDate}` : null);
};

export interface FlyerDisplayProps {
  imageUrl: string | null;
  store?: Store;
  validFrom?: string | null;
  validTo?: string | null;
  storeAddress?: string | null;
  onOpenCorrectionTool: () => void;
}

export const FlyerDisplay: React.FC<FlyerDisplayProps> = ({ imageUrl, store, validFrom, validTo, storeAddress, onOpenCorrectionTool }) => {
  const dateRange = formatDateRange(validFrom, validTo);
  
  // Determine the correct image source. If imageUrl is already a full URL (starts with http)
  // or is an absolute path (starts with /), use it directly. Otherwise, assume it's a relative
  // filename from the database and prepend the correct path.
  const imageSrc = imageUrl && (imageUrl.startsWith('http') || imageUrl.startsWith('/')) ? imageUrl : `/flyer-images/${imageUrl}`;
  
  return (
    <div className="w-full rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 shadow-sm bg-white dark:bg-gray-900 flex flex-col">
      {(store || dateRange) && (
        <div className="p-3 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 flex items-center space-x-4 pr-4">
          {store?.logo_url && (
            <img 
              src={store.logo_url}
              alt={`${store.name || 'Store'} Logo`}
              className="h-12 w-12 object-contain rounded-md"
            />
          )}
          <div className="grow text-center sm:text-left min-w-0">
            {store?.name && <h3 className="text-gray-900 dark:text-white text-lg font-bold tracking-wide">{store.name}</h3>}
            {dateRange && <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">{dateRange}</p>}
            {storeAddress && <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{storeAddress}</p>}
          </div>
          <button
            onClick={onOpenCorrectionTool}
            className="ml-auto shrink-0 flex items-center px-3 py-2 bg-yellow-500 text-white text-sm font-semibold rounded-md hover:bg-yellow-600 transition-colors"
            title="Manually correct flyer data"
          >
            <ScanIcon className="w-5 h-5 mr-2" />
            Correct Data
          </button>
        </div>
      )}
      <div className="bg-gray-100 dark:bg-gray-800">
        {imageUrl ? (
          <img src={imageSrc} alt="Grocery Flyer" className="w-full h-auto object-contain max-h-[60vh] dark:invert dark:hue-rotate-180" />
        ) : (
          <div className="w-full h-64 bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center">
             <p className="text-gray-500">Flyer image will be displayed here</p>
          </div>
        )}
      </div>
    </div>
  );
};
