<template>
  <div>
    <!-- No WizardSubnav for co-op setup tool -->

    <section class="py-8 max-w-4xl mx-auto font-mono">
      <!-- Header -->
      <div class="mb-10 text-center">
        <h1
          class="text-3xl font-black text-black dark:text-white mb-4 leading-tight uppercase tracking-wide border-t-2 border-b-2 border-black dark:border-white py-4">
          Budget Builder
        </h1>
      </div>

      <!-- Completed State -->
      <div v-if="isCompleted" class="text-center py-12 relative">
        <!-- Dithered shadow background -->
        <div class="absolute top-2 left-2 w-full h-full dither-shadow"></div>

        <div
          class="relative bg-white dark:bg-neutral-950 border-2 border-black dark:border-white p-8">
          <div
            class="w-16 h-16 bg-black dark:bg-white border-2 border-black dark:border-white flex items-center justify-center mx-auto mb-4">
            <UIcon
              name="i-heroicons-check"
              class="w-8 h-8 text-white dark:text-black" />
          </div>
          <h2
            class="text-2xl font-bold text-black dark:text-white mb-2 uppercase tracking-wide">
            You're all set!
          </h2>
          <p class="text-neutral-600 dark:text-neutral-400 mb-6">
            Your co-op is configured and ready to go.
          </p>

          <div class="flex justify-center gap-4">
            <button
              class="export-btn"
              @click="restartWizard"
              :disabled="isResetting">
              Start Over
            </button>
            <button class="export-btn primary" @click="navigateTo('/budget')">
              Go to Dashboard
            </button>
          </div>
        </div>
      </div>

      <!-- Vertical Steps Layout -->
      <div v-else class="space-y-4">
        <!-- Step 1: Pay Policy -->
        <div class="relative">
          <!-- Dithered shadow for selected state -->
          <div
            v-if="focusedStep === 1"
            class="absolute top-2 left-2 w-full h-full dither-shadow"></div>

          <div
            :class="[
              'relative bg-white dark:bg-neutral-950 border-2 border-black dark:border-neutral-500 overflow-hidden',
              focusedStep === 1 ? 'item-selected' : '',
            ]">
            <div
              class="p-8 cursor-pointer hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
              @click="setFocusedStep(1)">
              <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                  <div
                    class="w-8 h-8 flex items-center justify-center text-sm font-bold border-2"
                    :class="
                      policiesValid
                        ? 'bg-black dark:bg-white text-white dark:text-black border-black dark:border-white'
                        : 'bg-white dark:bg-neutral-950 text-black dark:text-white border-black dark:border-white'
                    ">
                    <UIcon
                      v-if="policiesValid"
                      name="i-heroicons-check"
                      class="w-4 h-4" />
                    <span v-else>1</span>
                  </div>
                  <div>
                    <h3
                      class="text-2xl font-black text-black dark:text-white uppercase tracking-wide">
                      Choose pay approach
                    </h3>
                  </div>
                </div>
                <UIcon
                  name="i-heroicons-chevron-down"
                  class="w-6 h-6 text-black dark:text-white transition-transform font-bold"
                  :class="{ 'rotate-180': focusedStep === 1 }" />
              </div>
            </div>

            <div
              v-if="focusedStep === 1"
              class="p-8 bg-neutral-50 dark:bg-neutral-900 border-t-2 border-black dark:border-neutral-500">
              <WizardPoliciesStep @save-status="handleSaveStatus" />
            </div>
          </div>
        </div>

        <!-- Step 2: Members -->
        <div class="relative">
          <!-- Dithered shadow for selected state -->
          <div
            v-if="focusedStep === 2"
            class="absolute top-2 left-2 w-full h-full dither-shadow"></div>

          <div
            :class="[
              'relative bg-white dark:bg-neutral-950 border-2 border-black dark:border-neutral-500 overflow-hidden',
              focusedStep === 2 ? 'item-selected' : '',
            ]">
            <div
              class="p-8 cursor-pointer hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
              @click="setFocusedStep(2)">
              <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                  <div
                    class="w-8 h-8 flex items-center justify-center text-sm font-bold border-2"
                    :class="
                      membersValid
                        ? 'bg-black dark:bg-white text-white dark:text-black border-black dark:border-neutral-500'
                        : 'bg-white dark:bg-neutral-950 text-black dark:text-white border-black dark:border-neutral-500'
                    ">
                    <UIcon
                      v-if="membersValid"
                      name="i-heroicons-check"
                      class="w-4 h-4" />
                    <span v-else>2</span>
                  </div>
                  <div>
                    <h3
                      class="text-2xl font-black text-black dark:text-white uppercase tracking-wide">
                      Add your team
                    </h3>
                  </div>
                </div>
                <UIcon
                  name="i-heroicons-chevron-down"
                  class="w-6 h-6 text-black dark:text-white transition-transform font-bold"
                  :class="{ 'rotate-180': focusedStep === 2 }" />
              </div>
            </div>

            <div
              v-if="focusedStep === 2"
              class="p-8 bg-neutral-50 dark:bg-neutral-900 border-t-2 border-black dark:border-neutral-500">
              <WizardMembersStep @save-status="handleSaveStatus" />
            </div>
          </div>
        </div>

        <!-- Step 3: Costs -->
        <div class="relative">
          <!-- Dithered shadow for selected state -->
          <div
            v-if="focusedStep === 3"
            class="absolute top-2 left-2 w-full h-full dither-shadow"></div>

          <div
            :class="[
              'relative bg-white dark:bg-neutral-950 border-2 border-black dark:border-neutral-500 overflow-hidden',
              focusedStep === 3 ? 'item-selected' : '',
            ]">
            <div
              class="p-8 cursor-pointer hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
              @click="setFocusedStep(3)">
              <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                  <div
                    class="w-8 h-8 flex items-center justify-center text-sm font-bold border-2"
                    :class="
                      costsValid
                        ? 'bg-black dark:bg-white text-white dark:text-black border-black dark:border-neutral-500'
                        : 'bg-white dark:bg-neutral-950 text-black dark:text-white border-black dark:border-neutral-500'
                    ">
                    <UIcon
                      v-if="costsValid"
                      name="i-heroicons-check"
                      class="w-4 h-4" />
                    <span v-else>3</span>
                  </div>
                  <div>
                    <h3
                      class="text-2xl font-black text-black dark:text-white uppercase tracking-wide">
                      Expenses
                    </h3>
                  </div>
                </div>
                <UIcon
                  name="i-heroicons-chevron-down"
                  class="w-6 h-6 text-black dark:text-white transition-transform font-bold"
                  :class="{ 'rotate-180': focusedStep === 3 }" />
              </div>
            </div>

            <div
              v-if="focusedStep === 3"
              class="p-8 bg-neutral-50 dark:bg-neutral-900 border-t-2 border-black dark:border-neutral-500">
              <WizardCostsStep @save-status="handleSaveStatus" />
            </div>
          </div>
        </div>

        <!-- Step 4: Revenue -->
        <div class="relative">
          <!-- Dithered shadow for selected state -->
          <div
            v-if="focusedStep === 4"
            class="absolute top-2 left-2 w-full h-full dither-shadow"></div>

          <div
            :class="[
              'relative bg-white dark:bg-neutral-950 border-2 border-black dark:border-neutral-500 overflow-hidden',
              focusedStep === 4 ? 'item-selected' : '',
            ]">
            <div
              class="p-8 cursor-pointer hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
              @click="setFocusedStep(4)">
              <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                  <div
                    class="w-8 h-8 flex items-center justify-center text-sm font-bold border-2"
                    :class="
                      streamsValid
                        ? 'bg-black dark:bg-white text-white dark:text-black border-black dark:border-neutral-500'
                        : 'bg-white dark:bg-neutral-950 text-black dark:text-white border-black dark:border-neutral-500'
                    ">
                    <UIcon
                      v-if="streamsValid"
                      name="i-heroicons-check"
                      class="w-4 h-4" />
                    <span v-else>4</span>
                  </div>
                  <div>
                    <h3
                      class="text-2xl font-black text-black dark:text-white uppercase tracking-wide">
                      Revenue streams
                    </h3>
                  </div>
                </div>
                <UIcon
                  name="i-heroicons-chevron-down"
                  class="w-6 h-6 text-black dark:text-white transition-transform font-bold"
                  :class="{ 'rotate-180': focusedStep === 4 }" />
              </div>
            </div>

            <div
              v-if="focusedStep === 4"
              class="p-8 bg-neutral-50 dark:bg-neutral-900 border-t-2 border-black dark:border-neutral-500">
              <WizardRevenueStep @save-status="handleSaveStatus" />
            </div>
          </div>
        </div>

        <!-- Progress Actions -->
        <div class="flex justify-between items-center pt-8">
          <button
            class="export-btn"
            @click="resetWizard"
            :disabled="isResetting">
            Clear Data
          </button>

          <div class="flex items-center gap-4">
            <!-- Save status -->
            <div
              class="flex items-center gap-2 text-sm font-mono uppercase tracking-wide">
              <UIcon
                v-if="saveStatus === 'saving'"
                name="i-heroicons-arrow-path"
                class="w-4 h-4 animate-spin text-neutral-500 dark:text-neutral-400" />
              <UIcon
                v-if="saveStatus === 'saved'"
                name="i-heroicons-check-circle"
                class="w-4 h-4 text-black dark:text-white" />
              <span
                v-if="saveStatus === 'saving'"
                class="text-neutral-500 dark:text-neutral-400"
                >Saving...</span
              >
              <span
                v-if="saveStatus === 'saved'"
                class="text-black dark:text-white"
                >Saved</span
              >
            </div>

            <UTooltip :text="incompleteSectionsText" :prevent="canComplete">
              <button
                class="export-btn primary"
                :class="{ 'opacity-50 cursor-not-allowed': !canComplete }"
                :disabled="!canComplete"
                @click="canComplete ? completeWizard() : null">
                Complete Setup
              </button>
            </UTooltip>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
