import React, { useEffect, useId, useRef, useState } from "react";
import { __ } from "@wordpress/i18n";
import { Check, Pencil } from "lucide-react";
import { DEFAULT_PLUGIN_NOTIFICATION_SETTINGS } from "@libs/plugin-notifications";

const PluginNotificationPreferences = ({
  question,
  description,
  value,
  onChange,
  error,
  disabled = false,
  onEditingChange,
}) => {
  const settings = { ...DEFAULT_PLUGIN_NOTIFICATION_SETTINGS, ...value };
  const baseId = useId();
  const defaultName = String(question.defaultName || "").trim();
  const defaultEmail = String(question.defaultEmail || "").trim();
  const effectiveName = String(settings.name || defaultName).trim();
  const effectiveEmail = String(settings.email || defaultEmail).trim();
  const [isEditing, setIsEditing] = useState(false);
  const [draftName, setDraftName] = useState(effectiveName);
  const [draftEmail, setDraftEmail] = useState(effectiveEmail);
  const [draftError, setDraftError] = useState("");
  const nameInputRef = useRef(null);

  useEffect(() => {
    onEditingChange?.(isEditing);
  }, [isEditing, onEditingChange]);

  useEffect(() => {
    if (!isEditing) {
      setDraftName(effectiveName);
      setDraftEmail(effectiveEmail);
    }
  }, [effectiveEmail, effectiveName, isEditing]);

  useEffect(() => {
    if (isEditing) {
      nameInputRef.current?.focus();
      nameInputRef.current?.select();
    }
  }, [isEditing]);

  const startEditing = () => {
    setDraftName(effectiveName);
    setDraftEmail(effectiveEmail);
    setDraftError("");
    setIsEditing(true);
  };

  const saveContact = () => {
    const normalizedName = draftName.trim();
    const normalizedEmail = draftEmail.trim();
    const nextName =
      !normalizedName || normalizedName === defaultName ? "" : normalizedName;
    const matchesDefault =
      normalizedEmail.toLowerCase() === defaultEmail.toLowerCase();
    const nextEmail = matchesDefault ? "" : normalizedEmail;
    const validationMessage = question.validate?.({
      ...settings,
      name: nextName,
      email: nextEmail,
    });

    if (validationMessage) {
      setDraftError(validationMessage);
      return;
    }

    onChange({ ...settings, name: nextName, email: nextEmail });
    setDraftError("");
    setIsEditing(false);
  };

  const handleContactKeyDown = (event) => {
    if (event.key === "Enter") {
      event.preventDefault();
      saveContact();
      return;
    }

    if (event.key === "Escape") {
      event.preventDefault();
      setDraftName(effectiveName);
      setDraftEmail(effectiveEmail);
      setDraftError("");
      setIsEditing(false);
    }
  };

  const toggleNotification = (optionValue) => {
    onChange({
      ...settings,
      [optionValue]: !Boolean(settings[optionValue]),
    });
  };

  const label = (
    <span className="arraysubs-plugin-notifications__title">
      <span>{question.label}</span>
      {isEditing ? (
        <>
          <input
            ref={nameInputRef}
            type="text"
            className="arraysubs-plugin-notifications__name-input"
            value={draftName}
            size={Math.min(Math.max(draftName.length, 12), 40)}
            maxLength={120}
            aria-label={__("Notification recipient name", "arraysubs")}
            onChange={(event) => {
              setDraftName(event.target.value);
              setDraftError("");
            }}
            onKeyDown={handleContactKeyDown}
          />
          <span
            aria-hidden="true"
            className="arraysubs-plugin-notifications__separator"
          >
            —
          </span>
          <input
            type="email"
            className="arraysubs-plugin-notifications__email-input"
            value={draftEmail}
            size={Math.min(Math.max(draftEmail.length, 20), 40)}
            maxLength={254}
            aria-label={__("Notification email address", "arraysubs")}
            aria-invalid={draftError || error ? "true" : undefined}
            aria-describedby={
              draftError || error ? `${baseId}-error` : undefined
            }
            onChange={(event) => {
              setDraftEmail(event.target.value);
              setDraftError("");
            }}
            onKeyDown={handleContactKeyDown}
          />
        </>
      ) : (
        <>
          <span className="arraysubs-plugin-notifications__name">
            {effectiveName || __("WordPress administrator", "arraysubs")}
          </span>
          <span
            aria-hidden="true"
            className="arraysubs-plugin-notifications__separator"
          >
            —
          </span>
          <span className="arraysubs-plugin-notifications__email">
            {effectiveEmail || __("WordPress admin email", "arraysubs")}
          </span>
        </>
      )}
      <button
        type="button"
        className="arraysubs-plugin-notifications__email-action"
        aria-label={
          isEditing
            ? __("Save notification recipient", "arraysubs")
            : __("Edit notification recipient", "arraysubs")
        }
        disabled={disabled}
        onClick={isEditing ? saveContact : startEditing}
      >
        {isEditing ? (
          <Check size={17} aria-hidden="true" />
        ) : (
          <Pencil size={15} aria-hidden="true" />
        )}
      </button>
    </span>
  );

  return (
    <div
      className="arraysubs-plugin-notifications"
      role="group"
      aria-labelledby={`${baseId}-label`}
      aria-describedby={draftError || error ? `${baseId}-error` : undefined}
    >
      <div
        id={`${baseId}-label`}
        className="arraysubs-plugin-notifications__label"
      >
        {label}
      </div>
      {description && (
        <p className="arraysubs-plugin-notifications__description">
          {description}
        </p>
      )}
      <fieldset
        className="arraysubs-plugin-notifications__options"
        disabled={disabled}
      >
        {(question.options || []).map((option) => (
          <div
            key={option.value}
            className="arraysubs-plugin-notifications__option"
          >
            <label
              className="arraysubs-plugin-notifications__choice"
              htmlFor={`${baseId}-${option.value}`}
            >
              <input
                id={`${baseId}-${option.value}`}
                type="checkbox"
                value={option.value}
                checked={Boolean(settings[option.value])}
                onChange={() => toggleNotification(option.value)}
              />
              <span className="arraysubs-plugin-notifications__copy">
                <span className="arraysubs-plugin-notifications__choice-label">
                  <span>{option.label}</span>
                </span>
              </span>
            </label>
          </div>
        ))}
      </fieldset>
      {(draftError || error) && (
        <div
          id={`${baseId}-error`}
          className="arraysubs-plugin-notifications__error"
          role="alert"
        >
          {draftError || error}
        </div>
      )}
    </div>
  );
};

export default PluginNotificationPreferences;