import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
import { useIsMobile } from '@/hooks/use-mobile';
import { useApiFetch } from '@/utils/apiFetch';
import { fetchTemplates, uploadTemplateZip } from '@/features/event/api/templatesService';
import { toast } from 'sonner';

type Props = {
  mediaUrl: string;
  onMediaUrlChange: (url: string) => void;

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

  mediaPreview: string | null;
};

type PromotionTemplate = {
  id: string;
  name: string;
  description: string;
  type?: string;
  previewUrl?: string;
};

const PromotionTemplatesSection: React.FC<Props> = ({
  mediaUrl,
  onMediaUrlChange,
  fileInputRef,
  onFileSelected,
  mediaPreview,
}) => {
  const isMobile = useIsMobile();
  const apiFetch = useApiFetch();
  const [allTemplates, setAllTemplates] = useState<PromotionTemplate[]>([]);
  const [loadingTemplates, setLoadingTemplates] = useState(false);

  const eventPromoTemplates = useMemo(() => allTemplates.filter((t) => t.type === 'event_promo' || !t.type), [allTemplates]);
  const eventLineupTemplates = useMemo(() => allTemplates.filter((t) => t.type === 'event_lineup'), [allTemplates]);
  const artistPromoTemplates = useMemo(() => allTemplates.filter((t) => t.type === 'artist_promo'), [allTemplates]);

  const [eventPromoTemplateId, setEventPromoTemplateId] = useState<string>('');
  const [eventLineupTemplateId, setEventLineupTemplateId] = useState<string>('');
  const [artistPromoTemplateId, setArtistPromoTemplateId] = useState<string>('');

  const importZipInputRef = useRef<HTMLInputElement | null>(null);
  const [importingTemplate, setImportingTemplate] = useState(false);

  const selectedEventPromo = allTemplates.find((t) => t.id === eventPromoTemplateId) || null;
  const selectedEventLineup = allTemplates.find((t) => t.id === eventLineupTemplateId) || null;
  const selectedArtistPromo = allTemplates.find((t) => t.id === artistPromoTemplateId) || null;

  const loadTemplates = useCallback(async () => {
    setLoadingTemplates(true);
    try {
      const list = await fetchTemplates(apiFetch);

      const mapped: PromotionTemplate[] = list.map((t: any) => ({
        id: String(t.id),
        name: String(t.name || ''),
        description: String(t.description || ''),
        type: typeof t.type === 'string' ? t.type : undefined,
        previewUrl: typeof t.preview_img === 'string' ? t.preview_img : undefined,
      }));

      setAllTemplates(mapped);

      // Initial defaults if nothing selected yet
      if (!eventPromoTemplateId && (mapped.find((x) => x.type === 'event_promo') || mapped[0])) {
        const firstEvent = mapped.find((x) => x.type === 'event_promo') || mapped[0];
        if (firstEvent?.id) setEventPromoTemplateId(firstEvent.id);
      }
      if (!eventLineupTemplateId) {
        const firstLineup = mapped.find((x) => x.type === 'event_lineup');
        if (firstLineup?.id) setEventLineupTemplateId(firstLineup.id);
      }
      if (!artistPromoTemplateId) {
        const firstArtist = mapped.find((x) => x.type === 'artist_promo');
        if (firstArtist?.id) setArtistPromoTemplateId(firstArtist.id);
      }
    } catch (e: any) {
      toast.error(e?.message || 'Templates konnten nicht geladen werden');
      setAllTemplates([]);
    } finally {
      setLoadingTemplates(false);
    }
  }, [apiFetch, artistPromoTemplateId, eventLineupTemplateId, eventPromoTemplateId]);

  useEffect(() => {
    let cancelled = false;
    (async () => {
      if (cancelled) return;
      await loadTemplates();
    })();
    return () => {
      cancelled = true;
    };
  }, [loadTemplates]);

  const handleImportZip = async (file: File) => {
    setImportingTemplate(true);
    try {
      const result = await uploadTemplateZip(apiFetch, file);

      if (!result?.success) {
        throw new Error(result?.message || 'Template-Import fehlgeschlagen');
      }

      toast.success(result?.message || 'Template importiert');
      await loadTemplates();
    } catch (e: any) {
      const msg = e?.message || 'Template-Import fehlgeschlagen';
      toast.error(msg);
    } finally {
      setImportingTemplate(false);
    }
  };

  const TemplateSelect = ({
    label,
    value,
    onValueChange,
    selected,
    templates,
  }: {
    label: string;
    value: string;
    onValueChange: (next: string) => void;
    selected: PromotionTemplate | null;
    templates: PromotionTemplate[];
  }) => {
    const [open, setOpen] = useState(false);

    return (
      <div className="space-y-2">
        <Label>{label}</Label>
        <div className="grid gap-3 md:grid-cols-[1fr,280px] items-start">
          {isMobile ? (
            <>
              <Button
                type="button"
                variant="outline"
                className="w-full justify-between"
                onClick={() => setOpen(true)}
                disabled={loadingTemplates || templates.length === 0}
              >
                <span className="truncate">{selected?.name || 'Template wählen'}</span>
                <span className="text-muted-foreground">Auswählen</span>
              </Button>

              <Sheet open={open} onOpenChange={setOpen}>
                <SheetContent side="bottom" className="p-0">
                  <div className="p-4">
                    <SheetHeader>
                      <SheetTitle>{label}</SheetTitle>
                    </SheetHeader>
                  </div>
                  <div className="max-h-[70vh] overflow-y-auto px-4 pb-4">
                    <div className="space-y-2">
                      {templates.map((tpl) => {
                        const isActive = tpl.id === value;
                        return (
                          <button
                            key={tpl.id}
                            type="button"
                            className={`w-full rounded-md border p-3 text-left transition-colors ${
                              isActive ? 'bg-primary/10 border-primary/30' : 'hover:bg-muted/40'
                            }`}
                            onClick={() => {
                              onValueChange(tpl.id);
                              setOpen(false);
                            }}
                          >
                            <div className="flex items-center gap-3">
                              <div className="h-12 w-12 rounded border bg-muted/40 overflow-hidden flex items-center justify-center shrink-0">
                                {tpl.previewUrl ? (
                                  <img src={tpl.previewUrl} alt="" className="h-full w-full object-cover" />
                                ) : (
                                  <div className="h-full w-full" />
                                )}
                              </div>
                              <div className="min-w-0">
                                <div className="text-sm font-medium leading-tight truncate">{tpl.name}</div>
                              </div>
                            </div>
                          </button>
                        );
                      })}
                    </div>
                  </div>
                </SheetContent>
              </Sheet>
            </>
          ) : (
            <Select value={value} onValueChange={onValueChange}>
              <SelectTrigger>
                <SelectValue placeholder="Template wählen" />
              </SelectTrigger>
              <SelectContent className="w-[var(--radix-select-trigger-width)] max-w-[calc(100vw-1.5rem)] overflow-x-hidden">
                {templates.map((tpl) => (
                  <SelectItem key={tpl.id} value={tpl.id}>
                    <div className="flex items-center gap-3">
                      <div className="h-10 w-10 rounded border bg-muted/40 overflow-hidden flex items-center justify-center">
                        {tpl.previewUrl ? (
                          <img src={tpl.previewUrl} alt="" className="h-full w-full object-cover" />
                        ) : (
                          <div className="h-full w-full" />
                        )}
                      </div>
                      <div className="min-w-0">
                        <div className="text-sm font-medium leading-tight truncate">{tpl.name}</div>
                      </div>
                    </div>
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          )}

          <div className="rounded-md border bg-background p-3">
            <div className="text-xs text-muted-foreground">Vorschau</div>
            <div className="mt-2 flex gap-3">
              <div className="h-16 w-16 rounded border bg-muted/40 overflow-hidden flex items-center justify-center shrink-0">
                {selected?.previewUrl ? (
                  <img src={selected.previewUrl} alt="" className="h-full w-full object-cover" />
                ) : (
                  <div className="h-full w-full" />
                )}
              </div>
              <div className="min-w-0">
                <div className="text-sm font-medium leading-tight">{selected?.name || 'Kein Template gewählt'}</div>
                <div className="mt-1 text-xs text-muted-foreground leading-snug hidden md:block">{selected?.description || ''}</div>
              </div>
            </div>
            {!loadingTemplates && templates.length === 0 && (
              <div className="mt-2 text-xs text-muted-foreground">Keine Templates verfügbar</div>
            )}
          </div>
        </div>
      </div>
    );
  };

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div className="text-sm font-medium">Promotion Templates</div>
        <div className="text-xs text-muted-foreground">{loadingTemplates ? 'Lade…' : ''}</div>
      </div>

      <div className="space-y-3 rounded-md border p-3">
        <div className="text-sm font-medium">Sektion 1 – Event-Promotion</div>

        <TemplateSelect
          label="Template"
          value={eventPromoTemplateId}
          onValueChange={setEventPromoTemplateId}
          selected={selectedEventPromo}
          templates={eventPromoTemplates}
        />

        <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="space-y-3 rounded-md border p-3">
        <div className="text-sm font-medium">Sektion 2 – Event Lineup</div>
        <TemplateSelect
          label="Template"
          value={eventLineupTemplateId}
          onValueChange={setEventLineupTemplateId}
          selected={selectedEventLineup}
          templates={eventLineupTemplates}
        />
      </div>

      <div className="space-y-3 rounded-md border p-3">
        <div className="text-sm font-medium">Sektion 3 – Artist Promo</div>
        <TemplateSelect
          label="Template"
          value={artistPromoTemplateId}
          onValueChange={setArtistPromoTemplateId}
          selected={selectedArtistPromo}
          templates={artistPromoTemplates}
        />
      </div>

      <div className="flex items-center justify-between gap-3 rounded-md border p-3">
        <div className="flex items-center gap-2">
          <input
            ref={importZipInputRef}
            type="file"
            accept=".zip"
            className="hidden"
            onChange={async (e) => {
              const file = e.target.files?.[0];
              if (!file) return;
              await handleImportZip(file);
              e.target.value = '';
            }}
          />
          <Button
            type="button"
            variant="outline"
            disabled={importingTemplate}
            onClick={() => importZipInputRef.current?.click()}
          >
            Neues Template importieren
          </Button>
        </div>
      </div>

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

export default PromotionTemplatesSection;
