"use client";

import React from "react";
import { TextInput } from "@/components/ui/TextInput/TextInput";
import type { BuilderScreen } from "@/lib/admin/builder/types";
import type { EmailScreenDefinition } from "@/lib/funnel/types";

interface EmailScreenConfigProps {
  screen: BuilderScreen & { template: "email" };
  onUpdate: (updates: Partial<EmailScreenDefinition>) => void;
}

export function EmailScreenConfig({ screen, onUpdate }: EmailScreenConfigProps) {
  const updateEmailInput = (updates: Partial<EmailScreenDefinition["emailInput"]>) => {
    onUpdate({
      emailInput: {
        ...screen.emailInput,
        ...updates,
      },
    });
  };

  const updateImage = (updates: Partial<EmailScreenDefinition["image"]>) => {
    onUpdate({
      image: screen.image ? {
        ...screen.image,
        ...updates,
      } : { src: "", ...updates },
    });
  };


  return (
    <div className="space-y-4">
      <div>
        <h4 className="text-sm font-medium text-slate-700 mb-3">Настройки поля Email</h4>
        <div className="space-y-3">
          <TextInput
            label="Подпись поля"
            placeholder="Email"
            value={screen.emailInput?.label || ""}
            onChange={(e) => updateEmailInput({ label: e.target.value })}
          />
          <TextInput
            label="Плейсхолдер"
            placeholder="Enter your email"
            value={screen.emailInput?.placeholder || ""}
            onChange={(e) => updateEmailInput({ placeholder: e.target.value })}
          />
        </div>
      </div>

      <div>
        <h4 className="text-sm font-medium text-slate-700 mb-3">Изображение (вариативное)</h4>
        <div className="space-y-3">
          <TextInput
            label="URL изображения"
            placeholder="/female-portrait.jpg"
            value={screen.image?.src || ""}
            onChange={(e) => updateImage({ src: e.target.value })}
          />
        </div>
        <div className="text-xs text-muted-foreground bg-blue-50 border border-blue-200 rounded-lg p-3 mt-3">
          <strong>💡 Вариация изображений:</strong> Базовое изображение настраивается здесь. 
          Alt текст, размеры (164x245) и стили зашиты в верстку согласно дизайну. 
          Альтернативные варианты настраиваются в секции &ldquo;Вариативность&rdquo; → добавить вариант → выбрать условие &ldquo;gender = male&rdquo; → переопределить поле image.
        </div>
      </div>

      <div>
        <h4 className="text-sm font-medium text-slate-700 mb-3">Информация</h4>
        <div className="text-xs text-muted-foreground space-y-1">
          <p>• Банер безопасности отображается автоматически с общим текстом для воронки</p>
          <p>• PrivacyTermsConsent настраивается через bottomActionButton.showPrivacyTermsConsent</p>
        </div>
      </div>
    </div>
  );
}