// Store
const coop = useCoopBuilder();

// UI state
const focusedStep = ref(1);
const saveStatus = ref("");
const isResetting = ref(false);
const isCompleted = ref(false);

// Local validity flags for step headers
const membersValid = computed(() => {
  // Valid if at least one member with a name and positive hours
  return coop.members.value.some((m: any) => {
    const hasName = typeof m.name === "string" && m.name.trim().length > 0;
    const hours = Number((m as any).hoursPerMonth ?? 0);
    return hasName && Number.isFinite(hours) && hours > 0;
  });
});

const policiesValid = computed(() => {
  // Placeholder policy validity; mark true when wage text or policy set exists
  // Since policy not persisted yet in this store, consider valid when any member exists
  return coop.members.value.length > 0;
});

const costsValid = computed(() => {
  // Costs are optional, so always mark as valid for now
  return true;
});

const streamsValid = computed(() => {
  // Valid if all streams have name, category, and non-negative monthly
  return (
    coop.streams.value.length > 0 &&
    coop.streams.value.every((s: any) => {
      const monthly = Number((s as any).monthly ?? 0);
      return (s.label || "").toString().trim().length > 0 && monthly >= 0;
    })
  );
});

// Check if we have basic data for scenario exploration
const hasBasicData = computed(() => {
  return membersValid.value && (costsValid.value || streamsValid.value);
});

