<template>
  <div>
    <!-- Export Options at Top -->
    <ExportOptions
      :export-data="exportData"
      filename="decision-framework"
      title="Decision Framework Helper" />

    <div
      class="template-wrapper bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100">
      <!-- Document Container -->
      <div class="document-page">
        <div class="template-content">
          <!-- Document Header -->
          <div class="text-center mb-8">
            <h1
              class="text-3xl md:text-5xl font-bold uppercase text-neutral-900 dark:text-white m-0 py-4 border-t-2 border-b-2 border-neutral-900 dark:border-neutral-100">
              Decision Framework
            </h1>
          </div>

          <!-- All Steps Visible -->
          <div v-if="!showResult">
            <!-- Step 1: Urgency -->
            <div class="section-card">
              <div class="flex justify-between items-center mb-4">
                <h2 class="section-title">1. How urgent is this decision?</h2>
                <div class="flex items-center gap-2">
                  <span
                    v-if="state.urgency"
                    class="px-3 py-1 text-sm bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 font-bold border border-green-300 dark:border-green-700"
                    >✓ COMPLETE</span
                  >
                  <span
                    v-else
                    class="px-3 py-1 text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 border border-neutral-300 dark:border-neutral-600"
                    >PENDING</span
                  >
                </div>
              </div>
              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <div
                  v-for="option in urgencyOptions"
                  :key="option.value"
                  class="relative">
                  <!-- Dithered shadow for selected items -->
                  <div
                    v-if="state.urgency === option.value"
                    class="absolute top-2 left-2 w-full h-full dither-shadow"></div>

                  <UCard
                    :class="[
                      'cursor-pointer transition-all',
                      state.urgency === option.value
                        ? 'item-selected border border-neutral-900 dark:border-neutral-100 bg-white dark:bg-neutral-950'
                        : 'border border-neutral-700 dark:border-neutral-700 hover:border-black dark:hover:border-white hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black cursor-pointer ',
                    ]"
                    :ui="{
                      body: { padding: 'p-4' },
                      ring: '',
                      shadow: '',
                      divide: '',
                    }"
                    @click="selectOption('urgency', option.value)">
                    <div class="text-xl font-bold mb-1">
                      {{ option.title }}
                    </div>
                    <div class="text-sm">
                      {{ option.description }}
                    </div>
                  </UCard>
                </div>
              </div>
            </div>

            <!-- Step 2: Reversibility -->
            <div class="section-card">
              <div class="flex justify-between items-center mb-4">
                <h2 class="section-title">2. Can we change our minds later?</h2>
                <div class="flex items-center gap-2">
                  <span
                    v-if="state.reversible"
                    class="px-3 py-1 text-sm bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 font-bold border border-green-300 dark:border-green-700"
                    >✓ COMPLETE</span
                  >
                  <span
                    v-else
                    class="px-3 py-1 text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 border border-neutral-300 dark:border-neutral-600"
                    >PENDING</span
                  >
                </div>
              </div>
              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <div
                  v-for="option in reversibilityOptions"
                  :key="option.value"
                  class="relative">
                  <!-- Dithered shadow for selected items -->
                  <div
                    v-if="state.reversible === option.value"
                    class="absolute top-2 left-2 w-full h-full dither-shadow"></div>

                  <UCard
                    :class="[
                      'cursor-pointer transition-all',
                      state.reversible === option.value
                        ? 'item-selected border border-neutral-900 dark:border-neutral-100 bg-white dark:bg-neutral-950'
                        : 'border border-neutral-700 dark:border-neutral-700 hover:border-black dark:hover:border-white hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black cursor-pointer',
                    ]"
                    :ui="{
                      body: { padding: 'p-4' },
                      ring: '',
                      shadow: '',
                      divide: '',
                    }"
                    @click="selectOption('reversible', option.value)">
                    <div class="text-xl font-bold mb-1">
                      {{ option.title }}
                    </div>
                    <div class="text-sm text-neutral-600 dark:text-neutral-400">
                      {{ option.description }}
                    </div>
                  </UCard>
                </div>
              </div>
            </div>

            <!-- Step 3: Expertise -->
            <div class="section-card">
              <div class="flex justify-between items-center mb-4">
                <h2 class="section-title">
                  3. Who has the most relevant expertise?
                </h2>
                <div class="flex items-center gap-2">
                  <span
                    v-if="state.expertise"
                    class="px-3 py-1 text-sm bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 font-bold border border-green-300 dark:border-green-700"
                    >✓ COMPLETE</span
                  >
                  <span
                    v-else
                    class="px-3 py-1 text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 border border-neutral-300 dark:border-neutral-600"
                    >PENDING</span
                  >
                </div>
              </div>
              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <div
                  v-for="option in expertiseOptions"
                  :key="option.value"
                  class="relative">
                  <!-- Dithered shadow for selected items -->
                  <div
                    v-if="state.expertise === option.value"
                    class="absolute top-2 left-2 w-full h-full dither-shadow"></div>

                  <UCard
                    :class="[
                      'cursor-pointer transition-all',
                      state.expertise === option.value
                        ? 'item-selected border border-neutral-900 dark:border-neutral-100 bg-white dark:bg-neutral-950'
                        : 'border border-neutral-700 dark:border-neutral-700 hover:border-black dark:hover:border-white hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black cursor-pointer',
                    ]"
                    :ui="{
                      body: { padding: 'p-4' },
                      ring: '',
                      shadow: '',
                      divide: '',
                    }"
                    @click="selectOption('expertise', option.value)">
                    <div class="text-xl font-bold mb-1">
                      {{ option.title }}
                    </div>
                    <div class="text-sm text-neutral-600 dark:text-neutral-400">
                      {{ option.description }}
                    </div>
                  </UCard>
                </div>
              </div>
            </div>

            <!-- Step 4: Impact -->
            <div class="section-card">
              <div class="flex justify-between items-center mb-4">
                <h2 class="section-title">4. Who will this impact?</h2>
                <div class="flex items-center gap-2">
                  <span
                    v-if="state.impact"
                    class="px-3 py-1 text-sm bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 font-bold border border-green-300 dark:border-green-700"
                    >✓ COMPLETE</span
                  >
                  <span
                    v-else
                    class="px-3 py-1 text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 border border-neutral-300 dark:border-neutral-600"
                    >PENDING</span
                  >
                </div>
              </div>
              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <div
                  v-for="option in impactOptions"
                  :key="option.value"
                  class="relative">
                  <!-- Dithered shadow for selected items -->
                  <div
                    v-if="state.impact === option.value"
                    class="absolute top-2 left-2 w-full h-full dither-shadow"></div>

                  <UCard
                    :class="[
                      'cursor-pointer transition-all',
                      state.impact === option.value
                        ? 'item-selected border border-neutral-900 dark:border-neutral-100 bg-white dark:bg-neutral-950'
                        : 'border border-neutral-700 dark:border-neutral-700 hover:border-black dark:hover:border-white hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black cursor-pointer',
                    ]"
                    :ui="{
                      body: { padding: 'p-4' },
                      ring: '',
                      shadow: '',
                      divide: '',
                    }"
                    @click="selectOption('impact', option.value)">
                    <div class="text-xl font-bold mb-1">
                      {{ option.title }}
                    </div>
                    <div class="text-sm text-neutral-600 dark:text-neutral-400">
                      {{ option.description }}
                    </div>
                  </UCard>
                </div>
              </div>
            </div>

            <!-- Step 5: Options clarity -->
            <div class="section-card">
              <div class="flex justify-between items-center mb-4">
                <h2 class="section-title">
                  5. How well-defined are the options?
                </h2>
                <div class="flex items-center gap-2">
                  <span
                    v-if="state.options"
                    class="px-3 py-1 text-sm bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 font-bold border border-green-300 dark:border-green-700"
                    >✓ COMPLETE</span
                  >
                  <span
                    v-else
                    class="px-3 py-1 text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 border border-neutral-300 dark:border-neutral-600"
                    >PENDING</span
                  >
                </div>
              </div>
              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <div
                  v-for="option in optionsOptions"
                  :key="option.value"
                  class="relative">
                  <!-- Dithered shadow for selected items -->
                  <div
                    v-if="state.options === option.value"
                    class="absolute top-2 left-2 w-full h-full dither-shadow"></div>

                  <UCard
                    :class="[
                      'cursor-pointer transition-all',
                      state.options === option.value
                        ? 'item-selected border border-neutral-900 dark:border-neutral-100 bg-white dark:bg-neutral-950'
                        : 'border border-neutral-700 dark:border-neutral-700 hover:border-black dark:hover:border-white hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black cursor-pointer',
                    ]"
                    :ui="{
                      body: { padding: 'p-4' },
                      ring: '',
                      shadow: '',
                      divide: '',
                    }"
                    @click="selectOption('options', option.value)">
                    <div class="text-xl font-bold mb-1">
                      {{ option.title }}
                    </div>
                    <div class="text-sm text-neutral-600 dark:text-neutral-400">
                      {{ option.description }}
                    </div>
                  </UCard>
                </div>
              </div>
            </div>

            <!-- Step 6: Investment -->
            <div class="section-card">
              <div class="flex justify-between items-center mb-4">
                <h2 class="section-title">6. How invested is everyone?</h2>
                <div class="flex items-center gap-2">
                  <span
                    v-if="state.investment"
                    class="px-3 py-1 text-sm bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 font-bold border border-green-300 dark:border-green-700"
                    >✓ COMPLETE</span
                  >
                  <span
                    v-else
                    class="px-3 py-1 text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 border border-neutral-300 dark:border-neutral-600"
                    >PENDING</span
                  >
                </div>
              </div>
              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <div
                  v-for="option in investmentOptions"
                  :key="option.value"
                  class="relative">
                  <!-- Dithered shadow for selected items -->
                  <div
                    v-if="state.investment === option.value"
                    class="absolute top-2 left-2 w-full h-full dither-shadow"></div>

                  <UCard
                    :class="[
                      'cursor-pointer transition-all',
                      state.investment === option.value
                        ? 'item-selected border border-neutral-900 dark:border-neutral-100 bg-white dark:bg-neutral-950'
                        : 'border border-neutral-700 dark:border-neutral-700 hover:border-black dark:hover:border-white hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black cursor-pointer',
                    ]"
                    :ui="{
                      body: { padding: 'p-4' },
                      ring: '',
                      shadow: '',
                      divide: '',
                    }"
                    @click="selectOption('investment', option.value)">
                    <div class="text-xl font-bold mb-1">
                      {{ option.title }}
                    </div>
                    <div class="text-sm text-neutral-600 dark:text-neutral-400">
                      {{ option.description }}
                    </div>
                  </UCard>
                </div>
              </div>
            </div>

            <!-- Step 7: Team size -->
            <div class="section-card">
              <div class="flex justify-between items-center mb-4">
                <h2 class="section-title">
                  7. How many people need to participate?
                </h2>
                <div class="flex items-center gap-2">
                  <span
                    v-if="state.teamSize"
                    class="px-3 py-1 text-sm bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 font-bold border border-green-300 dark:border-green-700"
                    >✓ COMPLETE</span
                  >
                  <span
                    v-else
                    class="px-3 py-1 text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 border border-neutral-300 dark:border-neutral-600"
                    >PENDING</span
                  >
                </div>
              </div>
              <div class="grid grid-cols-3 sm:grid-cols-5 gap-4">
                <div v-for="size in teamSizes" :key="size" class="relative">
                  <!-- Dithered shadow for selected items -->
                  <div
                    v-if="state.teamSize === size"
                    class="absolute top-2 left-2 w-full h-full dither-shadow"></div>

                  <button
                    :class="[
                      'px-4 py-3 font-semibold text-sm border w-full transition-all',
                      state.teamSize === size
                        ? 'item-selected bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100 border-neutral-900 dark:border-neutral-100'
                        : 'bg-white dark:bg-neutral-950 text-neutral-700 dark:text-neutral-300 border-neutral-700 dark:border-neutral-700 hover:border-black dark:hover:border-white cursor-pointer',
                    ]"
                    @click="selectOption('teamSize', size)">
                    {{ size }}
                  </button>
                </div>
              </div>
            </div>

            <!-- Get Recommendation Button -->
            <div class="section-card text-center">
              <UButton
                v-if="allStepsCompleted"
                @click="showRecommendation"
                size="xl"
                color="primary"
                class="px-8 py-4 text-lg">
                Get Your Decision Framework Recommendation
              </UButton>
              <div v-else class="text-neutral-600 dark:text-neutral-400">
                <p class="mb-4">
                  Complete all steps above to get your personalized
                  recommendation.
                </p>
                <p class="text-sm">
                  {{ completedSteps }} of {{ totalSteps }} steps completed
                </p>
              </div>
            </div>
          </div>

          <!-- Results -->
          <div v-if="showResult" data-results>
            <div class="section-card">
              <h2 class="section-title text-center mb-8">
                Your Recommended Framework
              </h2>

              <div
                class="text-center mb-8 p-6 bg-neutral-100 dark:bg-neutral-900 border-2 border-neutral-900 dark:border-neutral-100">
                <h3
                  class="text-3xl font-bold text-neutral-900 dark:text-neutral-100 mb-2">
                  {{ result.method }}
                </h3>
                <p class="text-lg text-neutral-600 dark:text-neutral-400">
                  {{ result.tagline }}
                </p>
              </div>

              <div class="space-y-8">
                <div class="section-card">
                  <h3
                    class="text-xl font-semibold text-neutral-900 dark:text-neutral-100 mb-4">
                    Why this framework?
                  </h3>
                  <p
                    class="text-neutral-700 dark:text-neutral-300 leading-relaxed">
                    {{ result.reasoning }}
                  </p>
                </div>

                <div class="section-card">
                  <h3
                    class="text-xl font-semibold text-neutral-900 dark:text-neutral-100 mb-4">
                    How to implement:
                  </h3>
                  <ul class="space-y-3">
                    <li
                      v-for="step in result.steps"
                      :key="step"
                      class="flex items-start">
                      <span
                        class="text-neutral-900 dark:text-neutral-100 font-bold mr-3 mt-1"
                        >→</span
                      >
                      <span class="text-neutral-700 dark:text-neutral-300">{{
                        step
                      }}</span>
                    </li>
                  </ul>
                </div>

                <div v-if="result.tips" class="section-card">
                  <h3
                    class="text-xl font-semibold text-neutral-900 dark:text-neutral-100 mb-4">
                    Pro tips:
                  </h3>
                  <ul class="space-y-3">
                    <li
                      v-for="tip in result.tips"
                      :key="tip"
                      class="flex items-start">
                      <span
                        class="text-neutral-900 dark:text-neutral-100 font-bold mr-3 mt-1"
                        >→</span
                      >
                      <span class="text-neutral-700 dark:text-neutral-300">{{
                        tip
                      }}</span>
                    </li>
                  </ul>
                </div>

                <UAlert
                  v-if="result.warning"
                  color="red"
                  variant="soft"
                  :title="'Watch out for:'"
                  :description="result.warning"
                  class="mb-6" />

                <UAlert
                  v-if="result.success"
                  color="emerald"
                  variant="soft"
                  :title="'Success looks like:'"
                  :description="result.success"
                  class="mb-6" />

                <div v-if="result.alternatives" class="section-card">
                  <h3
                    class="text-xl font-semibold text-neutral-900 dark:text-neutral-100 mb-4">
                    Also consider:
                  </h3>
                  <div class="space-y-3">
                    <div
                      v-for="alt in result.alternatives"
                      :key="alt.method"
                      class="p-4 border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-950">
                      <span class="font-semibold">{{ alt.method }}:</span>
                      {{ alt.when }}
                    </div>
                  </div>
                </div>

                <div class="section-card text-center">
                  <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    <UButton @click="resetForm" size="lg" color="primary">
                      Try Another Decision
                    </UButton>
                    <UButton
                      @click="printResult"
                      size="lg"
                      variant="outline"
                      color="primary">
                      Print Recommendation
                    </UButton>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Export Options at Bottom -->
    <ExportOptions
      :export-data="exportData"
      filename="decision-framework"
      title="Decision Framework Helper" />
  </div>
