<template>
  <div class="medical-payment-app">
    <!-- Header -->
    <v-container fluid class="pa-4">
      <v-row justify="center" class="mb-6">
        <v-col cols="12" md="8" lg="6">
          <div class="text-center mb-4">
            <div class="d-flex justify-center align-center flex-wrap mb-4">
              <!-- Logos -->
              <v-img
                src="/api/placeholder/80/80"
                width="80"
                height="80"
                class="ma-2"
                contain
              />
              <v-img
                src="/api/placeholder/80/80"
                width="80"
                height="80"
                class="ma-2"
                contain
              />
              <v-img
                src="/api/placeholder/80/80"
                width="80"
                height="80"
                class="ma-2"
                contain
              />
              <v-img
                src="/api/placeholder/80/80"
                width="80"
                height="80"
                class="ma-2"
                contain
              />
            </div>

            <h1 class="display-1 mb-2">
              <span class="text-orange">With Love </span>
              <span class="text-dark">We Serve</span>
            </h1>

            <p class="subtitle-1 text-grey-darken-1">
              Kami Menyediakan Layanan Medis yang Dapat Anda Percayai
            </p>
          </div>
        </v-col>
      </v-row>
    </v-container>

    <!-- Main Content -->
    <v-container>
      <v-row justify="center">
        <v-col cols="12" md="6" lg="7">
          <v-card class="payment-card mx-auto" rounded="xl">
            <!-- Step 1: Contact Info -->
            <div v-if="paymentStore.currentStep === 1">
    <v-card-text class="pa-4">
      <div class="mb-6">
        <v-img
          src="https://scontent.fcgk22-2.fna.fbcdn.net/v/t39.30808-6/481267190_3904366386504845_1409667601717073976_n.jpg?stp=dst-jpg_s960x960_tt6&_nc_cat=110&ccb=1-7&_nc_sid=cc71e4&_nc_ohc=1EijOtXRjUEQ7kNvwFf8ZY7&_nc_oc=Admd26Jbw1IeEOyHFjj4HiDEMtDA_PY83qxRWoy8hhdrfYe9yO6ZPv7pI4XJ79Vlb-I&_nc_zt=23&_nc_ht=scontent.fcgk22-2.fna&_nc_gid=tx2ZuC16d1ipgxGzCJ4SRw&oh=00_Afan6b2RW5WBSa9azzYS_sdYc781iAwqKv4dJjsC9MvAxw&oe=68C42CD8"
          height="200"
          class="rounded-lg"
          cover
        />
      </div>

      <h2 class="text-h5 mb-6 text-center font-weight-bold">Hubungi Kami</h2>

      <v-row>
        <v-col cols="12" sm="6">
          <v-btn
            block
            size="large"
            color="orange"
            variant="flat"
            rounded="xl"
            class="mb-4 text-no-wrap"
            prepend-icon="mdi-whatsapp"
          >
            +62 815-5560-6668
          </v-btn>
        </v-col>

        <v-col cols="12" sm="6">
          <v-btn
            block
            size="large"
            color="orange"
            variant="flat"
            rounded="xl"
            class="mb-4 text-no-wrap"
            prepend-icon="mdi-phone"
          >
            0341-362101
          </v-btn>
        </v-col>

        <v-col cols="12">
          <v-btn
            block
            size="large"
            color="orange"
            variant="flat"
            rounded="xl"
            class="mb-4 text-no-wrap"
            prepend-icon="mdi-instagram"
          >
            rssaifulanwar
          </v-btn>
        </v-col>

        <v-col cols="12">
          <v-btn
            block
            size="large"
            color="orange"
            variant="flat"
            rounded="xl"
            class="mb-4 text-no-wrap"
            prepend-icon="mdi-web"
          >
            rsusaifulanwar.jatimprov.go.id
          </v-btn>
        </v-col>
      </v-row>

      <div class="text-center mt-6">
        <v-btn
          color="primary"
          size="large"
          variant="flat"
          rounded="xl"
          @click="paymentStore.nextStep"
        >
          Lanjut ke Pembayaran
        </v-btn>
      </div>
    </v-card-text>
  </div>
            <!-- Step 2: QR Code Payment -->
            <div v-else-if="paymentStore.currentStep === 2">
              <v-card-text class="pa-8 text-center">
                <div class="mb-4">
                  <v-img
                    src="/api/placeholder/60/30"
                    width="60"
                    height="30"
                    class="mx-auto mb-2"
                    contain
                  />
                  <v-img
                    src="/api/placeholder/100/30"
                    width="100"
                    height="30"
                    class="mx-auto"
                    contain
                  />
                </div>

                <h2 class="text-h4 mb-6 font-weight-bold">PINDAI KODE QR</h2>

                <!-- QR Code -->
                <div class="qr-container mb-6">
                  <v-card
                    class="qr-code mx-auto"
                    width="280"
                    height="280"
                    elevation="0"
                  >
                    <div class="qr-pattern">
                      <!-- Simplified QR pattern -->
                      <svg viewBox="0 0 280 280" class="qr-svg">
                        <!-- Corner markers -->
                        <rect
                          x="10"
                          y="10"
                          width="60"
                          height="60"
                          fill="black"
                        />
                        <rect
                          x="20"
                          y="20"
                          width="40"
                          height="40"
                          fill="white"
                        />
                        <rect
                          x="30"
                          y="30"
                          width="20"
                          height="20"
                          fill="black"
                        />

                        <rect
                          x="210"
                          y="10"
                          width="60"
                          height="60"
                          fill="black"
                        />
                        <rect
                          x="220"
                          y="20"
                          width="40"
                          height="40"
                          fill="white"
                        />
                        <rect
                          x="230"
                          y="30"
                          width="20"
                          height="20"
                          fill="black"
                        />

                        <rect
                          x="10"
                          y="210"
                          width="60"
                          height="60"
                          fill="black"
                        />
                        <rect
                          x="20"
                          y="220"
                          width="40"
                          height="40"
                          fill="white"
                        />
                        <rect
                          x="30"
                          y="230"
                          width="20"
                          height="20"
                          fill="black"
                        />

                        <!-- Random data pattern -->
                        <g class="data-pattern">
                          <rect
                            x="90"
                            y="90"
                            width="10"
                            height="10"
                            fill="black"
                          />
                          <rect
                            x="110"
                            y="90"
                            width="10"
                            height="10"
                            fill="black"
                          />
                          <rect
                            x="130"
                            y="90"
                            width="10"
                            height="10"
                            fill="black"
                          />
                          <rect
                            x="90"
                            y="110"
                            width="10"
                            height="10"
                            fill="black"
                          />
                          <rect
                            x="130"
                            y="110"
                            width="10"
                            height="10"
                            fill="black"
                          />
                          <rect
                            x="150"
                            y="110"
                            width="10"
                            height="10"
                            fill="black"
                          />
                          <rect
                            x="170"
                            y="110"
                            width="10"
                            height="10"
                            fill="black"
                          />
                          <rect
                            x="90"
                            y="130"
                            width="10"
                            height="10"
                            fill="black"
                          />
                          <rect
                            x="110"
                            y="130"
                            width="10"
                            height="10"
                            fill="black"
                          />
                          <rect
                            x="150"
                            y="130"
                            width="10"
                            height="10"
                            fill="black"
                          />
                        </g>
                      </svg>
                    </div>
                    <div class="qr-label">
                      <small class="text-grey-darken-1">QRIS</small>
                    </div>
                  </v-card>
                </div>

                <!-- Payment Details -->
                <div class="payment-details">
                  <v-row dense class="mb-2">
                    <v-col cols="5" class="text-left">
                      <strong>NAMA PASIEN:</strong>
                    </v-col>
                    <v-col cols="7" class="text-left">
                      {{ paymentStore.patientInfo.name }}
                    </v-col>
                  </v-row>

                  <v-row dense class="mb-2">
                    <v-col cols="5" class="text-left">
                      <strong>NOMINAL:</strong>
                    </v-col>
                    <v-col cols="7" class="text-left">
                      {{ paymentStore.patientInfo.amount }}
                    </v-col>
                  </v-row>

                  <v-row dense class="mb-4">
                    <v-col cols="5" class="text-left">
                      <strong>BERLAKU SAMPAI:</strong>
                    </v-col>
                    <v-col cols="7" class="text-left text-red">
                      {{ paymentStore.patientInfo.expiry }}
                    </v-col>
                  </v-row>
                </div>

                <div class="d-flex gap-2 justify-center">
                  <v-btn
                    color="grey"
                    variant="outlined"
                    @click="paymentStore.prevStep"
                  >
                    Kembali
                  </v-btn>
                  <v-btn
                    color="primary"
                    variant="flat"
                    @click="paymentStore.nextStep"
                  >
                    Simulasi Pembayaran
                  </v-btn>
                </div>
              </v-card-text>
            </div>

            <!-- Step 3: Success -->
            <div v-else-if="paymentStore.currentStep === 3">
              <v-card-text class="pa-8 text-center">
                <div class="success-container">
                  <v-icon
                    icon="mdi-check-circle"
                    size="80"
                    color="orange"
                    class="mb-4"
                  />

                  <h2 class="text-h4 mb-4 font-weight-bold">
                    Pembayaran Berhasil
                  </h2>

                  <p class="text-h6 text-grey-darken-1 mb-6">
                    Silahkan Menunggu Bukti<br />Pembayaran
                  </p>

                  <v-btn
                    color="primary"
                    size="large"
                    variant="flat"
                    rounded="xl"
                    @click="paymentStore.reset"
                  >
                    Kembali ke Awal
                  </v-btn>
                </div>
              </v-card-text>
            </div>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script setup>
