<template>
  <div class="bulk-edit-row">
    <div class="edit-calculation-checkbox-cell">
      <checkbox :checked="isSelected" @checkbox-changed="updateSelected"></checkbox>
    </div>


    <div class="edit-calculation-cell-container">
      <div class="edit-calculation-cell copyable-cell" @click="action('material')">
        <div class="edit-calculation-cell-line">{{ premise.material.part_number }}</div>
        <div class="edit-calculation-cell-line edit-calculation-cell-subline" v-if="premise.hs_code">
          HS Code:
          {{ premise.hs_code }}
        </div>
        <div class="edit-calculation-cell-line edit-calculation-cell-subline"
             v-if="(premise.tariff_rate ?? null) !== null">
          Tariff rate:
          {{ toPercent(premise.tariff_rate) }}&nbsp;
        </div>
      </div>
    </div>


    <div class="edit-calculation-cell-container">
      <div class="edit-calculation-cell copyable-cell" @click="action('price')" v-if="showPrice">
        <div class="edit-calculation-cell-line">{{ toFixed(premise.material_cost) }} EUR</div>
        <div class="edit-calculation-cell-line edit-calculation-cell-subline">Oversea share:
          {{ toPercent(premise.oversea_share) }} %
        </div>
        <div class="edit-calculation-cell-line edit-calculation-cell-subline" v-if="premise.is_fca_enabled">
          <basic-badge icon="plus" variant="primary">FCA FEE</basic-badge>
        </div>
        <div class="edit-calculation-cell-line edit-calculation-cell-subline" v-if="showPriceIncomplete">
          <basic-badge variant="exception" icon="warning">INCOMPLETE</basic-badge>
        </div>
      </div>
      <div class="edit-calculation-empty copyable-cell" v-else @click="action('price')">
        <basic-badge variant="exception" icon="warning">INCOMPLETE</basic-badge>
      </div>
    </div>


    <div class="edit-calculation-cell-container">
      <div v-if="showHu" class="edit-calculation-cell copyable-cell"
           @click="action('packaging')">
        <div class="edit-calculation-cell-line">
          <PhVectorThree/>
          {{ premise.handling_unit.length }} x
          {{ premise.handling_unit.width }} x
          {{ premise.handling_unit.height }} {{ premise.handling_unit.dimension_unit }}
        </div>
        <div class="edit-calculation-cell-line edit-calculation-cell-subline">
          <PhBarbell/>
          <span>{{ premise.handling_unit.weight }} {{ premise.handling_unit.weight_unit }}</span>
        </div>
        <div class="edit-calculation-cell-line edit-calculation-cell-subline">
          <PhHash/>
          {{ premise.handling_unit.content_unit_count }} pcs.
        </div>
        <div class="edit-calculation-packaging-badges">
          <basic-badge v-if="premise.is_stackable" variant="primary" icon="stack">STACKABLE</basic-badge>
          <basic-badge v-if="premise.is_mixable" variant="skeleton" icon="shuffle">MIXABLE</basic-badge>
        </div>
      </div>
      <div class="edit-calculation-empty copyable-cell" v-else
           @click="action('packaging')">
        <basic-badge variant="exception" icon="warning">INCOMPLETE</basic-badge>
      </div>
    </div>




    <div class="edit-calculation-cell-container">
      <div class="edit-calculation-cell" v-if="premise.supplier">
        <div class="calculation-list-supplier-data">
          <div class="edit-calculation-cell-line">{{ premise.supplier.name }}</div>
          <div class="edit-calculation-cell-subline"> {{ premise.supplier.address }}</div>
        </div>
      </div>
    </div>


    <div class="edit-calculation-cell-container">
      <div class="edit-calculation-cell copyable-cell" v-if="showDestinations"
           @click="action('destinations')">
        <div class="edit-calculation-cell-line">
          <span class="number-circle"> {{ destinationsCount }} </span> Destinations
        </div>
        <div class="edit-calculation-cell-subline" v-for="name in destinationNames"> {{ name }}</div>
        <div class="edit-calculation-cell-subline" v-if="showDestinationIncomplete">
          <basic-badge variant="exception" icon="warning">INCOMPLETE</basic-badge>
        </div>
      </div>
      <div class="edit-calculation-empty" v-else-if="showMassEdit">
        <spinner></spinner>
      </div>
      <div class="edit-calculation-empty copyable-cell" v-else
           @click="action('destinations')">
        <basic-badge variant="exception" icon="warning">INCOMPLETE</basic-badge>
      </div>
    </div>



    <div class="edit-calculation-actions-cell">
      <icon-button icon="pencil-simple" help-text="Edit this calculation" help-text-position="left"
                   @click="editSingle"></icon-button>
      <icon-button icon="x" help-text="Remove from mass edit" help-text-position="left" @click="remove"></icon-button>
    </div>


  </div>
</template>

<script>
import Checkbox from "@/components/UI/Checkbox.vue";
import IconButton from "@/components/UI/IconButton.vue";
import Flag from "@/components/UI/Flag.vue";
import {mapStores} from "pinia";
import {usePremiseEditStore} from "@/store/premiseEdit.js";
import BasicBadge from "@/components/UI/BasicBadge.vue";
import {
  PhBarbell,
  PhBarcode,
  PhEmpty,
  PhFactory,
  PhHash,
  PhMapPin,
  PhPercent,
  PhVectorThree,
  PhVectorTwo
} from "@phosphor-icons/vue";
import {UrlSafeBase64} from "@/common.js";
import Spinner from "@/components/UI/Spinner.vue";


