import React from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';

type Props = {
  promotionOffsetDays: string;
  setPromotionOffsetDays: (v: string) => void;
  promotionStartDate: string;
  handlePromotionStartChange: (iso: string) => void;
  promotionStartRef: React.RefObject<HTMLInputElement | null>;
  formatDateForDisplay: (iso: string) => string;
};

const ScheduleSection: React.FC<Props> = ({
  promotionOffsetDays,
  setPromotionOffsetDays,
  promotionStartDate,
  handlePromotionStartChange,
  promotionStartRef,
  formatDateForDisplay,
}) => {
  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div className="text-sm font-medium">Zeitplan</div>
        <div className="flex items-center gap-2 text-xs text-muted-foreground">
          <span>Letzter Post vor Event</span>
          <Input
            type="number"
            min={1}
            className="h-7 w-16 text-xs"
            value={promotionOffsetDays}
            onChange={(e) => setPromotionOffsetDays(e.target.value)}
          />
          <span>Tage</span>
        </div>
      </div>

      <div className="space-y-3 rounded-md border p-3">
        <div className="text-sm font-medium">Promotion Start (Event Promo)</div>
        <div className="space-y-1">
          <div className="flex items-center gap-2 text-sm text-muted-foreground">
            <span>{formatDateForDisplay(promotionStartDate) || 'Noch kein Datum gewählt'}</span>
            <Button
              type="button"
              variant="outline"
              size="sm"
              onClick={() => {
                if (promotionStartRef.current) {
                  if (promotionStartRef.current.showPicker) {
                    promotionStartRef.current.showPicker();
                  } else {
                    promotionStartRef.current.focus();
                  }
                }
              }}
            >
              Datum wählen
            </Button>
          </div>
          <Input
            ref={promotionStartRef}
            id="promotion_start"
            name="promotion_start"
            type="date"
            className="hidden"
            value={promotionStartDate}
            onChange={(e) => handlePromotionStartChange(e.target.value)}
            required
          />
        </div>

        <div className="text-xs text-muted-foreground">
          Dieses Datum ist der Start für die Event-Promo (Slot 1). Die restlichen Promo-Slots werden daraus abgeleitet.
        </div>
      </div>
    </div>
  );
};

export default ScheduleSection;
