<script setup>
const props = defineProps({
  pending: {
    type: Boolean,
    default: false
  },
  customers: {
    type: Array,
    default: () => []
  },
  chartData: {
    type: Array,
    default: () => []
  },
  customerNames: {
    type: Array,
    default: () => []
  },
  selectedYear: {
    type: Number,
    required: true
  },
  dailyPending: {
    type: Boolean,
    default: false
  },
  dailyOrgChartData: {
    type: Array,
    default: () => []
  },
  orgNames: {
    type: Array,
    default: () => []
  }
})
</script>

<template>
  <!-- Charts Side by Side -->
  <div v-if="!pending && customers.length > 0" class="charts-side-by-side">
    <!-- Daily Chart -->
    <div class="chart-half">
      <div class="chart-container">
        <h3 class="chart-title">Daily Development by Organization (Current Month)</h3>
        <div v-if="!dailyPending && dailyOrgChartData.length > 0 && orgNames.length > 0">
          <FulfillmentOrgDailyChart
            :chart-data="dailyOrgChartData"
            :org-names="orgNames"
          />
        </div>
        <div v-else-if="!dailyPending" class="no-data-message">
          <UIcon name="i-heroicons-information-circle" />
          <p>No fulfillment fee line data available yet.</p>
        </div>
        <div v-else class="loading-state">
          <UIcon name="i-heroicons-arrow-path" class="animate-spin" />
          <p>Loading data...</p>
        </div>
      </div>
    </div>

    <!-- Monthly Chart -->
    <div class="chart-half">
      <div class="chart-container">
        <h3 class="chart-title">Monthly Income Development ({{ selectedYear }})</h3>
        <FulfillmentIncomeChart
          v-if="chartData.length > 0 && customerNames.length > 0"
          :chart-data="chartData"
          :customer-names="customerNames"
        />
        <div v-else class="no-data-message">
          <UIcon name="i-heroicons-information-circle" />
          <p>No customer data available.</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.charts-side-by-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.chart-half {
  min-width: 0; /* Prevents overflow in grid */
}

.chart-container {
  background: white;
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  height: 100%;
}

.chart-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 1rem;
  margin-top: 0;
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  gap: 1rem;
}

.loading-state svg {
  width: 2.5rem;
  height: 2.5rem;
  color: #3b82f6;
}

.loading-state p {
  font-size: 1rem;
  color: #6b7280;
}

.no-data-message {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 0.75rem;
  color: #1e40af;
  font-size: 0.95rem;
}

.no-data-message svg {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  color: #3b82f6;
}

@media (max-width: 768px) {
  .charts-side-by-side {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .chart-container {
    padding: 1rem;
    overflow-x: auto;
  }

  .chart-title {
    font-size: 1rem;
  }
}
</style>