import { usePaymentStore } from "~/stores/payment";

const paymentStore = usePaymentStore();

// Auto advance simulation
onMounted(() => {
  // Simulate QR code scanning after 10 seconds on QR step
  const autoAdvance = () => {
    if (paymentStore.currentStep === 2) {
      setTimeout(() => {
        if (paymentStore.currentStep === 2) {
          paymentStore.nextStep();
        }
      }, 10000);
    }
  };

  watch(() => paymentStore.currentStep, autoAdvance, { immediate: true });
});
</script>

<style scoped>
.medical-payment-app {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

/* Step 1 - Modern Landing Page Styles */
.main-content {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 1rem;
}

.header-section {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.logo-item {
  transition: transform 0.3s ease;
}

.logo-item:hover {
  transform: scale(1.1);
}

.hero-section {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  padding-top: 100px;
}

.hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: #64748b;
  margin-bottom: 3rem;
  font-weight: 400;
}

.media-banner {
  margin-bottom: 3rem;
}

.banner-card {
  background: white;
  overflow: hidden;
}

.banner-content {
  padding: 1rem;
}

.banner-image {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 152, 0, 0.8) 0%,
    rgba(255, 193, 7, 0.8) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay-content {
  text-align: center;
  padding: 2rem;
}

.info-cards {
  margin-top: 1.5rem;
}

.info-card {
  transition: all 0.3s ease;
  height: 100%;
}

.info-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.cta-section {
  margin-bottom: 2rem;
}

.cta-button {
  padding: 1rem 3rem;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #ff9800 0%, #ff5722 100%);
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(255, 152, 0, 0.4);
}

.footer-section {
  background: white;
  border-top: 1px solid #e2e8f0;
  padding: 2rem 0;
  margin-top: auto;
}

.contact-footer {
  text-align: center;
}

.contact-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 2rem;
}

