<script setup>
const props = defineProps({
  selectedField: Object,

  isSuperAdmin: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["update-field-property", "update-option"]);

const availableFields = [
  {
    type: "text",
    label: "Text Input",
    icon: "pi pi-minus",
  },
  {
    type: "email",
    label: "Email Input",
    icon: "pi pi-envelope",
  },
  {
    type: "textarea",
    label: "Textarea",
    icon: "pi pi-align-left",
  },
  {
    type: "select",
    label: "Select Dropdown",
    icon: "pi pi-chevron-down",
  },
  {
    type: "radio",
    label: "Radio Buttons",
    icon: "pi pi-circle",
  },
  {
    type: "checkbox",
    label: "Checkboxes",
    icon: "pi pi-check-square",
  },
  {
    type: "number",
    label: "Number Input",
    icon: "pi pi-hashtag",
  },
  {
    type: "date",
    label: "Date Input",
    icon: "pi pi-calendar",
  },
  {
    type: "cta",
    label: "Submit Button",
    icon: "pi pi-send",
  },
  {
    type: "agree",
    label: "Agreement",
    icon: "pi pi-check-square",
  },
];

const updateFieldProperty = (property, value) => {
  if (!props.selectedField || props.selectedField.id === undefined || props.selectedField.id === null) return;
  emit("update-field-property", props.selectedField.id, property, value);
};

const updateOptionValue = (optionIndex, value) => {
  emit("update-option", optionIndex, value);
};

const addOption = () => {
  if (props.selectedField && props.selectedField.options) {
    const newOptions = [
      ...props.selectedField.options,
      `Option ${props.selectedField.options.length + 1}`,
    ];
    updateFieldProperty("options", newOptions);
  }
};

const removeOption = (optionIndex) => {
  if (props.selectedField && props.selectedField.options) {
    const newOptions = [...props.selectedField.options];
    newOptions.splice(optionIndex, 1);
    updateFieldProperty("options", newOptions);
  }
};

const isFieldDisabled = (property) => {
  // Disable certain properties for default fields for non-super admins
  if (props.selectedField?.is_default && !props.isSuperAdmin) {
    if (property === "required") return true;
  }
  return false;
};
</script>

<template>
  <div class="property-panel">
    <div class="property-header">
      <h3 class="property-title">
        <i class="pi pi-cog"></i>
        Field Settings
      </h3>
      <div
        class="field-type-badge"
        :class="{ 'default-badge': selectedField.is_default }"
      >
        <i
          :class="
            availableFields.find((f) => f.type === selectedField.type)?.icon
          "
        ></i>
        {{ availableFields.find((f) => f.type === selectedField.type)?.label }}
        <span v-if="selectedField.is_default" class="default-indicator"
          >⚡</span
        >
      </div>
    </div>

    <div class="property-sections">
      <!-- Basic Properties -->
      <div class="property-section">
        <h4 class="section-title">Basic Properties</h4>

        <div class="property-item">
          <label class="property-label">Field Label</label>
          <input
            :value="selectedField.label"
            @input="updateFieldProperty('label', $event.target.value)"
            class="property-input"
            placeholder="Enter field label..."
          />
        </div>

        <div
          v-if="selectedField.placeholder !== undefined"
          class="property-item"
        >
          <label class="property-label">Placeholder Text</label>
          <input
            :value="selectedField.placeholder"
            @input="updateFieldProperty('placeholder', $event.target.value)"
            class="property-input"
            placeholder="Enter placeholder text..."
          />
        </div>

        <div class="property-item">
          <label class="property-checkbox">
            <input
              type="checkbox"
              :checked="selectedField.required"
              @change="updateFieldProperty('required', $event.target.checked)"
              :disabled="isFieldDisabled('required')"
            />
            <span class="checkbox-custom">
              <i class="pi pi-check"></i>
            </span>
            <span class="checkbox-label">Required field</span>
          </label>
        </div>
      </div>

      <!-- Advanced Properties -->
      <div v-if="selectedField.type === 'textarea'" class="property-section">
        <h4 class="section-title">Textarea Settings</h4>
        <div class="property-item">
          <label class="property-label">Number of Rows</label>
          <input
            type="number"
            :value="selectedField.rows"
            @input="updateFieldProperty('rows', parseInt($event.target.value))"
            class="property-input"
            min="2"
            max="10"
          />
        </div>
      </div>

      <!-- Options Management (only for select, radio, checkbox) -->
      <div
        v-if="['select', 'radio', 'checkbox'].includes(selectedField.type)"
        class="property-section"
      >
        <h4 class="section-title">Options</h4>
        <div class="options-manager">
          <div
            v-for="(option, index) in selectedField.options"
            :key="index"
            class="option-editor"
          >
            <input
              :value="option"
              @input="updateOptionValue(index, $event.target.value)"
              class="option-input"
              placeholder="Option text..."
            />
            <button
              class="remove-option-btn"
              @click="removeOption(index)"
              title="Remove option"
            >
              <i class="pi pi-times"></i>
            </button>
          </div>
          <button class="add-option-btn" @click="addOption">
            <i class="pi pi-plus"></i>
            <span>Add Option</span>
          </button>
        </div>
      </div>

      <!-- CTA Button Properties -->
      <div v-if="selectedField.type === 'cta'" class="property-section">
        <h4 class="section-title">Button Properties</h4>
        <div class="property-item">
          <label class="property-label">Submit Button Text</label>
          <input
            :value="selectedField.buttonText || 'Submit'"
            @input="updateFieldProperty('buttonText', $event.target.value)"
            class="property-input"
            placeholder="Enter submit button text..."
          />
        </div>
        <div class="property-item">
          <label class="property-label"
            >Next Button Text (For Multi-step Forms)</label
          >
          <input
            :value="selectedField.nextButtonText || 'Next'"
            @input="updateFieldProperty('nextButtonText', $event.target.value)"
            class="property-input"
            placeholder="Enter next button text..."
          />
        </div>
      </div>

      <!-- Agreement Checkbox Properties -->
      <div v-if="selectedField.type === 'agree'" class="property-section">
        <h4 class="section-title">Agreement Settings</h4>
        <div class="property-item">
          <label class="property-label">Agreement Text</label>
          <textarea
            :value="selectedField.text"
            @input="updateFieldProperty('text', $event.target.value)"
            class="property-input"
            rows="3"
            placeholder="I agree to the terms and conditions..."
          ></textarea>
          <small class="field-hint"
            >You can include HTML links in the text</small
          >
        </div>
        <div class="property-item">
          <label class="property-checkbox">
            <input
              type="checkbox"
              :checked="selectedField.checked"
              @change="updateFieldProperty('checked', $event.target.checked)"
            />
            <span class="checkbox-custom">
              <i class="pi pi-check"></i>
            </span>
            <span class="checkbox-label">Default checked state</span>
          </label>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* Property Panel */
.property-panel {
  width: 320px;
  background: rgb(var(--v-theme-surface));
  border-left: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
  display: flex;
  flex-direction: column;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.05);
}