</template>

<script setup>
import ExportOptions from "~/components/ExportOptions.vue";

const state = reactive({
  urgency: null,
  reversible: null,
  expertise: null,
  impact: null,
  options: null,
  investment: null,
  teamSize: null,
});

const totalSteps = 7;

const urgencyOptions = [
  {
    value: 1,
    title: "No rush",
    description: "We have plenty of time to think this through",
  },
  {
    value: 2,
    title: "Some time pressure",
    description: "We should decide soon but not immediately",
  },
  {
    value: 3,
    title: "Moderate urgency",
    description: "We need to decide within days or weeks",
  },
  {
    value: 4,
    title: "High urgency",
    description: "We need to decide very soon",
  },
  {
    value: 5,
    title: "Crisis mode",
    description: "This decision is needed yesterday",
  },
];

const reversibilityOptions = [
  {
    value: "high",
    title: "Easily reversible",
    description: "We can pivot anytime with minimal cost",
  },
  {
    value: "medium",
    title: "Some commitment",
    description: "Changes possible but with effort/cost",
  },
  {
    value: "low",
    title: "One-way door",
    description: "This decision is permanent or very hard to undo",
  },
];

const expertiseOptions = [
  {
    value: "concentrated",
    title: "One clear expert",
    description: "One person has deep knowledge here",
  },
  {
    value: "multiple",
    title: "Multiple experts",
    description: "Several people have relevant expertise",
  },
  {
    value: "distributed",
    title: "Distributed knowledge",
    description: "Everyone has valuable input",
  },
  {
    value: "lacking",
    title: "Unknown territory",
    description: "We're all learning together",
  },
];

