<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useCouponStore } from '@/stores/coupon'
import { authService } from '@/services/authService'
import { getImageUrl } from '@/utils/imageUrl'

const router = useRouter()
const couponStore = useCouponStore()

const userName = ref(localStorage.getItem('user_name') || 'Usuario')
const userEmail = ref(localStorage.getItem('user_email') || '')
const userRole = ref(localStorage.getItem('user_role') || 'PASSENGER')
const userPhoto = ref(localStorage.getItem('profile_photo_url') || '')

const showQRModal = ref(false)
const showEditModal = ref(false)
const isUpdating = ref(false)
const selectedCode = ref('')
const selectedTitle = ref('')

// Edit Form
const editForm = ref({
  full_name: userName.value,
  password: '',
  profile_photo: null as File | null
})
const photoPreview = ref(userPhoto.value)

onMounted(async () => {
  await couponStore.loadMyCoupons()
  // Refresh user data from server to be sure
  try {
    const freshUser = await authService.getCurrentUser()
    userName.value = freshUser.full_name
    userEmail.value = freshUser.email
    userRole.value = freshUser.role
    userPhoto.value = freshUser.profile_photo_url || ''
    
    localStorage.setItem('user_name', freshUser.full_name)
    localStorage.setItem('profile_photo_url', freshUser.profile_photo_url || '')
    photoPreview.value = userPhoto.value
  } catch (e) {
    console.error('Failed to refresh user data', e)
  }
})

function handleLogout() {
  authService.logout()
  router.push('/login')
}

function showQR(code: string, title: string) {
  selectedCode.value = code
  selectedTitle.value = title
  showQRModal.value = true
}

function handlePhotoChange(e: Event) {
  const target = e.target as HTMLInputElement
  if (target.files && target.files[0]) {
    const file = target.files[0]
    editForm.value.profile_photo = file
    photoPreview.value = URL.createObjectURL(file)
  }
}

async function handleUpdateProfile() {
  isUpdating.value = true
  try {
    const formData = new FormData()
    formData.append('full_name', editForm.value.full_name)
    if (editForm.value.password) {
      formData.append('password', editForm.value.password)
    }
    if (editForm.value.profile_photo) {
      formData.append('profile_photo', editForm.value.profile_photo)
    }

    const updatedUser = await authService.updateMe(formData)
    
    // Update local state
    userName.value = updatedUser.full_name
    userPhoto.value = updatedUser.profile_photo_url || ''
    
    // Update localStorage
    localStorage.setItem('user_name', updatedUser.full_name)
    localStorage.setItem('profile_photo_url', updatedUser.profile_photo_url || '')
    
    showEditModal.value = false
    editForm.value.password = ''
    alert('Perfil actualizado correctamente')
  } catch (e: any) {
    alert('Error al actualizar: ' + (e.response?.data?.detail || e.message))
  } finally {
    isUpdating.value = false
  }
}

function getStatusLabel(status: string) {
  switch (status) {
    case 'claimed': return 'Pendiente'
    case 'redeemed': return 'Canjeado'
    case 'expired': return 'Vencido'
    default: return status
  }
}

const getFullUrl = (path: string) => getImageUrl(path)
</script>

