<template>
  <v-dialog
    :model-value="modelValue"
    @update:model-value="$emit('update:model-value', $event)"
    max-width="600"
    persistent
    scrollable
  >
    <v-card class="registration-success-card">
      <v-card-title class="d-flex align-center pa-6 bg-success">
        <v-icon class="mr-3 text-white" size="32">mdi-check-circle</v-icon>
        <h2 class="text-h5 text-white font-weight-bold flex-grow-1">
          Registration Successful!
        </h2>
      </v-card-title>

      <v-card-text class="pa-6">
        <!-- Success Message -->
        <div class="text-center mb-6">
          <v-avatar size="80" class="mb-4" color="success">
            <v-icon size="48" color="white">mdi-account-check</v-icon>
          </v-avatar>
          
          <h3 class="text-h6 mb-3">
            Welcome to MonacoUSA Association!
          </h3>
          
          <p class="text-body-1 mb-2">
            Your membership application has been submitted successfully.
          </p>
          
          <v-chip
            v-if="memberData?.memberId"
            color="success"
            variant="outlined"
            size="small"
            class="ma-1"
          >
            <v-icon start size="14">mdi-identifier</v-icon>
            Member ID: {{ memberData.memberId }}
          </v-chip>
        </div>

        <v-divider class="mb-6" />

        <!-- Next Steps -->
        <div class="mb-6">
          <h4 class="text-h6 mb-3 d-flex align-center">
            <v-icon class="mr-2" color="primary">mdi-format-list-checks</v-icon>
            Next Steps
          </h4>
          
          <v-timeline density="compact" side="end">
            <v-timeline-item
              dot-color="success"
              size="small"
              icon="mdi-check"
            >
              <template #opposite>
                <strong class="text-body-2">Step 1</strong>
              </template>
              <div class="mb-2">
                <strong class="text-body-2">Registration Complete</strong>
                <p class="text-body-2 text-medium-emphasis mb-0">
                  Your account has been created in our system.
                </p>
              </div>
            </v-timeline-item>

            <v-timeline-item
              dot-color="warning"
              size="small"
              icon="mdi-email"
            >
              <template #opposite>
                <strong class="text-body-2">Step 2</strong>
              </template>
              <div class="mb-2">
                <strong class="text-body-2">Check Your Email</strong>
                <p class="text-body-2 text-medium-emphasis mb-0">
                  We've sent a verification email to <strong>{{ memberData?.email }}</strong>.
                  Click the link in the email to verify your account and set your password.
                </p>
              </div>
            </v-timeline-item>

            <v-timeline-item
              dot-color="info"
              size="small"
              icon="mdi-bank"
            >
              <template #opposite>
                <strong class="text-body-2">Step 3</strong>
              </template>
              <div class="mb-2">
                <strong class="text-body-2">Pay Membership Dues</strong>
                <p class="text-body-2 text-medium-emphasis mb-0">
                  Transfer your annual membership dues using the banking details below.
                </p>
              </div>
            </v-timeline-item>

            <v-timeline-item
              dot-color="success"
              size="small"
              icon="mdi-account-check"
            >
              <template #opposite>
                <strong class="text-body-2">Step 4</strong>
              </template>
              <div>
                <strong class="text-body-2">Account Activation</strong>
                <p class="text-body-2 text-medium-emphasis mb-0">
                  Once payment is verified, your account will be activated and you can access the member portal.
                </p>
              </div>
            </v-timeline-item>
          </v-timeline>
        </div>

        <v-divider class="mb-6" />

        <!-- Payment Information -->
        <div class="payment-info mb-6">
          <h4 class="text-h6 mb-3 d-flex align-center">
            <v-icon class="mr-2" color="primary">mdi-bank</v-icon>
            Payment Instructions
          </h4>
          
          <v-card variant="outlined" class="pa-4" color="primary-lighten-5">
            <v-row dense>
              <v-col cols="12" sm="4">
                <span class="text-body-2 font-weight-bold">Amount:</span>
              </v-col>
              <v-col cols="12" sm="8">
                <span class="text-body-1 font-weight-bold">€{{ paymentInfo?.membershipFee || '50' }}/year</span>
              </v-col>
            </v-row>
            
            <v-row dense v-if="paymentInfo?.iban" class="mb-2">
              <v-col cols="12" sm="4">
                <span class="text-body-2 font-weight-bold">IBAN:</span>
              </v-col>
              <v-col cols="12" sm="8">
                <div class="d-flex align-center">
                  <span class="text-body-2 font-family-monospace mr-2">{{ paymentInfo.iban }}</span>
                  <v-btn
                    icon="mdi-content-copy"
                    size="x-small"
                    variant="text"
                    @click="copyToClipboard(paymentInfo.iban)"
                    :title="'Copy IBAN'"
                  />
                </div>
              </v-col>
            </v-row>
            
            <v-row dense v-if="paymentInfo?.accountHolder">
              <v-col cols="12" sm="4">
                <span class="text-body-2 font-weight-bold">Account:</span>
              </v-col>
              <v-col cols="12" sm="8">
                <span class="text-body-2">{{ paymentInfo.accountHolder }}</span>
              </v-col>
            </v-row>

            <v-row dense>
              <v-col cols="12" sm="4">
                <span class="text-body-2 font-weight-bold">Reference:</span>
              </v-col>
              <v-col cols="12" sm="8">
                <span class="text-body-2">Member {{ memberData?.memberId || 'Registration' }}</span>
              </v-col>
            </v-row>
          </v-card>
        </div>

        <!-- Important Notes -->
        <v-alert
          type="info"
          variant="tonal"
          class="mb-4"
        >
          <template #title>Important Notes</template>
          <ul class="text-body-2 ml-4">
            <li>Check your spam folder if you don't receive the verification email within 10 minutes</li>
            <li>Your membership will be activated within 2-3 business days after payment verification</li>
            <li>Contact our administrators if you need assistance with the verification process</li>
          </ul>
        </v-alert>

        <!-- Copy Notification -->
        <v-snackbar
          v-model="showCopyNotification"
          timeout="2000"
          color="success"
          location="bottom"
        >
          IBAN copied to clipboard!
        </v-snackbar>
      </v-card-text>

      <v-card-actions class="pa-6 pt-0">
        <v-spacer />
        <v-btn
          variant="outlined"
          @click="closeDialog"
          class="mr-3"
        >
          Close
        </v-btn>
        <v-btn
          color="primary"
          @click="goToLogin"
        >
          <v-icon start>mdi-login</v-icon>
          Go to Login
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script setup lang="ts">
interface Props {
  modelValue: boolean;
  memberData?: {
    memberId: string;
    email: string;
  };
  paymentInfo?: {
    membershipFee: number;
    iban: string;
    accountHolder: string;
  };
}

