<script setup>
import { ref, computed } from "vue";
import {
  CalendarCheck,
  Camera,
  Check,
  CheckCircle2,
  CreditCard,
  FileText,
  Headset,
  HelpCircle,
  IdCard,
  MessageCircle,
  Minus,
  Plus,
  Shield,
  ShieldAlert,
  XCircle,
} from "lucide-vue-next";

const props = defineProps({
  extraBlocks: {
    type: Object,
    required: true,
  },
});

const extraBlocks = computed(() => props.extraBlocks || {});
const labels = computed(() => ({
  selectClass: props.extraBlocks?.calculator?.selectClassLabel || '1. Select Class',
  duration: props.extraBlocks?.calculator?.durationLabel || '2. Duration',
  options: props.extraBlocks?.calculator?.optionsLabel || '3. Options',
  carRental: props.extraBlocks?.calculator?.carRentalLabel || 'Car Rental',
  fullInsurance: props.extraBlocks?.calculator?.fullInsuranceLabel || 'Full Insurance',
  airportDelivery: props.extraBlocks?.calculator?.airportDeliveryLabel || 'Airport Delivery',
  estimatedTotal: props.extraBlocks?.calculator?.estimatedTotalLabel || 'Estimated Total:',
  day: props.extraBlocks?.calculator?.dayLabel || 'day',
  days: props.extraBlocks?.calculator?.daysLabel || 'days',
  feature: props.extraBlocks?.taxiComparison?.featureLabel || 'Feature',
  rentalCar: props.extraBlocks?.taxiComparison?.rentalCarLabel || 'Rental Car',
  taxi: props.extraBlocks?.taxiComparison?.taxiLabel || 'Yandex / Bolt Taxi',
  privateDriver: props.extraBlocks?.taxiComparison?.privateDriverLabel || 'Private Driver',
}));
const calculatorDefaults = props.extraBlocks?.calculator?.defaults || {};
const carType = ref(calculatorDefaults.carType || "suv");
const days = ref(Number(calculatorDefaults.days || 5));
const addons = ref({
  insurance: Boolean(calculatorDefaults.insurance),
  airport: Boolean(calculatorDefaults.airport),
});

const basePrices = computed(() => {
  const entries = props.extraBlocks?.calculator?.classes || [];
  return Object.fromEntries(entries.map((entry) => [entry.id, entry.price]));
});

const currentBasePrice = computed(() =>
  Number(basePrices.value[carType.value] || 0),
);
const estCarCost = computed(
  () => currentBasePrice.value * Number(days.value || 0),
);
const estInsurance = computed(() =>
  addons.value.insurance ? 15 * Number(days.value || 0) : 0,
);
const estAirport = computed(() => (addons.value.airport ? 20 : 0));
const total = computed(
  () => estCarCost.value + estInsurance.value + estAirport.value,
);

function toggleAddon(key) {
  addons.value = {
    ...addons.value,
    [key]: !addons.value[key],
  };
}

const comparisonIcons = {
  helpCircle: HelpCircle,
  creditCard: CreditCard,
  headset: Headset,
  camera: Camera,
  shield: Shield,
  messageCircle: MessageCircle,
};
</script>