<template>
  <div class="profile-view">
    <header class="profile-header">
      <div class="profile-info-card">
        <div class="avatar-container">
          <div v-if="userPhoto" class="avatar-img" :style="{ backgroundImage: `url(${getFullUrl(userPhoto)})` }"></div>
          <div v-else class="avatar-placeholder">
            <span class="material-icons">person</span>
          </div>
          <button class="edit-badge" @click="showEditModal = true">
            <span class="material-icons">edit</span>
          </button>
        </div>
        
        <div class="info">
          <h1>{{ userName }}</h1>
          <p>{{ userEmail }}</p>
          <div class="badge-row">
            <span class="role-badge">{{ userRole }}</span>
          </div>
        </div>
        
        <div class="header-actions">
           <button class="logout-icon-btn" @click="handleLogout" title="Cerrar Sesión">
            <span class="material-icons">logout</span>
          </button>
        </div>
      </div>
    </header>

    <section class="my-coupons-section">
      <div class="section-header">
        <h2>Mis Cupones</h2>
        <span class="count">{{ couponStore.myCoupons.length }}</span>
      </div>

      <div v-if="couponStore.myCoupons.length === 0" class="empty-coupons">
        <div class="empty-icon-circle">
          <span class="material-icons">confirmation_number</span>
        </div>
        <h3>No tienes cupones</h3>
        <p>Explora los beneficios que tenemos para ti por usar SIBU.</p>
        <button @click="router.push('/coupons')" class="btn-primary">Ver Ofertas</button>
      </div>

      <div v-else class="coupons-list">
        <div 
          v-for="userCoupon in couponStore.myCoupons" 
          :key="userCoupon.id" 
          :class="['user-coupon-card', userCoupon.status]"
        >
          <div class="coupon-main">
            <div class="coupon-details">
              <h3>{{ userCoupon.coupon?.title || 'Cupón' }}</h3>
              <p class="biz-name">{{ userCoupon.coupon?.business?.name || 'Comercio' }}</p>
              <div class="code-row">
                <span class="code">{{ userCoupon.redemption_code }}</span>
                <span :class="['status-tag', userCoupon.status]">{{ getStatusLabel(userCoupon.status) }}</span>
              </div>
            </div>
            <button 
              v-if="userCoupon.status === 'claimed'" 
              class="btn-use"
              @click="showQR(userCoupon.redemption_code, userCoupon.coupon?.title || '')"
            >
              <span class="material-icons">qr_code_2</span>
              Ver Código
            </button>
          </div>
          <div class="coupon-footer">
             <span v-if="userCoupon.status === 'redeemed'">Usado el: {{ new Date(userCoupon.redeemed_at).toLocaleDateString() }}</span>
             <span v-else>Reclamado el: {{ new Date(userCoupon.claimed_at).toLocaleDateString() }}</span>
          </div>
        </div>
      </div>
    </section>

    <!-- Edit Profile Modal -->
    <div v-if="showEditModal" class="modal-overlay" @click.self="showEditModal = false">
      <div class="edit-modal">
        <div class="modal-header">
          <h2>Editar Perfil</h2>
          <button class="close-btn" @click="showEditModal = false">
            <span class="material-icons">close</span>
          </button>
        </div>

        <form @submit.prevent="handleUpdateProfile" class="edit-form">
          <div class="photo-upload-section">
            <div class="photo-preview-container">
              <div v-if="photoPreview" class="preview-img" :style="{ backgroundImage: `url(${getFullUrl(photoPreview)})` }"></div>
              <div v-else class="preview-placeholder">
                <span class="material-icons">person</span>
              </div>
              <label for="photo-input" class="photo-label">
                <span class="material-icons">photo_camera</span>
              </label>
            </div>
            <input id="photo-input" type="file" @change="handlePhotoChange" accept="image/*" hidden>
            <p class="upload-hint">Foto opcional</p>
          </div>

          <div class="form-group">
            <label>Nombre Completo</label>
            <input v-model="editForm.full_name" type="text" placeholder="Tu nombre" required>
          </div>

          <div class="form-group">
            <label>Nueva Contraseña (Opcional)</label>
            <input v-model="editForm.password" type="password" placeholder="Mínimo 6 caracteres">
            <p class="field-hint">Déjalo en blanco si no quieres cambiarla.</p>
          </div>

          <div class="modal-actions">
            <button type="button" class="btn-cancel" @click="showEditModal = false">Cancelar</button>
            <button type="submit" class="btn-save" :disabled="isUpdating">
              <span v-if="isUpdating" class="material-icons spin">refresh</span>
              {{ isUpdating ? 'Guardando...' : 'Guardar Cambios' }}
            </button>
          </div>
        </form>
      </div>
    </div>

    <!-- QR Modal -->
    <div v-if="showQRModal" class="modal-overlay" @click.self="showQRModal = false">
      <div class="qr-modal">
        <button class="close-modal" @click="showQRModal = false">
          <span class="material-icons">close</span>
        </button>
        <div class="qr-header">
           <span class="material-icons">verified</span>
           <h3>Cupón de Descuento</h3>
        </div>
        <p class="promo-title">{{ selectedTitle }}</p>
        
        <div class="qr-content">
           <div class="qr-placeholder">
             <span class="material-icons">qr_code_2</span>
           </div>
           <div class="redemption-box">
             <p>CÓDIGO DE REDENCIÓN</p>
             <code class="big-code">{{ selectedCode }}</code>
           </div>
        </div>
        
        <p class="qr-instructions">Muestra este código al encargado del establecimiento para validar tu promoción.</p>
        
        <button class="btn-done" @click="showQRModal = false">Entendido</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.profile-view {
  padding: 1.5rem;
  background: var(--bg-primary);
  min-height: 100%;
}

.profile-header {
  margin-bottom: 2rem;
}

.profile-info-card {
  background: var(--card-bg);
  border-radius: 28px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  box-shadow: 0 10px 30px var(--shadow);
  border: 1px solid var(--border-color);
  position: relative;
  overflow: hidden;
}

.avatar-container {
  position: relative;
}

.avatar-img, .avatar-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 24px;
  background-size: cover;
  background-position: center;
  border: 3px solid var(--header-bg);
}

