<script setup>
const props = defineProps({
  tier: { type: String, default: 'default' } // 'default' (Tier 1) or 'override' (Tier 2)
})

const { t } = useTranslation()
const open = ref(false)
const toggle = () => { open.value = !open.value }
</script>

<template>
  <div class="sc-info-card mb-3" :class="tier === 'override' ? 'sc-info-tier2' : 'sc-info-tier1'">
    <div class="sc-info-header" @click="toggle">
      <div class="d-flex items-center gap-10px">
        <span class="sc-info-badge">
          {{ tier === 'override' ? (t.sc_tier_badge_2 || 'TIER 2') : (t.sc_tier_badge_1 || 'TIER 1') }}
        </span>
        <span class="sc-info-title">
          {{ tier === 'override' ? (t.sc_tier_title_override || 'DHL Shipping Cost — Business Partner Override (Higher Priority)') : (t.sc_tier_title_default || 'DHL Shipping Cost — Default Rates (Fallback)') }}
        </span>
      </div>
      <span class="tf-icon ti" :class="open ? 'ti-chevron-up' : 'ti-chevron-down'"></span>
    </div>

    <div v-if="open" class="sc-info-body">
      <p><strong>{{ t.sc_tier_intro || 'How DHL shipping costs are calculated — the system uses a 2-tier lookup:' }}</strong></p>

      <div class="sc-tier-grid">
        <div class="sc-tier-block sc-tier-2">
          <div class="sc-tier-head">{{ t.sc_tier_2_head || 'TIER 2 — BP Override (priority)' }}</div>
          <p>{{ t.sc_tier_2_intro || 'Organization-specific rates that override defaults. Matched by:' }}</p>
          <ul>
            <li><code>ad_org_id</code> ({{ t.sc_organization || 'organization' }})</li>
            <li><code>c_country_id</code> ({{ t.sc_destination_country || 'destination country' }})</li>
            <li><code>c_bpartner_id</code> ({{ t.sc_business_partner_optional || 'optional, higher priority if set' }})</li>
            <li><code>rangeweightfrom / rangeweightto</code> ({{ t.sc_weight_range || 'optional weight range' }})</li>
            <li><code>validfrom / validto</code> ({{ t.sc_validity_period || 'optional date range' }})</li>
          </ul>
          <p><em>{{ t.sc_tier_2_priority || 'Priority within Tier 2 (most → least specific):' }}</em></p>
          <ol>
            <li>BP + Weight Range + Date Range</li>
            <li>BP + Weight Range</li>
            <li>BP + Date Range</li>
            <li>Weight Range + Date Range</li>
            <li>BP only</li>
            <li>Weight Range only</li>
            <li>Date Range only</li>
            <li>Org + Country only</li>
          </ol>
        </div>

        <div class="sc-tier-block sc-tier-1">
          <div class="sc-tier-head">{{ t.sc_tier_1_head || 'TIER 1 — Default (fallback)' }}</div>
          <p>{{ t.sc_tier_1_intro || 'General rates for all organizations. Matched by:' }}</p>
          <ul>
            <li><code>c_country_id</code> ({{ t.sc_destination_country || 'destination country' }})</li>
            <li><code>rangeweightfrom / rangeweightto</code> ({{ t.sc_weight_range || 'optional weight range' }})</li>
            <li><code>validfrom / validto</code> ({{ t.sc_validity_period || 'optional date range' }})</li>
          </ul>
          <p><em>{{ t.sc_tier_1_priority || 'Priority within Tier 1 (most → least specific):' }}</em></p>
          <ol>
            <li>Weight Range + Date Range</li>
            <li>Weight Range only</li>
            <li>Date Range only</li>
            <li>Country only</li>
          </ol>
        </div>
      </div>

      <div class="sc-cost-formula">
        <div class="sc-cost-title">{{ t.sc_cost_components || 'Cost components' }}</div>
        <ul>
          <li>{{ t.sc_cost_base || 'Base shipping fee — ShippingBasePrice from matching tier (fallback €25.00). Special Kleinpaket rate applies if both shipment and customer flags are enabled.' }}</li>
          <li>{{ t.sc_cost_weight || 'Weight addon — shipment_weight × ShippingPricePerKG' }}</li>
          <li>{{ t.sc_cost_co2 || 'CO₂ costs — ad_client.dhl_co2_price (fallback €0.19) per shipment' }}</li>
          <li>{{ t.sc_cost_energy || 'Energy costs — Germany only: base × ad_client.dhl_energy_price (fallback 0.0125)' }}</li>
          <li>{{ t.sc_cost_peak || 'Peak surcharge — only between dhl_peak_start_data and dhl_peak_end_data' }}</li>
        </ul>
        <div class="sc-formula-box">
          int_freight_total = (ShippingBasePrice + weight × ShippingPricePerKG) + CO₂ + energy + peak
        </div>
      </div>

      <div v-if="tier === 'override'" class="sc-note sc-note-warn">
        <span class="tf-icon ti ti-alert-triangle"></span>
        {{ t.sc_note_override || 'Override rows take precedence over Default rows for the matching organization, country, BP, weight range and date range.' }}
      </div>
      <div v-else class="sc-note sc-note-info">
        <span class="tf-icon ti ti-info-circle"></span>
        {{ t.sc_note_default || 'These default rates apply when no Business Partner Override matches the shipment.' }}
      </div>
    </div>
  </div>
</template>

<style scoped>
.sc-info-card {
  border-radius: 10px;
  border: 1px solid transparent;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.sc-info-tier1 {
  background: linear-gradient(135deg, #eef6ff 0%, #f5fbff 100%);
  border-color: #b9dcff;
}
.sc-info-tier2 {
  background: linear-gradient(135deg, #fff4e6 0%, #fffaf0 100%);
  border-color: #ffd29a;
}
.sc-info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
}
.sc-info-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
}
.sc-info-tier1 .sc-info-badge { background: #2e86de; }
.sc-info-tier2 .sc-info-badge { background: #f39c12; }
.sc-info-title { font-weight: 600; color: #2c3e50; }
.sc-info-body {
  padding: 0 16px 16px 16px;
  color: #2c3e50;
  font-size: 13px;
  line-height: 1.55;
}
.sc-info-body p { margin: 8px 0; }
.sc-info-body code {
  background: rgba(0,0,0,0.06);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
}
.sc-tier-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 8px 0;
}
@media (max-width: 800px) {
  .sc-tier-grid { grid-template-columns: 1fr; }
}
.sc-tier-block {
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 8px;
  padding: 12px;
}
.sc-tier-1 { border-left: 4px solid #2e86de; }
.sc-tier-2 { border-left: 4px solid #f39c12; }
.sc-tier-head { font-weight: 700; margin-bottom: 6px; color: #2c3e50; }
.sc-tier-block ul, .sc-tier-block ol { padding-left: 18px; margin: 4px 0 8px 0; }
.sc-cost-formula {
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 8px;
  padding: 12px;
  margin-top: 8px;
}
.sc-cost-title { font-weight: 700; margin-bottom: 6px; color: #2c3e50; }
.sc-formula-box {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 6px;
  background: #0f172a;
  color: #e2f0ff;
  font-family: 'Menlo', 'Monaco', monospace;
  font-size: 12.5px;
}
.sc-note {
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}
.sc-note-info { background: #e3f2fd; color: #0d47a1; }
.sc-note-warn { background: #fff3e0; color: #b25400; }
</style>