const impactOptions = [
  {
    value: "narrow",
    title: "One person or small team",
    description: "Affects specific individuals or department",
  },
  {
    value: "wide",
    title: "Whole organization",
    description: "Everyone feels the effects",
  },
];

const optionsOptions = [
  {
    value: "clear",
    title: "Clear choices",
    description: "We know our options and their trade-offs",
  },
  {
    value: "emerging",
    title: "Still exploring",
    description: "Options are emerging through discussion",
  },
  {
    value: "undefined",
    title: "Wide open",
    description: "We don't even know what's possible yet",
  },
];

const investmentOptions = [
  {
    value: "high",
    title: "Everyone cares deeply",
    description: "Strong opinions all around",
  },
  {
    value: "mixed",
    title: "Mixed investment",
    description: "Some care more than others",
  },
  {
    value: "low",
    title: "Low stakes for most",
    description: "People are flexible",
  },
];

const teamSizes = ["2", "3", "4-5", "6-8", "9+"];

const showResult = ref(false);

const result = computed(() => {
  if (!showResult.value) return null;
  return determineFramework();
});

const completedSteps = computed(() => {
  let completed = 0;
  if (state.urgency) completed++;
  if (state.reversible) completed++;
  if (state.expertise) completed++;
  if (state.impact) completed++;
  if (state.options) completed++;
  if (state.investment) completed++;
  if (state.teamSize) completed++;
  return completed;
});