.property-header {
  padding: 20px;
  border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
  background: rgba(var(--v-theme-on-surface), 0.02);
}

.property-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 700;
  color: rgb(var(--v-theme-on-surface));
}

.property-title i {
  color: rgb(var(--v-theme-primary));
}

.field-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgb(var(--v-theme-primary));
  color: rgb(var(--v-theme-on-primary));
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.field-type-badge.default-badge {
  background: rgba(var(--v-theme-warning), 0.1);
  color: rgb(var(--v-theme-warning));
  border: 1px solid rgba(var(--v-theme-warning), 0.3);
}

.default-indicator {
  font-size: 12px;
  opacity: 0.9;
}

.property-sections {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

.property-section {
  margin-bottom: 32px;
}

.section-title {
  font-size: 14px;
  font-weight: 700;
  color: rgba(var(--v-theme-on-surface), 0.5);
  margin: 0 0 16px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.property-item {
  margin-bottom: 20px;
}

.property-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: rgb(var(--v-theme-on-surface));
  margin-bottom: 8px;
}

.property-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.2s ease;
  font-family: inherit;
  background: rgb(var(--v-theme-background));
  color: rgb(var(--v-theme-on-surface));
}

.property-input:focus {
  outline: none;
  border-color: rgb(var(--v-theme-primary));
  background: rgb(var(--v-theme-surface));
  box-shadow: 0 0 0 3px rgba(var(--v-theme-primary), 0.05);
}

.property-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(var(--v-theme-on-surface), 0.05);
}

.field-hint {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: rgba(var(--v-theme-on-surface), 0.5);
  line-height: 1.4;
}

/* Custom Checkbox */
.property-checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-weight: 500 !important;
}

.property-checkbox input[type="checkbox"] {
  display: none;
}

.checkbox-custom {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(var(--v-border-color), var(--v-border-opacity));
  border-radius: 4px;
  background: rgb(var(--v-theme-surface));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.property-checkbox input[type="checkbox"]:checked + .checkbox-custom {
  background: rgb(var(--v-theme-primary));
  border-color: rgb(var(--v-theme-primary));
  color: rgb(var(--v-theme-on-primary));
}

.property-checkbox input[type="checkbox"]:disabled + .checkbox-custom {
  opacity: 0.5;
}

.checkbox-label {
  font-weight: 500;
  color: rgb(var(--v-theme-on-surface));
}

/* Options Manager */
.options-manager {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.option-editor {
  display: flex;
  gap: 8px;
  align-items: center;
}

.option-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
  border-radius: 6px;
  font-size: 14px;
  background: rgb(var(--v-theme-background));
  color: rgb(var(--v-theme-on-surface));
}

.remove-option-btn {
  width: 32px;
  height: 32px;
  background: rgba(var(--v-theme-error), 0.1);
  border: 1px solid rgb(var(--v-theme-error));
  border-radius: 6px;
  color: rgb(var(--v-theme-error));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.remove-option-btn:hover {
  background: rgba(var(--v-theme-error), 0.2);
}

.add-option-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: rgba(var(--v-theme-on-surface), 0.02);
  border: 2px dashed rgba(var(--v-border-color), var(--v-border-opacity));
  border-radius: 8px;
  color: rgba(var(--v-theme-on-surface), 0.5);
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
}

.add-option-btn:hover {
  border-color: rgb(var(--v-theme-primary));
  color: rgb(var(--v-theme-primary));
  background: rgba(var(--v-theme-primary), 0.05);
}
</style>