.contact-card {
  transition: all 0.3s ease;
  border: 2px solid transparent;
  height: 100%;
  min-height: 100px;
}

.contact-card .v-card-text {
  padding: 12px 8px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.contact-card:hover {
  border-color: #ff9800;
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(255, 152, 0, 0.2);
}

/* Step 2 & 3 - Payment and Success Styles */
.payment-card {
  background: white;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

.qr-container {
  padding: 20px;
  background: white;
  border-radius: 16px;
  display: inline-block;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.qr-code {
  position: relative;
  background: white;
  padding: 20px;
}

.qr-svg {
  width: 100%;
  height: 100%;
}

.qr-label {
  position: absolute;
  bottom: 5px;
  right: 10px;
  font-size: 10px;
  font-weight: bold;
}

.payment-details {
  max-width: 350px;
  margin: 0 auto;
}

.success-container {
  padding: 40px 20px;
}

.text-orange {
  color: #ff9800 !important;
}

.text-dark {
  color: #424242 !important;
}

/* Tablet Landscape Optimizations */
@media (orientation: landscape) and (min-width: 768px) {
  .medical-payment-app {
    height: 100vh;
    overflow-y: auto;
  }

  .content-wrapper {
    padding: 1rem;
    justify-content: flex-start;
  }

  .hero-section {
    padding-top: 80px;
  }

  .hero-title {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
  }

  .hero-subtitle {
    font-size: 1rem;
    margin-bottom: 2rem;
  }

  .media-banner {
    margin-bottom: 2rem;
  }

  .banner-content .v-img {
    height: 220px !important;
  }

  .footer-section {
    padding: 1.5rem 0;
  }

  .contact-title {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
  }

  .logo-container {
    gap: 1.5rem;
  }

  .logo-item .v-img {
    width: 50px !important;
    height: 50px !important;
  }

  /* Smaller QR code for landscape */
  .qr-code {
    width: 240px !important;
    height: 240px !important;
  }

  .payment-card {
    max-width: flex;
  }
}

/* Small tablet adjustments */
@media (max-width: 900px) and (orientation: landscape) {
  .hero-title {
    font-size: 2rem;
  }

  .banner-content .v-img {
    height: 180px !important;
  }

  .info-cards .v-col {
    padding: 4px;
  }

  .contact-footer .v-col {
    margin-bottom: 8px;
  }
}

/* Very small tablet landscape */
@media (max-width: 768px) and (orientation: landscape) {
  .hero-section {
    padding-top: 60px;
  }

  .logo-container {
    gap: 1rem;
  }

  .logo-item .v-img {
    width: 40px !important;
    height: 40px !important;
  }

  .banner-content .v-img {
    height: 150px !important;
  }

  .hero-title {
    font-size: 1.75rem;
  }

  .contact-footer .v-row .v-col {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
</style>
