"use client";

import type { Block, ButtonBlockProps, FormBlockProps } from "@/features/editor/state/editorStore";
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";

interface FormControllerPanelProps {
  block: Block; // type === "form"
  blocks: Block[];
  selectedBlockId: string | null;
  updateBlock: (id: string, partial: any) => void;
}

export function FormControllerPanel({ block, blocks, selectedBlockId, updateBlock }: FormControllerPanelProps) {
  if (!selectedBlockId || block.id !== selectedBlockId) return null;

  const formProps = block.props as FormBlockProps;

  return (
    <div className="space-y-4 text-xs">
      <p className="text-slate-400">
        이 폼은 퍼블릭 페이지에서 <code className="font-mono text-[11px]">/api/forms/submit</code>
        엔드포인트로 먼저 전송된 뒤, 설정에 따라 내부 처리 또는 Webhook 으로 전달됩니다.
      </p>

      <div className="space-y-2">
        <div className="flex flex-col gap-1">
          <span className="text-slate-400">전송 대상</span>
          <select
            className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
            value={formProps.submitTarget ?? "internal"}
            onChange={(e) =>
              updateBlock(selectedBlockId, {
                submitTarget: e.target.value as FormBlockProps["submitTarget"],
              } as any)
            }
          >
            <option value="internal">서버 처리 전용 (Webhook 없이 사용)</option>
            <option value="webhook">외부 Webhook / Google Sheets 로 전달</option>
          </select>
        </div>

        {formProps.submitTarget === "webhook" && (
          <div className="space-y-2">
            <label className="flex flex-col gap-1">
              <span className="text-slate-400">Webhook / Google Sheets URL</span>
              <input
                className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
                placeholder="예: https://script.google.com/macros/s/.../exec"
                value={formProps.destinationUrl ?? ""}
                onChange={(e) =>
                  updateBlock(selectedBlockId, {
                    destinationUrl: e.target.value,
                  } as any)
                }
              />
            </label>
            <label className="flex items-center justify-between gap-2">
              <span className="text-slate-400">전송 포맷</span>
              <select
                className="w-40 rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
                value={formProps.payloadFormat ?? "form"}
                onChange={(e) =>
                  updateBlock(selectedBlockId, {
                    payloadFormat: e.target.value as any,
                  } as any)
                }
              >
                <option value="form">폼 데이터 (x-www-form-urlencoded)</option>
                <option value="json">JSON (application/json)</option>
              </select>
            </label>
            <label className="flex items-center justify-between gap-2">
              <span className="text-slate-400">HTTP 메서드</span>
              <select
                className="w-28 rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
                value={formProps.method ?? "POST"}
                onChange={(e) =>
                  updateBlock(selectedBlockId, {
                    method: e.target.value as FormBlockProps["method"],
                  } as any)
                }
              >
                <option value="POST">POST</option>
                <option value="GET">GET</option>
              </select>
            </label>
            <label className="flex flex-col gap-1">
              <span className="text-slate-400">Authorization 토큰 (옵션)</span>
              <input
                className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
                placeholder="예: Bearer xxxxxx"
                value={formProps.headers?.Authorization ?? ""}
                onChange={(e) =>
                  updateBlock(selectedBlockId, {
                    headers: {
                      ...(formProps.headers ?? {}),
                      Authorization: e.target.value,
                    },
                  } as any)
                }
              />
            </label>
            <label className="flex flex-col gap-1">
              <span className="text-slate-400">추가 파라미터 (key=value 형식, 줄바꿈으로 구분)</span>
              <textarea
                className="w-full h-16 rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] font-mono outline-none focus:border-sky-500"
                placeholder={"예:\nsource=landing\nformId=contact-hero"}
                value={Object.entries(formProps.extraParams ?? {})
                  .map(([k, v]) => `${k}=${v}`)
                  .join("\n")}
                onChange={(e) => {
                  const lines = e.target.value.split(/\r?\n/).map((line) => line.trim()).filter(Boolean);
                  const next: Record<string, string> = {};
                  for (const line of lines) {
                    const idx = line.indexOf("=");
                    if (idx > 0) {
                      const key = line.slice(0, idx).trim();
                      const value = line.slice(idx + 1).trim();
                      if (key) next[key] = value;
                    }
                  }

                  updateBlock(selectedBlockId, {
                    extraParams: next,
                  } as any);
                }}
              />
            </label>
          </div>
        )}
      </div>

      <div className="space-y-2 border-t border-slate-800 pt-3 mt-4">
        <h3 className="text-[11px] font-semibold text-slate-200">폼 레이아웃</h3>
        <label className="flex flex-col gap-1 text-xs text-slate-400">
          <span>폼 너비 모드</span>
          <select
            className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
            value={formProps.formWidthMode ?? "auto"}
            onChange={(e) =>
              updateBlock(selectedBlockId, {
                formWidthMode: e.target.value as FormBlockProps["formWidthMode"],
              } as any)
            }
          >
            <option value="auto">자동</option>
            <option value="full">전체 폭</option>
            <option value="fixed">고정 값</option>
          </select>
        </label>
        {(formProps.formWidthMode ?? "auto") === "fixed" && (
          <NumericPropertyControl
            label="폼 고정 너비 (px)"
            unitLabel="(px)"
            value={typeof formProps.formWidthPx === "number" ? formProps.formWidthPx : 480}
            min={160}
            max={1200}
            step={10}
            presets={[
              { id: "sm", label: "좁게", value: 320 },
              { id: "md", label: "보통", value: 480 },
              { id: "lg", label: "넓게", value: 640 },
            ]}
            onChangeValue={(v) =>
              updateBlock(selectedBlockId, {
                formWidthPx: v,
              } as any)
            }
          />
        )}
        <NumericPropertyControl
          label="폼 위/아래 여백 (px)"
          unitLabel="(px)"
          value={typeof formProps.marginYPx === "number" ? formProps.marginYPx : 24}
          min={0}
          max={160}
          step={4}
          presets={[
            { id: "none", label: "없음", value: 0 },
            { id: "compact", label: "좁게", value: 16 },
            { id: "normal", label: "보통", value: 24 },
            { id: "spacious", label: "넓게", value: 40 },
          ]}
          onChangeValue={(v) =>
            updateBlock(selectedBlockId, {
              marginYPx: v,
            } as any)
          }
        />
      </div>

      <div className="space-y-2 border-t border-slate-800 pt-3 mt-4">
        <h3 className="text-[11px] font-semibold text-slate-200">폼 메시지</h3>
        <label className="flex flex-col gap-1 text-xs text-slate-400">
          <span>성공 메시지</span>
          <input
            className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
            placeholder="예: 성공적으로 전송되었습니다."
            value={formProps.successMessage ?? ""}
            onChange={(e) =>
              updateBlock(selectedBlockId, {
                successMessage: e.target.value,
              } as any)
            }
          />
        </label>
        <label className="flex flex-col gap-1 text-xs text-slate-400">
          <span>에러 메시지</span>
          <input
            className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
            placeholder="예: 전송 중 오류가 발생했습니다."
            value={formProps.errorMessage ?? ""}
            onChange={(e) =>
              updateBlock(selectedBlockId, {
                errorMessage: e.target.value,
              } as any)
            }
          />
        </label>
      </div>

      <div className="space-y-3 border-t border-slate-800 pt-3 mt-4">
        <h3 className="text-[11px] font-semibold text-slate-200">폼 컨트롤러</h3>

        <fieldset className="space-y-2" aria-label="폼 필드 매핑">
          <legend className="text-[11px] text-slate-400 mb-1">폼 필드 매핑</legend>
          {blocks
            .filter((b) =>
              b.type === "formInput" ||
              b.type === "formSelect" ||
              b.type === "formCheckbox" ||
              b.type === "formRadio",
            )
            .map((fieldBlock) => {
              const fieldId = fieldBlock.id;
              const anyProps: any = fieldBlock.props ?? {};

              const transmissionKey: string | undefined = anyProps.formFieldName;
              const labelText: string | undefined = anyProps.label ?? anyProps.groupLabel;

              const displayLabel = transmissionKey
                ? labelText && labelText !== transmissionKey
                  ? `${transmissionKey} (${labelText})`
                  : transmissionKey
                : labelText || fieldId;

              const checked = (formProps.fieldIds ?? []).includes(fieldId);

              return (
                <label
                  key={fieldId}
                  className="flex items-center gap-2 text-[11px] text-slate-200"
                >
                  <input
                    type="checkbox"
                    className="h-3 w-3 rounded border-slate-600 bg-slate-950"
                    checked={checked}
                    onChange={(e) => {
                      const current = formProps.fieldIds ?? [];
                      const next = e.target.checked
                        ? [...current, fieldId]
                        : current.filter((id) => id !== fieldId);

                      updateBlock(selectedBlockId, {
                        fieldIds: next,
                      } as any);
                    }}
                  />
                  <span>{displayLabel}</span>
                </label>
              );
            })}
        </fieldset>

        <div className="space-y-1">
          <span className="text-[11px] text-slate-400">Submit 버튼</span>
          <select
            className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
            aria-label="Submit 버튼"
            value={formProps.submitButtonId ?? ""}
            onChange={(e) =>
              updateBlock(selectedBlockId, {
                submitButtonId: e.target.value || null,
              } as any)
            }
          >
            <option value="">선택 안 함</option>
            {blocks
              .filter((b) => b.type === "button")
              .map((buttonBlock) => {
                const btnProps = buttonBlock.props as ButtonBlockProps;
                const transmissionKey = btnProps.formFieldName;
                const labelText = btnProps.label;
                const displayLabel = transmissionKey
                  ? labelText && labelText !== transmissionKey
                    ? `${transmissionKey} (${labelText})`
                    : transmissionKey
                  : labelText || buttonBlock.id;

                return (
                  <option key={buttonBlock.id} value={buttonBlock.id}>
                    {displayLabel}
                  </option>
                );
              })}
          </select>
        </div>
      </div>
    </div>
  );
}