const allStepsCompleted = computed(() => {
  return completedSteps.value === totalSteps;
});

function selectOption(category, value) {
  state[category] = value;
}

function showRecommendation() {
  showResult.value = true;
  nextTick(() => {
    const resultsElement = document.querySelector("[data-results]");
    if (resultsElement) {
      resultsElement.scrollIntoView({ behavior: "smooth" });
    }
  });
}

function determineFramework() {
  // AUTOCRATIC - urgent + concentrated expertise + predictable
  if (
    state.urgency >= 5 &&
    state.expertise === "concentrated" &&
    state.options === "clear"
  ) {
    return {
      method: "Autocratic",
      tagline: "Quick decision by designated leader",
      reasoning:
        "Extreme urgency with clear options and concentrated expertise. Speed is critical.",
      steps: [
        "Leader makes immediate decision",
        "Communicate decision and rationale quickly",
        "Execute without delay",
        "Debrief when crisis passes",
      ],
      warning:
        "Only use in true emergencies. Follow up with team discussion afterward.",
      success:
        "Crisis averted through quick action. Team understands why autocratic mode was necessary.",
    };
  }

  // DEFER TO EXPERT - clear expertise + urgency
  if (
    state.expertise === "concentrated" &&
    (state.urgency >= 4 || state.impact === "narrow")
  ) {
    return {
      method: "Defer to Expert",
      tagline: "Trust the person who knows this best",
      reasoning:
        "You have someone with clear expertise, and either time is short or the impact is contained. Let them lead while keeping everyone informed.",
      steps: [
        "Expert proposes solution with reasoning",
        "Quick clarifying questions (set time limit)",
        "Expert makes final call",
        "Document decision and rationale",
        "Schedule check-in if reversible",
      ],
      tips: [
        "Expert should explain their thinking, not just the outcome",
        "Create space for concerns to be raised",
        "If expert is unsure, that's valuable info—maybe try another method",
      ],
      warning:
        "The expert should still seek input. Expertise + diverse perspectives = better decisions.",
      success:
        "Decision made quickly with buy-in because people trust the expert's judgment and understand the reasoning.",
    };
  }

  // AVOIDANT - non-urgent + undefined + low investment
  if (
    state.urgency <= 2 &&
    state.options === "undefined" &&
    state.investment === "low"
  ) {
    return {
      method: "Strategic Delay",
      tagline: "Wait for clarity to emerge",
      reasoning:
        "It's not urgent, options aren't clear, and people aren't strongly invested. Sometimes the best decision is to not decide yet.",
      steps: [
        "Acknowledge the decision exists",
        "Set a future check-in date",
        "Gather information passively",
        "Revisit when conditions change",
        "Document why you're waiting",
      ],
      warning:
        "Don't let avoidance become paralysis. Set a deadline for revisiting.",
      success:
        "By waiting, better options emerged or the decision became unnecessary.",
      alternatives: [
        {
          method: "Time-boxed exploration",
          when: "Give it 2 weeks to see if clarity emerges",
        },
      ],
    };
  }

  // CONSENSUS - low urgency + high stakes + everyone affected
  if (
    state.urgency <= 2 &&
    state.reversible === "low" &&
    state.impact === "wide" &&
    state.investment === "high"
  ) {
    return {
      method: "Full Consensus",
      tagline: "Everyone agrees to support the decision",
      reasoning:
        "This is a high-stakes, permanent decision affecting everyone who cares deeply. Take the time to get real alignment.",
      steps: [
        "Share context and constraints with everyone",
        "Gather all perspectives (async or sync)",
        "Identify shared values and concerns",
        "Iterate on proposals until everyone can support it",
        "Document the decision and everyone's commitment",
      ],
      tips: [
        "Consensus ≠ everyone's favorite. It means everyone can live with it",
        "Use 'I can live with this' as your bar, not 'I love this'",
        "Timebox discussion rounds to maintain energy",
      ],
      warning:
        "If consensus is taking too long, check: Is everyone operating with the same info? Are we solving the right problem?",
      success:
        "Everyone understands the decision and commits to supporting it, even if it wasn't their first choice.",
    };
  }

  // CONSENT - medium stakes, mixed investment
  if (state.investment === "mixed" && state.reversible !== "low") {
    return {
      method: "Consent-Based Decision",
      tagline: "No one objects strongly enough to block",
      reasoning:
        "Not everyone is equally invested, and the decision is reversible. Focus on addressing objections rather than optimizing preferences.",
      steps: [
        "Proposer presents solution",
        "Ask: 'Can you live with this?'",
        "Address only strong objections",
        "Modify proposal if needed",
        "Move forward when no blocking objections remain",
      ],
      tips: [
        "Objections must be based on harm to the co-op, not personal preference",
        "Set a clear bar for what counts as a blocking objection",
        "This is faster than consensus but still inclusive",
      ],
      success:
        "Decision made efficiently with key concerns addressed, without getting stuck in preference debates.",
    };
  }

  // DELEGATION - narrow impact + concentrated expertise
  if (
    state.impact === "narrow" &&
    state.expertise === "concentrated" &&
    state.urgency >= 3
  ) {
    return {
      method: "Delegation",
      tagline: "Empower the responsible party to decide",
      reasoning:
        "This primarily affects specific people who have the expertise. Trust them to handle it.",
      steps: [
        "Clarify scope and constraints",
        "Delegate to affected party/expert",
        "Set check-in points if needed",
        "Trust them to execute",
        "Report back on outcome",
      ],
      tips: [
        "Be clear about what's delegated and what's not",
        "Delegation means trusting their judgment, not micromanaging",
      ],
      success:
        "Decision made efficiently by those closest to the work, building trust and autonomy.",
    };
  }

  // CONSULTATIVE - lacking expertise but need input
  if (state.expertise === "lacking" && state.options === "emerging") {
    return {
      method: "Consultative Process",
      tagline: "Gather input, then designated person decides",
      reasoning:
        "No one has clear expertise but we need various perspectives to understand the options.",
      steps: [
        "Designate decision owner",
        "Owner seeks input from all stakeholders",
        "Owner researches and synthesizes options",
        "Owner makes decision and explains reasoning",
        "Share decision with clear rationale",
      ],
      tips: [
        "Be transparent about who decides and when",
        "Document all input received",
        "Explain how input influenced the decision",
      ],
      success:
        "Decision informed by diverse perspectives with clear accountability.",
    };
  }

  // STOCHASTIC - truly stuck, low stakes
  if (
    state.options === "clear" &&
    state.investment === "low" &&
    state.reversible === "high"
  ) {
    return {
      method: "Controlled Randomness",
      tagline: "Let chance break the tie",
      reasoning:
        "Options are equally good, stakes are low, and people aren't strongly invested. Save time and energy.",
      steps: [
        "Confirm all options are acceptable",
        "Choose random method (coin, dice, draw straws)",
        "Do it publicly for transparency",
        "Commit to the outcome",
        "Move on without second-guessing",
      ],
      warning:
        "Only works if everyone truly accepts all options. Don't use for important decisions.",
      success: "Quick resolution that feels fair because chance is impartial.",
      alternatives: [
        {
          method: "Take turns choosing",
          when: "Rotate who picks when these situations arise",
        },
      ],
    };
  }

  // 3-PERSON TRAP
  if (state.teamSize === "3" && state.investment === "high") {
    return {
      method: "Modified Consensus (Not Voting!)",
      tagline: "Voting creates problems in groups of three",
      reasoning:
        "With 3 people, one person always becomes the tie-breaker, which creates unhealthy dynamics. Use rotating facilitation instead.",
      steps: [
        "Rotate who facilitates the decision",
        "Facilitator synthesizes others' views first",
        "Look for creative third options",
        "If stuck, defer to whoever is most affected",
        "Or use external input (advisor, user feedback)",
      ],
      warning:
        "Never use simple majority voting with 3 people—it turns one person into a perpetual kingmaker.",
      success:
        "All three members feel heard and the decision reflects collective wisdom, not just the middle person's preference.",
      alternatives: [
        {
          method: "Time-boxed experiment",
          when: "Try one option for 2 weeks, then reassess",
        },
      ],
    };
  }

  // DEMOCRATIC VOTE - larger group, time pressure
  if (
    (state.teamSize === "6-8" || state.teamSize === "9+") &&
    state.urgency >= 4
  ) {
    return {
      method: "Democratic Vote",
      tagline: "Majority decides, move forward together",
      reasoning:
        "Large group + time pressure = need for efficiency. Voting provides clear resolution while respecting everyone's input.",
      steps: [
        "Present options clearly with pros/cons",
        "Discussion round (time-boxed)",
        "Anonymous or open vote (decide beforehand)",
        "Announce result and thank minority view",
        "Document dissenting concerns for future review",
      ],
      tips: [
        "Consider ranked choice for more than 2 options",
        "Anonymous voting reduces peer pressure",
        "Always acknowledge the minority position respectfully",
      ],
      warning:
        "Don't vote on everything! Reserve it for when other methods are too slow.",
      success:
        "Clear decision made efficiently with everyone having equal say.",
    };
  }

  // EXPERIMENTAL - unknown territory
  if (state.expertise === "lacking" && state.reversible === "high") {
    return {
      method: "Run an Experiment",
      tagline: "Try something small and learn",
      reasoning:
        "Nobody knows the right answer and it's easy to change course. Perfect for learning by doing.",
      steps: [
        "Define what you're testing",
        "Set clear success metrics",
        "Choose shortest meaningful trial period",
        "Pick simplest version to test",
        "Schedule review before committing further",
      ],
      tips: [
        "Make it clear this is an experiment, not a decision",
        "Shorter trials = faster learning",
        "Document what you learn, not just what happened",
      ],
      success:
        "You learn what works through experience rather than speculation, building confidence for bigger decisions.",
    };
  }

  // ADVICE PROCESS - multiple expertise, mixed investment
  if (state.expertise === "multiple" && state.investment === "mixed") {
    return {
      method: "Advice Process",
      tagline: "Decision-maker seeks input, then decides",
      reasoning:
        "Multiple people have valuable input, but not everyone needs to be involved in the final call. This balances inclusion with efficiency.",
      steps: [
        "Assign decision owner (most affected or willing)",
        "Owner seeks advice from those with expertise",
        "Owner seeks input from those affected",
        "Owner makes decision and explains reasoning",
        "Share decision and thank advisors",
      ],
      tips: [
        "Be clear who the decision owner is upfront",
        "Seeking advice ≠ design by committee",
        "Owner genuinely considers input but isn't bound by it",
      ],
      success:
        "Decision made efficiently with relevant input incorporated, and everyone understands the reasoning.",
    };
  }

  // DEFAULT
  return {
    method: "Facilitated Discussion",
    tagline: "Talk it through with structure",
    reasoning:
      "Your situation has mixed signals. Use a structured discussion to find clarity before choosing a decision method.",
    steps: [
      "Clarify what we're actually deciding",
      "Share all relevant information",
      "Each person shares their perspective (timed)",
      "Identify where we align and where we differ",
      "Choose appropriate method based on what emerges",
    ],
    tips: [
      "Sometimes the discussion reveals you're solving the wrong problem",
      "Visual tools (sticky notes, diagrams) help with complex decisions",
      "If stuck, ask: 'What would happen if we did nothing?'",
    ],
    warning:
      "Don't let discussion become delay. Set a deadline for moving to a decision method.",
    success:
      "The real question becomes clear and the right decision method becomes obvious.",
  };
}