<template>
  <div class="space-y-24 mb-24 mt-24">
    <section>
      <div
        class="inline-flex items-center gap-2 px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-xs font-bold uppercase tracking-wider mb-6"
      >
        <ShieldAlert class="w-4 h-4" />
        {{ extraBlocks.compare.badge }}
      </div>
      <h2
        class="text-3xl md:text-5xl font-display font-bold text-slate-900 mb-6"
      >
        {{ extraBlocks.compare.title }}
      </h2>
      <p class="text-slate-600 mb-12 text-lg max-w-2xl">
        {{ extraBlocks.compare.description }}
      </p>

      <div class="flex flex-col xl:flex-row gap-8 xl:gap-12 items-stretch">
        <div class="flex-1 w-full grid md:grid-cols-2 gap-6 lg:gap-8">
          <div
            class="bg-slate-50/70 p-6 sm:p-8 rounded-[2rem] border border-slate-200 opacity-80 hover:opacity-100 transition-opacity self-start mt-4"
          >
            <h3
              class="text-lg font-bold text-slate-500 mb-8 flex items-center gap-2"
            >
              <XCircle class="w-5 h-5 flex-shrink-0" />
              {{ extraBlocks.compare.aggregatorTitle }}
            </h3>
            <ul class="space-y-6">
              <li
                v-for="item in extraBlocks.compare.aggregatorItems"
                :key="item.title"
                class="flex gap-4"
              >
                <span
                  v-if="item.prefix"
                  class="text-slate-400 font-bold shrink-0 w-12 pt-0.5"
                  >{{ item.prefix }}</span
                >
                <div
                  v-else-if="item.prefixIcon"
                  class="shrink-0 w-12 pt-0.5 opacity-50"
                >
                  <component
                    :is="comparisonIcons[item.prefixIcon] || HelpCircle"
                    class="w-6 h-6 text-slate-600"
                  />
                </div>
                <div>
                  <div class="text-sm font-bold text-slate-800 mb-1">
                    {{ item.title }}
                  </div>
                  <div class="text-xs text-slate-500 leading-relaxed">
                    {{ item.text }}
                  </div>
                </div>
              </li>
            </ul>
          </div>

          <div
            class="bg-white p-6 sm:p-8 rounded-[2rem] border-2 border-brand-orange shadow-[0_8px_40px_rgb(255,95,0,0.12)] relative z-10 transform md:-translate-y-2 shadow-brand-orange/10"
          >
            <div
              class="absolute -top-4 left-6 bg-brand-orange text-white text-[10px] sm:text-xs font-bold uppercase tracking-widest px-4 py-1.5 rounded-full shadow-lg shadow-brand-orange/30"
            >
              {{ extraBlocks.compare.recommendedLabel }}
            </div>
            <div
              class="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_right,rgba(255,95,0,0.05),transparent_60%)] pointer-events-none rounded-[2rem]"
            />
            <h3
              class="text-2xl font-bold text-slate-900 mb-8 flex items-center gap-2 mt-2 relative z-10"
            >
              <CheckCircle2 class="w-6 h-6 text-brand-orange" />
              {{ extraBlocks.compare.directTitle }}
            </h3>
            <ul class="space-y-6 relative z-10">
              <li
                v-for="item in extraBlocks.compare.directItems"
                :key="item.title"
                class="flex gap-4"
              >
                <span
                  v-if="item.prefix"
                  class="text-brand-orange font-bold shrink-0 w-12 pt-0.5"
                  >{{ item.prefix }}</span
                >
                <div v-else-if="item.prefixIcon" class="shrink-0 w-12 pt-0.5">
                  <component
                    :is="comparisonIcons[item.prefixIcon] || CheckCircle2"
                    class="w-6 h-6 text-brand-orange"
                  />
                </div>
                <div>
                  <div class="text-sm font-bold text-slate-900 mb-1">
                    {{ item.title }}
                  </div>
                  <div class="text-xs text-slate-600 leading-relaxed">
                    {{ item.text }}
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>

        <div class="w-full lg:w-[420px] shrink-0">
          <div
            class="bg-slate-900 rounded-[2rem] p-8 shadow-2xl text-white relative overflow-hidden"
          >
            <div
              class="absolute top-0 right-0 w-40 h-40 bg-brand-orange/20 rounded-bl-full pointer-events-none blur-2xl"
            />
            <h3 class="text-xl font-display font-bold mb-6">
              {{ extraBlocks.calculator.title }}
            </h3>

            <div class="space-y-6 mb-8 relative z-10">
              <div>
                <div
                  class="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-3"
                >
                  1. Select Class
                </div>
                <div class="grid grid-cols-3 gap-2">
                  <button
                    v-for="type in extraBlocks.calculator.classes"
                    :key="type.id"
                    type="button"
                    :class="[
                      'py-3 px-2 rounded-xl text-center border transition-all',
                      carType === type.id
                        ? 'bg-brand-orange border-brand-orange text-white'
                        : 'bg-slate-800 border-slate-700 text-slate-300 hover:border-slate-500',
                    ]"
                    @click="carType = type.id"
                  >
                    <div class="text-[11px] font-bold mb-1">
                      {{ type.label }}
                    </div>
                    <div
                      :class="
                        carType === type.id
                          ? 'text-white/80 text-xs'
                          : 'text-slate-500 text-xs'
                      "
                    >
                      ~${{ type.price }}/d
                    </div>
                  </button>
                </div>
              </div>

              <div>
                <div class="flex justify-between items-center mb-3">
                  <div
                    class="text-[10px] font-bold text-slate-400 uppercase tracking-wider"
                  >
                    {{ labels.duration }}
                  </div>
                  <div class="text-sm font-bold text-brand-orange">
                    {{ days }} {{ Number(days) === 1 ? labels.day : labels.days }}
                  </div>
                </div>
                <div class="flex items-center gap-4">
                  <button
                    type="button"
                    class="w-8 h-8 rounded-full bg-slate-800 flex items-center justify-center text-slate-400 hover:text-white hover:bg-slate-700 transition-colors shrink-0"
                    @click="days = Math.max(1, days - 1)"
                  >
                    <Minus class="w-4 h-4" />
                  </button>
                  <input
                    v-model="days"
                    type="range"
                    min="1"
                    max="21"
                    class="w-full accent-brand-orange"
                  />
                  <button
                    type="button"
                    class="w-8 h-8 rounded-full bg-slate-800 flex items-center justify-center text-slate-400 hover:text-white hover:bg-slate-700 transition-colors shrink-0"
                    @click="days = Math.min(30, days + 1)"
                  >
                    <Plus class="w-4 h-4" />
                  </button>
                </div>
              </div>

              <div>
                <div
                  class="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-3"
                >
                  {{ labels.options }}
                </div>
                <div class="space-y-2">
                  <button
                    v-for="addon in extraBlocks.calculator.addOns"
                    :key="addon.id"
                    type="button"
                    :class="[
                      'w-full flex items-center justify-between p-3 rounded-xl border transition-colors',
                      addons[addon.id]
                        ? 'bg-slate-800 border-slate-600'
                        : 'bg-slate-800/50 border-slate-700/50 hover:bg-slate-800',
                    ]"
                    @click="toggleAddon(addon.id)"
                  >
                    <div class="flex items-center gap-3">
                      <div
                        :class="[
                          'w-5 h-5 rounded flex items-center justify-center transition-colors',
                          addons[addon.id] ? 'bg-brand-orange' : 'bg-slate-700',
                        ]"
                      >
                        <Check
                          v-if="addons[addon.id]"
                          class="w-3 h-3 text-white"
                        />
                      </div>
                      <div class="text-sm text-slate-300 font-medium">
                        {{ addon.label }}
                      </div>
                    </div>
                    <div class="text-xs text-slate-500">
                      {{ addon.priceLabel }}
                    </div>
                  </button>
                </div>
              </div>
            </div>

            <div class="bg-slate-800 rounded-2xl p-5 space-y-3 relative z-10">
              <div class="flex justify-between text-sm text-slate-400">
                <span
                  >{{ labels.carRental }} ({{ days }}
                  {{ Number(days) === 1 ? labels.day : labels.days }})</span
                >
                <span class="font-bold text-slate-200">${{ estCarCost }}</span>
              </div>
              <div
                v-if="addons.insurance"
                class="flex justify-between text-sm text-slate-400"
              >
                <span>{{ labels.fullInsurance }}</span>
                <span class="font-bold text-slate-200"
                  >${{ estInsurance }}</span
                >
              </div>
              <div
                v-if="addons.airport"
                class="flex justify-between text-sm text-slate-400"
              >
                <span>{{ labels.airportDelivery }}</span>
                <span class="font-bold text-slate-200">${{ estAirport }}</span>
              </div>
              <div
                class="flex justify-between items-end pt-3 border-t border-slate-700 mt-2"
              >
                <span class="text-slate-300 font-bold">{{ labels.estimatedTotal }}</span>
                <div class="text-right">
                  <div class="text-3xl font-bold text-brand-orange">
                    ${{ total }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div
        class="bg-blue-50/50 border border-blue-100 rounded-[2rem] p-8 md:p-10"
      >
        <CreditCard class="w-8 h-8 text-blue-500 mb-6" />
        <h3 class="text-2xl font-display font-bold text-slate-900 mb-4">
          {{ extraBlocks.paymentMethods.title }}
        </h3>
        <p class="text-sm text-slate-600 mb-6 font-medium">
          {{ extraBlocks.paymentMethods.description }}
        </p>
        <ul class="space-y-4">
          <li
            v-for="item in extraBlocks.paymentMethods.items"
            :key="item.label"
            class="flex items-center justify-between border-b border-blue-100/50 pb-3"
          >
            <span class="font-bold text-slate-800 text-sm">{{
              item.label
            }}</span>
            <span
              class="bg-white text-xs font-bold px-2 py-1 rounded text-blue-700 shadow-sm"
              >{{ item.value }}</span
            >
          </li>
        </ul>
      </div>

      <div
        class="bg-white border border-slate-100 shadow-sm rounded-[2rem] p-8 md:p-10"
      >
        <h3 class="text-2xl font-display font-bold text-slate-900 mb-4">
          {{ extraBlocks.documents.title }}
        </h3>
        <p class="text-sm text-slate-600 mb-6 font-medium">
          {{ extraBlocks.documents.description }}
        </p>
        <ul class="space-y-4">
          <li
            v-for="item in extraBlocks.documents.items"
            :key="item.title"
            class="flex items-start gap-4"
          >
            <div
              class="w-10 h-10 bg-slate-50 border border-slate-100 flex items-center justify-center rounded-xl shrink-0"
            >
              <component
                :is="
                  item.title.includes('Passport')
                    ? FileText
                    : item.title.includes('License')
                      ? IdCard
                      : CalendarCheck
                "
                class="w-5 h-5 text-slate-600"
              />
            </div>
            <div>
              <span class="font-bold text-slate-900 block text-sm mb-1">{{
                item.title
              }}</span>
              <span class="text-xs text-slate-500 leading-relaxed">{{
                item.text
              }}</span>
            </div>
          </li>
        </ul>
      </div>
    </section>

    <section>
      <h2
        class="text-3xl md:text-4xl font-display font-bold text-slate-900 mb-8"
      >
        {{ extraBlocks.pickupProof.title }}
      </h2>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div
          v-for="item in extraBlocks.pickupProof.items"
          :key="item.caption"
          class="group relative rounded-2xl overflow-hidden aspect-[4/3] bg-slate-100"
        >
          <img
            :src="item.image"
            :alt="item.caption"
            class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
            loading="lazy"
          />
          <div
            class="absolute inset-0 bg-gradient-to-t from-slate-900/80 via-transparent to-transparent flex items-end p-4"
          >
            <span class="text-white text-xs font-bold leading-tight">{{
              item.caption
            }}</span>
          </div>
        </div>
      </div>
    </section>

    <section>
      <h2
        class="text-3xl md:text-4xl font-display font-bold text-slate-900 mb-10"
      >
        {{ extraBlocks.taxiComparison.title }}
      </h2>
      <div class="overflow-x-auto pb-4">
        <table
          class="w-full text-left min-w-[600px] border-collapse bg-white rounded-2xl overflow-hidden shadow-sm border border-slate-100"
        >
          <thead>
            <tr class="bg-slate-50">
              <th class="p-4 rounded-tl-2xl font-bold text-slate-900">{{ labels.feature }}</th>
              <th class="p-4 font-bold text-slate-900 border-l border-white">
                {{ labels.rentalCar }}
              </th>
              <th class="p-4 font-bold text-slate-500 border-l border-white">
                {{ labels.taxi }}
              </th>
              <th class="p-4 rounded-tr-2xl font-bold text-slate-500 border-l border-white">
                {{ labels.privateDriver }}
              </th>
            </tr>
          </thead>
          <tbody class="text-sm">
            <tr
              v-for="(row, index) in extraBlocks.taxiComparison.rows"
              :key="row.feature"
              class="border-[0.5px] border-slate-100"
            >
              <td
                :class="[
                  'p-5 font-bold text-slate-700 bg-white',
                  index === extraBlocks.taxiComparison.rows.length - 1
                    ? 'rounded-bl-xl'
                    : '',
                ]"
              >
                {{ row.feature }}
              </td>
              <td
                :class="[
                  'p-5 border-l border-slate-100 bg-green-50/30',
                  row.rentalTone === 'amber' ? 'bg-amber-50/30' : '',
                ]"
              >
                <span
                  :class="[
                    'inline-flex items-center px-2.5 py-1 rounded text-xs font-bold',
                    row.rentalTone === 'amber'
                      ? 'text-amber-700 bg-amber-100/50'
                      : 'text-green-700 bg-green-100/50',
                  ]"
                >
                  {{ row.rental }}
                </span>
              </td>
              <td
                :class="[
                  'p-5 border-l border-slate-100 bg-white',
                  row.taxiTone === 'amber'
                    ? 'text-amber-600'
                    : row.taxiTone === 'red'
                      ? 'text-red-600 opacity-80'
                      : row.taxiTone === 'green'
                        ? 'text-green-700'
                        : 'text-slate-600',
                ]"
              >
                {{ row.taxi }}
              </td>
              <td
                :class="[
                  'p-5 border-l border-slate-100 bg-white',
                  index === extraBlocks.taxiComparison.rows.length - 1
                    ? 'rounded-br-xl'
                    : '',
                  row.driverTone === 'green'
                    ? 'text-green-700'
                    : 'text-slate-600',
                ]"
              >
                {{ row.driver }}
              </td>
            </tr>
          </tbody>
        </table>
        <p class="mt-4 text-sm text-slate-500 font-medium">
          {{ extraBlocks.taxiComparison.verdict }}
        </p>
      </div>
    </section>

    <section
      class="bg-brand-orange text-white rounded-[2.5rem] p-8 md:p-12 relative overflow-hidden"
    >
      <div
        class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(255,255,255,0.15),transparent_60%)] pointer-events-none"
      />
      <div class="relative z-10 max-w-2xl">
        <h2 class="text-3xl md:text-5xl font-display font-bold mb-6">
          {{ extraBlocks.whatsappSuggestion.title }}
        </h2>
        <p class="text-lg text-white/80 font-medium mb-8">
          {{ extraBlocks.whatsappSuggestion.description }}
        </p>
        <a
          :href="extraBlocks.whatsappSuggestion.href"
          target="_blank"
          rel="noreferrer"
          class="inline-flex items-center gap-3 bg-white text-slate-900 px-8 py-4 rounded-xl font-bold hover:bg-slate-50 transition-colors shadow-lg shadow-brand-orange/20"
        >
          <MessageCircle class="w-5 h-5 text-[#25D366]" />
          {{ extraBlocks.whatsappSuggestion.buttonLabel }}
        </a>
      </div>
    </section>
  </div>
</template>
