<template>
  <div :class="['form-group mb-3', { 'has-error': error }]">
    <label v-if="label" :for="id" class="form-label d-flex align-items-center">
      {{ label }}
      <span v-if="required" class="text-danger ms-1">*</span>
    </label>
    
    <div 
      class="input-group-container"
      :class="[
        `variant-${variant}`,
        { 'is-premium': isPremium, 'is-invalid': error, 'is-disabled': disabled }
      ]"
    >
      <textarea
        :id="id"
        :name="id"
        :rows="rows"
        :class="['form-control-custom', textareaClass]"
        :placeholder="placeholder"
        :required="required"
        :disabled="disabled"
        :value="modelValue"
        @input="$emit('update:modelValue', $event.target.value)"
      ></textarea>
    </div>
    
    <div v-if="hint && !error" class="form-hint mt-1">{{ hint }}</div>
    <div v-if="error" class="form-error mt-1">{{ error }}</div>
  </div>
</template>

<script setup>
const props = defineProps({
  label:         { type: String, default: '' },
  id:            { type: String, required: true },
  modelValue:    { type: String, default: '' },
  placeholder:   { type: String, default: '' },
  required:      { type: Boolean, default: false },
  disabled:      { type: Boolean, default: false },
  rows:          { type: Number, default: 3 },
  error:         { type: String, default: '' },
  hint:          { type: String, default: '' },
  isPremium:     { type: Boolean, default: true },
  variant:       { type: String, default: 'default' },
  textareaClass: { type: String, default: '' },
})

defineEmits(['update:modelValue'])
</script>

<style scoped>
.form-group {
  width: 100%;
}

.form-label {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-primary, #1e1e1e);
}

.input-group-container {
  position: relative;
  transition: all 0.2s ease;
}

.form-control-custom {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
  border-radius: 12px;
  color: var(--text-primary, #1e1e1e);
  font-size: 1rem;
  transition: all 0.2s ease;
  resize: vertical;
}

:global(.dark-mode) .form-control-custom {
  background: var(--bg-secondary, #1a1c22);
}

.form-control-custom:focus {
  outline: none;
  border-color: var(--accent-color, #533dea);
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(83, 61, 234, 0.2));
}

/* Glass Variant */
.variant-glass .form-control-custom {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

:global(.dark-mode) .variant-glass .form-control-custom {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Premium Styles */
.is-premium .form-control-custom {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

:global(.dark-mode) .is-premium .form-control-custom {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

/* States */
.is-invalid .form-control-custom {
  border-color: #ef4444;
}

.is-disabled .form-control-custom {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-hint {
  font-size: 0.75rem;
  color: var(--text-muted, #a0a0a0);
}

.form-error {
  font-size: 0.75rem;
  color: #ef4444;
  font-weight: 500;
}
</style>
