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

type FormState = {
  name: string;
  description: string;
  begin_date: string;
  mediaUrl: string;
  ticketUrl: string;
  admissionTimes: string;
  ticketPrice: string;
};

type Props = {
  form: FormState;
  mode: 'create' | 'edit';
  extractingFromUrl: boolean;
  onExtractFromUrl: () => void;
  onInput: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
  beginDateRef: React.RefObject<HTMLInputElement | null>;
  setForm: React.Dispatch<React.SetStateAction<FormState>>;
  formatDateForDisplay: (iso: string) => string;
};

const EventStammdatenSection: React.FC<Props> = ({
  form,
  mode,
  extractingFromUrl,
  onExtractFromUrl,
  onInput,
  beginDateRef,
  setForm,
  formatDateForDisplay,
}) => {
  return (
    <div className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="ticketUrl">Event-URL</Label>
        <div className="flex flex-col sm:flex-row gap-2 items-stretch sm:items-center">
          <Input
            id="ticketUrl"
            name="ticketUrl"
            type="text"
            placeholder="https://..."
            value={form.ticketUrl}
            onChange={onInput}
            readOnly={mode === 'edit'}
          />
          {mode === 'create' && (
            <Button
              type="button"
              variant="outline"
              className="shrink-0 flex items-center gap-2"
              onClick={onExtractFromUrl}
              disabled={!form.ticketUrl || extractingFromUrl}
            >
              {extractingFromUrl && (
                <span className="h-4 w-4 rounded-full border-2 border-current border-t-transparent animate-spin" />
              )}
              <span>{extractingFromUrl ? 'Lade…' : 'Daten aus URL laden'}</span>
            </Button>
          )}
        </div>
      </div>

      <div className="space-y-2">
        <Label htmlFor="name">Name *</Label>
        <Input id="name" name="name" value={form.name} onChange={onInput} required />
      </div>

      <div className="space-y-2">
        <Label htmlFor="description">Beschreibung *</Label>
        <Textarea id="description" name="description" value={form.description} onChange={onInput} rows={6} required />
      </div>

      <div className="space-y-1">
        <Label htmlFor="begin_date">Datum *</Label>
        <div className="flex items-center gap-2 text-sm text-muted-foreground">
          <span>{formatDateForDisplay(form.begin_date) || 'Noch kein Datum gewählt'}</span>
          <Button
            type="button"
            variant="outline"
            size="sm"
            onClick={() => {
              if (beginDateRef.current) {
                if (beginDateRef.current.showPicker) {
                  beginDateRef.current.showPicker();
                } else {
                  beginDateRef.current.focus();
                }
              }
            }}
          >
            Datum wählen
          </Button>
        </div>
        <Input
          ref={beginDateRef}
          id="begin_date"
          name="begin_date"
          type="date"
          className="hidden"
          value={form.begin_date}
          onChange={(e) => setForm((prev) => ({ ...prev, begin_date: e.target.value }))}
          required
        />
      </div>

      <div className="space-y-2">
        <Label htmlFor="admissionTimes">Einlasszeiten *</Label>
        <Input
          id="admissionTimes"
          name="admissionTimes"
          type="text"
          placeholder="z.B. Einlass 19:00, Beginn 20:00"
          value={form.admissionTimes}
          onChange={onInput}
          required
        />
      </div>

      <div className="space-y-2">
        <Label htmlFor="ticketPrice">Ticketpreis *</Label>
        <Input
          id="ticketPrice"
          name="ticketPrice"
          type="text"
          placeholder="z.B. 10 € / 8 € erm."
          value={form.ticketPrice}
          onChange={onInput}
          required
        />
      </div>
    </div>
  );
};

export default EventStammdatenSection;
