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

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

  mediaUrl: string;
  onMediaUrlChange: (url: string) => void;

  fileInputRef: React.RefObject<HTMLInputElement | null>;
  onFileSelected: (file: File) => void;

  mediaPreview: string | null;
};

const PromotionTemplatesSection: React.FC<Props> = ({
  promotionOffsetDays,
  setPromotionOffsetDays,
  promotionStartDate,
  handlePromotionStartChange,
  promotionStartRef,
  formatDateForDisplay,
  mediaUrl,
  onMediaUrlChange,
  fileInputRef,
  onFileSelected,
  mediaPreview,
}) => {
  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div className="text-sm font-medium">Promotion Templates</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">Sektion 1 – Event-Promotion</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="space-y-2 pt-2">
          <Label>Bild / Video</Label>
          <div className="flex flex-col sm:flex-row gap-2 items-start sm:items-center">
            <Input placeholder="Media-URL (Bild oder Video)" value={mediaUrl} onChange={(e) => onMediaUrlChange(e.target.value)} />
            <div className="flex items-center gap-2">
              <input
                ref={fileInputRef}
                type="file"
                accept="image/*,video/*"
                className="hidden"
                onChange={(e) => {
                  const file = e.target.files?.[0];
                  if (!file) return;
                  onFileSelected(file);
                }}
              />
              <Button type="button" variant="outline" onClick={() => fileInputRef.current?.click()}>
                Datei auswählen
              </Button>
            </div>
          </div>
          {mediaPreview && (
            <div className="mt-2">
              {mediaPreview.match(/\.mp4$|\.webm$|\.ogg$/i) ? (
                <video src={mediaPreview} className="h-32 rounded border object-cover" controls />
              ) : (
                <img src={mediaPreview} alt="Event Media" className="h-32 rounded border object-cover" />
              )}
            </div>
          )}
        </div>
      </div>

      <div className="text-xs text-muted-foreground">
        Dieser Bereich wird später konkretisiert (Templates, Textbausteine, Scheduling etc.).
      </div>
    </div>
  );
};

export default PromotionTemplatesSection;
