<template>
  <div class="max-w-4xl mx-auto space-y-6">
    <!-- Section Header -->
    <div class="mb-8">
      <h3 class="text-2xl font-black text-black mb-2">
        Where does your money go?
      </h3>
      <p class="text-neutral-600">
        Add costs like rent + utilities, software licenses, insurance, lawyer
        fees, accountant fees, and other recurring expenses.
      </p>
    </div>

    <!-- Overhead Costs -->
    <div class="space-y-4">
      <div
        v-if="overheadCosts.length > 0"
        class="flex items-center justify-between">
        <h4 class="text-lg font-bold text-black">Overhead</h4>
      </div>

      <div
        v-if="overheadCosts.length === 0"
        class="text-center py-12 border-2 border-dashed border-neutral-300 rounded-xl bg-white shadow-sm">
        <h4 class="font-medium text-neutral-900 mb-2">No overhead costs yet</h4>
        <p class="text-sm text-neutral-500 mb-4">
          Get started by adding your first overhead cost.
        </p>
        <UButton
          @click="addOverheadCost"
          size="lg"
          variant="solid"
          color="primary">
          <UIcon name="i-heroicons-plus" class="mr-2" />
          Add your first cost
        </UButton>
      </div>

      <div
        v-for="cost in overheadCosts"
        :key="cost.id"
        class="p-6 border-2 border-black rounded-xl bg-white shadow-md">
        <!-- Header row with name and delete button -->
        <div class="flex items-center justify-between mb-4">
          <div class="flex items-center gap-4 flex-1">
            <UInput
              v-model="cost.name"
              placeholder="Office rent"
              size="xl"
              class="text-xl w-full font-bold flex-1"
              @update:model-value="saveCost(cost)"
              @blur="saveCost(cost)" />
          </div>
          <UButton
            size="xs"
            variant="solid"
            color="error"
            class="ml-4"
            @click="removeCost(cost.id)"
            :ui="{
              base: 'cursor-pointer hover:opacity-90 transition-opacity',
            }">
            <UIcon name="i-heroicons-trash" class="w-4 h-4" />
          </UButton>
        </div>

        <!-- Fields grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <UFormField label="Category">
            <USelect
              v-model="cost.category"
              :items="categoryOptions"
              size="md"
              class="text-sm font-medium w-full"
              @update:model-value="saveCost(cost)" />
          </UFormField>

          <UFormField
            :label="
              cost.amountType === 'annual' ? 'Annual Amount' : 'Monthly Amount'
            "
            required>
            <div class="flex gap-2">
              <UInput
                :value="
                  cost.amountType === 'annual' ? cost.annualAmount : cost.amount
                "
                type="text"
                :placeholder="cost.amountType === 'annual' ? '9600' : '800'"
                size="md"
                class="text-sm font-medium w-full"
                @update:model-value="validateAndSaveAmount($event, cost)"
                @blur="saveCost(cost)">
                <template #leading>
                  <span class="text-neutral-500">{{ currencySymbol }}</span>
                </template>
              </UInput>
              <UButtonGroup size="md">
                <UButton
                  :variant="cost.amountType === 'monthly' ? 'solid' : 'outline'"
                  color="primary"
                  @click="switchAmountType(cost, 'monthly')"
                  class="text-xs">
                  Monthly
                </UButton>
                <UButton
                  :variant="cost.amountType === 'annual' ? 'solid' : 'outline'"
                  color="primary"
                  @click="switchAmountType(cost, 'annual')"
                  class="text-xs">
                  Annual
                </UButton>
              </UButtonGroup>
            </div>
            <p class="text-xs text-neutral-500 mt-1">
              <template v-if="cost.amountType === 'annual'">
                {{ currencySymbol
                }}{{ Math.round((cost.annualAmount || 0) / 12) }} per month
              </template>
              <template v-else>
                {{ currencySymbol }}{{ (cost.amount || 0) * 12 }} per year
              </template>
            </p>
          </UFormField>
        </div>
      </div>

      <!-- Add Cost Button (when items exist) -->
      <div v-if="overheadCosts.length > 0" class="flex justify-center">
        <UButton
          @click="addOverheadCost"
          size="lg"
          variant="solid"
          color="success"
          :ui="{
            base: 'cursor-pointer hover:scale-105 transition-transform',
            leadingIcon: 'hover:rotate-90 transition-transform',
          }">
          <UIcon name="i-heroicons-plus" class="mr-2" />
          Add another cost
        </UButton>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useDebounceFn } from "@vueuse/core";
