w-funnel/src/components/admin/builder/BuilderPreview.tsx

"use client";

import { useCallback, useEffect, useMemo, useState } from "react";

import { ListTemplate } from "@/components/funnel/templates/ListTemplate";
import { InfoTemplate } from "@/components/funnel/templates/InfoTemplate";
import { DateTemplate } from "@/components/funnel/templates/DateTemplate";
import { FormTemplate } from "@/components/funnel/templates/FormTemplate";
import { CouponTemplate } from "@/components/funnel/templates/CouponTemplate";
import { useBuilderSelectedScreen } from "@/lib/admin/builder/context";
import type { ListScreenDefinition, InfoScreenDefinition, DateScreenDefinition, FormScreenDefinition, CouponScreenDefinition } from "@/lib/funnel/types";
import { mergeScreenWithOverrides } from "@/lib/admin/builder/variants";

export function BuilderPreview() {
  const selectedScreen = useBuilderSelectedScreen();
  const [selectedIds, setSelectedIds] = useState<string[]>([]);
  const [formData, setFormData] = useState<Record<string, string>>({});
  const [previewVariantIndex, setPreviewVariantIndex] = useState<number | null>(null);

  useEffect(() => {
    if (!selectedScreen) {
      setSelectedIds([]);
      setFormData({});
      setPreviewVariantIndex(null);
      return;
    }

    setSelectedIds((prev) => {
      if (prev.length === 0) {
        return prev;
      }
      return [];
    });
  }, [selectedScreen]);

  const handleSelectionChange = useCallback((ids: string[]) => {
    setSelectedIds((prev) => {
      if (prev.length === ids.length && prev.every((value, index) => value === ids[index])) {
        return prev;
      }
      return ids;
    });
  }, []);

  const handleFormChange = useCallback((data: Record<string, string>) => {
    setFormData(data);
  }, []);


  const variants = useMemo(() => selectedScreen?.variants ?? [], [selectedScreen]);

  useEffect(() => {
    setPreviewVariantIndex(null);
  }, [selectedScreen]);

  const previewScreen = useMemo(() => {
    if (!selectedScreen) {
      return null;
    }

    if (previewVariantIndex === null) {
      return selectedScreen;
    }

    const variant = variants[previewVariantIndex];
    if (!variant) {
      return selectedScreen;
    }

    return mergeScreenWithOverrides(selectedScreen, variant.overrides ?? {});
  }, [previewVariantIndex, selectedScreen, variants]);

  const renderScreenPreview = useCallback(() => {
    if (!previewScreen) return null;

    const commonProps = {
      showGradient: false,
      canGoBack: false,
      onBack: () => {},
      onContinue: () => {}, // Mock continue handler for preview
    };

    switch (previewScreen.template) {
      case "list":
        return (
          <ListTemplate
            {...commonProps}
            screen={previewScreen as ListScreenDefinition}
            selectedOptionIds={selectedIds}
            onSelectionChange={handleSelectionChange}
          />
        );

      case "info":
        return (
          <InfoTemplate
            {...commonProps}
            screen={previewScreen as InfoScreenDefinition}
          />
        );

      case "date":
        return (
          <DateTemplate
            {...commonProps}
            screen={previewScreen as DateScreenDefinition}
            selectedDate={{ month: "", day: "", year: "" }}
            onDateChange={() => {}}
          />
        );

      case "form":
        return (
          <FormTemplate
            {...commonProps}
            screen={previewScreen as FormScreenDefinition}
            formData={formData}
            onFormDataChange={handleFormChange}
          />
        );


      case "coupon":
        return (
          <CouponTemplate
            {...commonProps}
            screen={previewScreen as CouponScreenDefinition}
          />
        );

      default:
        return (
          <div className="flex h-32 items-center justify-center rounded-lg border border-dashed border-border text-sm text-muted-foreground">
            Предпросмотр для данного типа экрана не поддерживается.
          </div>
        );
    }
  }, [previewScreen, selectedIds, formData, handleSelectionChange, handleFormChange]);

  const preview = useMemo(() => {
    if (!previewScreen) {
      return (
        <div className="flex items-center justify-center mx-auto" style={{ height: '600px', width: '320px' }}>
          <div className="flex items-center justify-center rounded-lg border border-dashed border-border bg-muted/30 text-sm text-muted-foreground w-full h-full">
            Выберите экран для предпросмотра
          </div>
        </div>
      );
    }

    // Используем пропорции современных iPhone (19.5:9 = ~2.17:1)
    const PREVIEW_WIDTH = 320;
    const PREVIEW_HEIGHT = Math.round(PREVIEW_WIDTH * 2.17); // ~694px

    return (
      <div className="mx-auto space-y-4" style={{ width: PREVIEW_WIDTH }}>
        {variants.length > 0 && (
          <div className="rounded-lg border border-border/60 bg-background/90 p-3 text-xs text-muted-foreground">
            <div className="flex items-center justify-between gap-2">
              <span className="font-semibold uppercase tracking-wide text-muted-foreground/80">
                Вариант предпросмотра
              </span>
              <select
                className="rounded-md border border-border bg-background px-2 py-1 text-xs"
                value={previewVariantIndex === null ? "base" : String(previewVariantIndex)}
                onChange={(event) =>
                  setPreviewVariantIndex(event.target.value === "base" ? null : Number(event.target.value))
                }
              >
                <option value="base">Основной экран</option>
                {variants.map((variant, index) => (
                  <option key={index} value={index}>
                    Вариант {index + 1}
                  </option>
                ))}
              </select>
            </div>
          </div>
        )}

        {/* Mobile Frame - Simple Border */}
        <div
          className="relative bg-white rounded-2xl border-4 border-gray-300 shadow-lg overflow-hidden"
          style={{
            height: PREVIEW_HEIGHT,
            width: PREVIEW_WIDTH 
          }}
        >
          {/* Screen Content - Scrollable */}
          <div 
            className="w-full h-full overflow-y-auto overflow-x-hidden bg-white [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"
            style={{ height: PREVIEW_HEIGHT }}
          >
            {renderScreenPreview()}
          </div>
        </div>
      </div>
    );
  }, [previewScreen, renderScreenPreview, variants, previewVariantIndex]);

  return preview;
}