import React from 'react';
import { ArrowLeft } from 'lucide-react';
import { Button } from '@/components/ui/button';
import PhotoPostWizardContainer from '@/features/photopost/containers/PhotoPostWizardContainer';
import { type DashboardModule } from '@/components/dashboard/dashboardModuleTypes';

const defaultEventImage = '/default_event.png';

export const quickPostDashboardModule: DashboardModule = {
  id: 'quick-post',
  getTitle: (ctx) => (ctx.currentEvent as any)?.title || ctx.currentEvent?.name || 'Aktuelles Event',
  getDescription: (ctx) => ctx.currentEvent?.description || 'Aktuelles Event',
  getIllustration: (ctx) => {
    const rawImage = (ctx.currentEvent as any)?.coverMediaUrl || (ctx.currentEvent as any)?.image;
    const hasImage = rawImage && String(rawImage).trim() !== '';
    return hasImage ? String(rawImage) : defaultEventImage;
  },
  isVisible: (ctx) => {
    const ev: any = ctx.currentEvent;
    if (!ev) return false;
    const now = new Date();
    now.setHours(0, 0, 0, 0);

    const dateStr = ev.eventDate || ev.event_date || ev.begin_date;
    if (!dateStr) return false;

    const eventDate = new Date(dateStr);
    if (Number.isNaN(eventDate.getTime())) return false;
    eventDate.setHours(0, 0, 0, 0);

    // Karte nur anzeigen, wenn das Event heute stattfindet
    return eventDate.getTime() === now.getTime();
  },
  renderWizard: (ctx, onBack) => {
    const ev: any = ctx.currentEvent;
    const eventId = ev?.id ?? ev?._id ?? ev?.uuid ?? '';

    return (
      <div className="space-y-6">
        <Button
          variant="ghost"
          className="mb-4"
          onClick={onBack}
        >
          <ArrowLeft className="mr-2 h-4 w-4" />
          Zurück zur Übersicht
        </Button>
        <PhotoPostWizardContainer eventId={eventId} onComplete={onBack} />
      </div>
    );
  },
};