.avatar-placeholder {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-placeholder .material-icons {
  font-size: 3rem;
}

.edit-badge {
  position: absolute;
  bottom: -5px;
  right: -5px;
  background: var(--text-primary);
  color: var(--bg-primary);
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.edit-badge .material-icons { font-size: 1rem; }

.info h1 { font-size: 1.4rem; margin-bottom: 2px; }
.info p { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 8px; }

.role-badge {
  background: var(--active-bg);
  color: var(--active-color);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.header-actions {
  margin-left: auto;
}

.logout-icon-btn {
  background: #ffebf0;
  color: #d32f2f;
  border: none;
  border-radius: 12px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.logout-icon-btn:hover { background: #d32f2f; color: white; }

.section-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.section-header h2 { font-size: 1.25rem; }

.section-header .count {
  background: var(--text-primary);
  color: var(--bg-primary);
  padding: 2px 10px;
  border-radius: 20px;
  font-weight: 800;
  font-size: 0.8rem;
}

.empty-coupons {
  padding: 4rem 2rem;
  text-align: center;
  background: var(--card-bg);
  border-radius: 24px;
  border: 2px dashed var(--border-color);
}

.empty-icon-circle {
  width: 70px;
  height: 70px;
  background: var(--bg-secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  color: var(--text-secondary);
}

.empty-icon-circle .material-icons { font-size: 2.5rem; }

.btn-primary {
  margin-top: 1.5rem;
  background: var(--text-primary);
  color: var(--bg-primary);
  border: none;
  padding: 12px 24px;
  border-radius: 16px;
  font-weight: 700;
  cursor: pointer;
}

.coupons-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.user-coupon-card {
  background: var(--card-bg);
  border-radius: 20px;
  border: 1px solid var(--border-color);
  overflow: hidden;
  box-shadow: 0 4px 15px var(--shadow);
  transition: transform 0.2s;
}

.user-coupon-card:hover { transform: scale(1.02); }

.coupon-main {
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.coupon-details h3 { font-size: 1.1rem; margin-bottom: 4px; }
.biz-name { font-size: 0.9rem; color: var(--active-color); font-weight: 700; }

.code-row {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.code {
  font-family: 'Courier New', Courier, monospace;
  background: var(--bg-secondary);
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 1rem;
  border: 1px dashed var(--border-color);
}

.status-tag {
  font-size: 0.7rem;
  padding: 4px 10px;
  border-radius: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.status-tag.claimed { background: #e3f2fd; color: #1976d2; }
.status-tag.redeemed { background: #e8f5e9; color: #2e7d32; opacity: 0.7; }

.btn-use {
  background: var(--header-bg);
  color: var(--header-text);
  border: none;
  padding: 12px 18px;
  border-radius: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.coupon-footer {
  padding: 10px 1.5rem;
  background: var(--bg-secondary);
  font-size: 0.8rem;
  color: var(--text-secondary);
  border-top: 1px solid var(--border-color);
  font-weight: 600;
}

/* Modal Base */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 1.5rem;
}

/* Edit Modal */
.edit-modal {
  background: var(--card-bg);
  width: 100%;
  max-width: 450px;
  border-radius: 32px;
  padding: 2rem;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.close-btn, .close-modal {
  background: var(--bg-secondary);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.photo-upload-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2rem;
}

.photo-preview-container {
  position: relative;
  margin-bottom: 1rem;
}

.preview-img, .preview-placeholder {
  width: 100px;
  height: 100px;
  border-radius: 30px;
  background-size: cover;
  background-position: center;
  border: 4px solid var(--header-bg);
}

.preview-placeholder {
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-placeholder .material-icons { font-size: 4rem; color: var(--text-secondary); }

.photo-label {
  position: absolute;
  bottom: -5px;
  right: -5px;
  background: var(--active-color);
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
}

.form-group input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 1rem;
}

.field-hint, .upload-hint {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

.btn-save {
  flex: 2;
  background: var(--text-primary);
  color: var(--bg-primary);
  border: none;
  padding: 14px;
  border-radius: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-cancel {
  flex: 1;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: none;
  padding: 14px;
  border-radius: 16px;
  font-weight: 700;
  cursor: pointer;
}

/* QR Modal Enhanced */
.qr-modal {
  background: var(--card-bg);
  width: 100%;
  max-width: 400px;
  border-radius: 40px;
  padding: 2.5rem;
  text-align: center;
  position: relative;
}

.qr-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 1rem;
}

.qr-header .material-icons { color: #4caf50; font-size: 3rem; }
.qr-header h3 { font-size: 1.5rem; }

.promo-title {
  color: var(--active-color);
  font-weight: 800;
  margin-bottom: 2rem;
  font-size: 1.1rem;
}

.qr-content {
  background: #f8f9fa;
  padding: 2rem;
  border-radius: 30px;
  margin-bottom: 2rem;
  border: 1px solid #eee;
}

.qr-placeholder {
  width: 120px;
  height: 120px;
  background: white;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
}

.qr-placeholder .material-icons { font-size: 6rem; color: #222; }

.redemption-box p { font-size: 0.7rem; font-weight: 800; color: #888; letter-spacing: 1px; margin-bottom: 4px; }

.big-code {
  font-size: 1.8rem;
  font-weight: 900;
  color: #111;
  letter-spacing: 3px;
}

.qr-instructions {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

.btn-done {
  width: 100%;
  padding: 16px;
  border-radius: 20px;
  background: var(--text-primary);
  color: var(--bg-primary);
  border: none;
  font-weight: 800;
  cursor: pointer;
}

.spin { animation: spin 1s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }
</style>