function resetForm() {
  state.urgency = null;
  state.reversible = null;
  state.expertise = null;
  state.impact = null;
  state.options = null;
  state.investment = null;
  state.teamSize = null;
  showResult.value = false;

  window.scrollTo({ top: 0, behavior: "smooth" });
}

function printResult() {
  window.print();
}

// Export data for standardized export component
const exportData = computed(() => ({
  formData: {
    state: state,
    showResult: showResult.value,
    result: result.value,
  },
  surveyResponses: {
    urgency: state.urgency,
    reversible: state.reversible,
    expertise: state.expertise,
    impact: state.impact,
    options: state.options,
    investment: state.investment,
    teamSize: state.teamSize,
  },
  recommendedFramework: result.value || null,
  metadata: {
    completedAt: showResult.value ? new Date().toISOString() : null,
    totalSteps: totalSteps,
    completedSteps: completedSteps.value,
    progressPercentage: Math.round((completedSteps.value / totalSteps) * 100),
  },
  exportedAt: new Date().toISOString(),
  section: "decision-framework",
  title: "Decision Framework Helper",
  description: "Interactive wizard to find the right way to decide together",
}));

// Keyboard shortcuts
onMounted(() => {
  const handleKeydown = (event) => {
    if (showResult.value) return;

    // Enter to get recommendation when all steps completed
    if (event.key === "Enter" && allStepsCompleted.value) {
      showRecommendation();
    }
    // Escape to reset form
    else if (event.key === "Escape") {
      resetForm();
    }
  };

  document.addEventListener("keydown", handleKeydown);

  onUnmounted(() => {
    document.removeEventListener("keydown", handleKeydown);
  });
});

useHead({
  title: "Decision Framework Helper",
  meta: [
    {
      name: "description",
      content:
        "Find the right way to decide together with this interactive decision-making framework helper.",
    },
  ],
});
</script>