const emit = defineEmits<{
  "save-status": [status: "saving" | "saved" | "error"];
}>();

// Store and Currency
const coop = useCoopBuilder();
const { currencySymbol } = useCurrency();

// Get the store directly for overhead costs
const store = useCoopBuilderStore();

// Computed for overhead costs (from store) with amountType defaults
const overheadCosts = computed(() =>
  (store.overheadCosts || []).map((cost) => ({
    ...cost,
    amountType: cost.amountType || "monthly",
    annualAmount: cost.annualAmount || (cost.amount || 0) * 12,
  }))
);

// Operating mode removed - always use target mode

// Category options
const categoryOptions = [
  { label: "Operations", value: "Operations" },
  { label: "Tools & Software", value: "Tools" },
  { label: "Professional Services", value: "Professional" },
  { label: "Marketing", value: "Marketing" },
  { label: "Other", value: "Other" },
];

// Computeds
const totalMonthlyCosts = computed(() =>
  overheadCosts.value.reduce((sum, cost) => sum + (cost.amount || 0), 0)
);

const largestCost = computed(() => {
  if (overheadCosts.value.length === 0) return 0;
  return Math.max(...overheadCosts.value.map((c) => c.amount || 0));
});

const avgCostPerItem = computed(() => {
  if (overheadCosts.value.length === 0) return 0;
  return Math.round(totalMonthlyCosts.value / overheadCosts.value.length);
});

// Live-write with debounce
const debouncedSave = useDebounceFn((cost: any) => {
  emit("save-status", "saving");

  try {
    // Use store's upsert method
    store.upsertOverheadCost(cost);
    emit("save-status", "saved");
  } catch (error) {
    console.error("Failed to save cost:", error);
    emit("save-status", "error");
  }
}, 300);

function saveCost(cost: any) {
  const hasValidAmount =
    cost.amountType === "annual" ? cost.annualAmount >= 0 : cost.amount >= 0;

  if (cost.name && hasValidAmount) {
    debouncedSave(cost);
  }
}

// Immediate save without debounce for UI responsiveness
function saveCostImmediate(cost: any) {
  try {
    // Use store's upsert method directly
    store.upsertOverheadCost(cost);
  } catch (error) {
    console.error("Failed to save cost:", error);
  }
}

// Validation function for amount
function validateAndSaveAmount(value: string, cost: any) {
  const numValue = parseFloat(value.replace(/[^\d.]/g, ""));
  const validValue = isNaN(numValue) ? 0 : Math.max(0, numValue);

  if (cost.amountType === "annual") {
    cost.annualAmount = validValue;
    cost.amount = Math.round(validValue / 12);
  } else {
    cost.amount = validValue;
    cost.annualAmount = validValue * 12;
  }

  saveCost(cost);
}

// Function to switch between annual and monthly
function switchAmountType(cost: any, type: "annual" | "monthly") {
  cost.amountType = type;

  // Recalculate values based on new type
  if (type === "annual") {
    if (!cost.annualAmount) {
      cost.annualAmount = (cost.amount || 0) * 12;
    }
  } else {
    if (!cost.amount) {
      cost.amount = Math.round((cost.annualAmount || 0) / 12);
    }
  }

  // Save immediately without debounce for instant UI update
  saveCostImmediate(cost);
}

function addOverheadCost() {
  const newCost = {
    id: Date.now().toString(),
    name: "",
    amount: 0,
    annualAmount: 0,
    amountType: "monthly",
    category: "Operations",
    recurring: true,
  };

  store.addOverheadCost(newCost);
  emit("save-status", "saved");
}

function removeCost(id: string) {
  store.removeOverheadCost(id);
  emit("save-status", "saved");
}
</script>