interface Emits {
  (e: 'update:model-value', value: boolean): void;
  (e: 'go-to-login'): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const showCopyNotification = ref(false);

// Methods
const closeDialog = () => {
  emit('update:model-value', false);
};

const goToLogin = () => {
  emit('go-to-login');
  closeDialog();
};

const copyToClipboard = async (text: string) => {
  try {
    await navigator.clipboard.writeText(text);
    showCopyNotification.value = true;
  } catch (error) {
    console.error('Failed to copy to clipboard:', error);
    // Fallback for older browsers
    const textArea = document.createElement('textarea');
    textArea.value = text;
    document.body.appendChild(textArea);
    textArea.select();
    document.execCommand('copy');
    document.body.removeChild(textArea);
    showCopyNotification.value = true;
  }
};
</script>

<style scoped>
.registration-success-card {
  border-radius: 16px !important;
}

.bg-success {
  background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%) !important;
}

.payment-info .v-card {
  border-radius: 12px !important;
}

/* Timeline styling */
.v-timeline :deep(.v-timeline-item__body) {
  padding-bottom: 16px;
}

.v-timeline :deep(.v-timeline-item__opposite) {
  padding-inline-end: 16px;
}

/* Copy button styling */
.v-btn--size-x-small {
  min-width: 24px !important;
  width: 24px;
  height: 24px;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .v-card-title {
    padding: 16px !important;
  }
  
  .v-card-text {
    padding: 16px !important;
  }
  
  .v-card-actions {
    padding: 16px !important;
    padding-top: 0 !important;
  }
  
  .v-timeline :deep(.v-timeline-item__opposite) {
    display: none;
  }
}

/* Print styles (if user wants to print) */
@media print {
  .v-card-actions {
    display: none;
  }
  
  .payment-info .v-card {
    border: 2px solid #ddd !important;
  }
}
</style>