export default {
  name: "BulkEditRow",
  emits: ['remove', 'action'],
  components: {
    Spinner,
    PhMapPin,
    PhFactory,
    PhPercent,
    PhBarcode, PhBarbell, PhHash, PhVectorThree, PhVectorTwo, PhEmpty, BasicBadge, Flag, IconButton, Checkbox
  },
  props: {
    id: {
      type: Number,
      required: true
    },
    premise: {
      type: Object,
      required: true,
    }
  },
  computed: {
    destinationsCount() {
      return this.premise.destinations?.length ?? 0;
    },
    destinationsText() {
      return this.premise.destinations.map(d => d.destination_node.name).join(', ');
    },
    destinationNames() {
      const spliceCnt = ((this.premise.destinations.length === 4) ? 4 : 3) - (this.showDestinationIncomplete ? 1 : 0);
      const names = this.premise.destinations.map(d => d.destination_node.name).slice(0, spliceCnt);
      if (this.premise.destinations.length > names.length) {
        names.push('and more ...');
      }

      return names;
    },
    showDestinationIncomplete() {
      return this.premise.destinations.some(p => (
          (((p.annual_amount ?? null) === null) || p.annual_amount === 0 ||
              ((p.routes?.every(r => !r.is_selected) && !p.is_d2d) ||
                  (p.is_d2d && ((p.rate_d2d ?? null) === null || p.rate_d2d === 0 || (p.lead_time_d2d ?? null) === null || p.lead_time_d2d === 0))
              )
          )));
    },
    showDestinations() {
      return (this.destinationsCount > 0);
    },
    showMassEdit() {
      return this.premiseEditStore.showProcessingModal;
    },
    showHu() {
      return (this.hu.width && this.hu.length && this.hu.height && this.hu.weight && this.hu.content_unit_count)
    },
    showPrice() {
      return !(this.premise.material_cost === null) || (this.premise.material_cost === 0)
    },
    showPriceIncomplete() {
      return (this.premise.oversea_share === null)
    },
    isSelected() {
      return this.premise.selected;
    },
    hu() {
      return this.premise.handling_unit;
    },
    ...mapStores(usePremiseEditStore),
  },
  methods: {
    toFixed(value) {
      return value !== null ? (value).toFixed(2) : '0.00';
    },
    toPercent(value) {
      return value !== null ? (value * 100).toFixed(2) : '0.00';
    },
    updateSelected(value) {
      this.premiseEditStore.setSelectTo([this.id], value);
    },
    editSingle() {
      const bulkQuery = this.$route.params.ids;
      const urlStr = new UrlSafeBase64().encodeIds([this.id]);
      this.$router.push({name: 'bulk-single-edit', params: {id: urlStr, ids: bulkQuery}});
    },
    action(action) {
      this.$emit('action', {id: this.id, action: action});
    },
    remove() {
      this.premiseEditStore.removePremise(this.id);
      this.$emit('remove', this.id);
    }
  }
}
</script>

<style scoped>

.edit-calculation-cell-container {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  justify-self: stretch;
}

.edit-calculation-cell {
  flex: 1 1 auto;
  margin: 1.6rem 0;
  padding: 0.8rem;
}

.edit-calculation-empty {
  flex: 1 1 auto;
  margin: 1.6rem 0;
  padding: 0.8rem;
}

.copyable-cell {

  border-radius: 0.8rem;
}

/* Standard hover ohne copy mode */
.copyable-cell:hover {
  cursor: pointer;
  background-color: #f8fafc;
  border-radius: 0.8rem;
}

.bulk-edit-row {
  display: grid;
  grid-template-columns: 6rem 1fr 1fr 1.5fr 1.5fr 1.5fr 10rem;
  gap: 1.6rem;
  padding: 0 2.4rem;
  border-bottom: 0.16rem solid #f3f4f6;
  align-items: center;
  transition: background-color 0.2s ease;
  font-size: 1.2rem;
  font-weight: 500;
  height: 14rem;
  overflow: hidden;
}

.bulk-edit-row:last-child {
  border-bottom: none;
}

.edit-calculation-checkbox-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}


.edit-calculation-cell--price {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.edit-calculation-cell--supplier {
  display: flex;
  gap: 1.2rem;
  height: 90%;
}

.edit-calculation-cell--supplier-container {
  display: flex;
  gap: 0.8rem;
}

.edit-calculation-cell--supplier-flag {
  display: flex;
  align-items: center;
}

.edit-calculation-cell--packaging, .edit-calculation-cell--material, .edit-calculation-cell--destination {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.edit-calculation-cell-line {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.edit-calculation-cell-subline {
  font-size: 1.2rem;
  font-weight: 400;
  color: #6b7280;
}

.edit-calculation-packaging-badges {
  display: flex;
  gap: 0.8rem;
}



.edit-calculation-actions-cell {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.number-circle {
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background-color: #002F54;
  color: white;
  text-align: center;
  line-height: 1.6rem;
  font-size: 1.2rem;
}


</style>