// Computed validation - all 4 steps must be valid
const canComplete = computed(() => {
  return (
    policiesValid.value &&
    membersValid.value &&
    costsValid.value &&
    streamsValid.value
  );
});

// Generate tooltip text for incomplete sections
const incompleteSectionsText = computed(() => {
  if (canComplete.value) return "";

  const incomplete = [];
  if (!policiesValid.value) incomplete.push("Choose pay approach");
  if (!membersValid.value) incomplete.push("Add team members");
  if (!costsValid.value) incomplete.push("Add monthly costs");
  if (!streamsValid.value) incomplete.push("Add revenue streams");

  return `Complete these sections: ${incomplete.join(", ")}`;
});

// Save status handler
function handleSaveStatus(status: "saving" | "saved" | "error") {
  saveStatus.value = status;
  if (status === "saved") {
    // Clear status after delay
    setTimeout(() => {
      if (saveStatus.value === "saved") {
        saveStatus.value = "";
      }
    }, 2000);
  }
}

// Step management
function setFocusedStep(step: number) {
  console.log("Setting focused step to:", step, "Current:", focusedStep.value);
  // Toggle if clicking on already focused step
  if (focusedStep.value === step) {
    focusedStep.value = 0; // Close the section
  } else {
    focusedStep.value = step; // Open the section
  }
  console.log("Focused step is now:", focusedStep.value);
}

function completeWizard() {
  // Mark setup as complete and show restart button for testing
  isCompleted.value = true;
}

async function resetWizard() {
  isResetting.value = true;

  // Reset centralized store
  coop.reset();
  saveStatus.value = "";

  // Small delay for UX
  await new Promise((resolve) => setTimeout(resolve, 300));
  isResetting.value = false;
}

async function restartWizard() {
  isResetting.value = true;

  // Reset completion state
  isCompleted.value = false;
  focusedStep.value = 1;

  // Reset centralized store
  coop.reset();
  saveStatus.value = "";

  // Small delay for UX
  await new Promise((resolve) => setTimeout(resolve, 300));
  isResetting.value = false;
}

// SEO
useSeoMeta({
  title: "Budget Builder",
  description:
    "Build your co-op's financial foundation: set up members, policies, costs, and revenue streams.",
});
</script>
