app/components/dashboard/NeedsCoverageCard.vue

<template>
  <div class="hidden" data-ui="needs_coverage_card_v2" />
  <UCard class="min-h-[140px] shadow-sm rounded-xl">
    <template #header>
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-2">
          <UIcon name="i-heroicons-user-group" class="h-5 w-5" />
          <h3 class="font-semibold">Member Needs Coverage</h3>
        </div>
        <UTooltip
          text="Shows how well the co-op can meet each member's stated financial needs">
          <UIcon
            name="i-heroicons-information-circle"
            class="h-4 w-4 text-neutral-400 hover:text-neutral-600 cursor-help" />
        </UTooltip>
      </div>
    </template>

    <div v-if="hasMembers" class="space-y-4">
      <!-- Team Summary -->
      <div class="text-center">
        <div class="text-2xl font-semibold" :class="statusColor">
          {{ fullyCoveredCount }} of {{ totalMembers }}
        </div>
        <div class="text-sm text-neutral-600">members fully covered</div>
      </div>

      <!-- Coverage Stats -->
      <div class="flex justify-between text-sm">
        <div class="text-center">
          <div class="font-medium">{{ median }}%</div>
          <div class="text-neutral-600">Median</div>
        </div>
        <div class="text-center">
          <div class="font-medium" :class="underCoveredColor">
            {{ stats.under100 }}
          </div>
          <div class="text-neutral-600">Under 100%</div>
        </div>
        <div class="text-center">
          <div class="font-medium">{{ formatCurrency(availablePayroll) }}</div>
          <div class="text-neutral-600">Available</div>
        </div>
      </div>

      <!-- Intelligent Financial Analysis -->
      <div v-if="hasMembers" class="space-y-2">
        <!-- Coverage gap analysis -->
        <div
          v-if="stats.under100 > 0"
          class="text-xs bg-amber-50 p-3 rounded border-l-4 border-amber-400">
          <div class="flex items-start gap-2">
            <UIcon
              name="i-heroicons-exclamation-triangle"
              class="h-4 w-4 text-amber-600 mt-0.5 flex-shrink-0" />
            <div class="space-y-1">
              <p class="font-medium text-amber-800">Coverage Gap Analysis</p>
              <p class="text-amber-700">
                To meet member needs, you need
                <strong>{{ formatCurrency(totalNeeds) }}</strong> based on their
                stated requirements, but you have
                <strong>{{ formatCurrency(availablePayroll) }}</strong>
                available for payroll.
              </p>
              <p class="text-amber-600">
                <strong
                  >Shortfall:
                  {{
                    formatCurrency(Math.max(0, totalNeeds - availablePayroll))
                  }}</strong
                >
              </p>
              <p class="text-xs text-amber-600 mt-2">
                💡 Note: This reflects member-stated needs. Check your Budget
                page for detailed payroll planning.
              </p>
            </div>
          </div>
        </div>

        <!-- Surplus analysis -->
        <div
          v-else-if="availablePayroll > totalNeeds && totalNeeds > 0"
          class="text-xs bg-green-50 p-3 rounded border-l-4 border-green-400">
          <div class="flex items-start gap-2">
            <UIcon
              name="i-heroicons-check-circle"
              class="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
            <div class="space-y-1">
              <p class="font-medium text-green-800">Healthy Coverage</p>
              <p class="text-green-700">
                You have
                <strong>{{ formatCurrency(availablePayroll) }}</strong>
                available to cover
                <strong>{{ formatCurrency(totalNeeds) }}</strong> in member
                needs.
              </p>
              <p class="text-green-600">
                <strong
                  >Surplus:
                  {{ formatCurrency(availablePayroll - totalNeeds) }}</strong
                >
              </p>
            </div>
          </div>
        </div>

        <!-- No payroll available -->
        <div
          v-else-if="availablePayroll === 0 && totalNeeds > 0"
          class="text-xs bg-red-50 p-3 rounded border-l-4 border-red-400">
          <div class="flex items-start gap-2">
            <UIcon
              name="i-heroicons-x-circle"
              class="h-4 w-4 text-red-600 mt-0.5 flex-shrink-0" />
            <div class="space-y-1">
              <p class="font-medium text-red-800">No Funds for Payroll</p>
              <p class="text-red-700">
                Member needs total
                <strong>{{ formatCurrency(totalNeeds) }}</strong> based on their
                stated requirements, but current revenue minus costs leaves $0
                for payroll.
              </p>
              <p class="text-red-600">
                Consider increasing revenue or reducing overhead costs.
              </p>
              <p class="text-xs text-red-600 mt-2">
                💡 Note: This reflects member-stated needs. Your Budget page may
                show different payroll amounts.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Empty State -->
    <div v-else class="text-center py-6 text-neutral-500">
      <UIcon name="i-heroicons-users" class="h-8 w-8 mx-auto mb-2 opacity-50" />
      <p class="text-sm">Add members in setup to see coverage</p>
    </div>
  </UCard>
</template>

<script setup lang="ts">
const { members, teamCoverageStats, allocatePayroll, streams } =
  useCoopBuilder();
const coopStore = useCoopBuilderStore();

const stats = computed(() => teamCoverageStats());
const allocatedMembers = computed(() => allocatePayroll());
const median = computed(() => Math.round(stats.value.median ?? 0));

// Team-level calculations
const hasMembers = computed(() => members.value.length > 0);
const totalMembers = computed(() => members.value.length);
const fullyCoveredCount = computed(
  () => totalMembers.value - stats.value.under100
);

// Financial calculations
const totalNeeds = computed(() =>
  allocatedMembers.value.reduce((sum, m) => sum + (m.minMonthlyNeeds || 0), 0)
);

const totalRevenue = computed(() =>
  streams.value.reduce((sum, s) => sum + (s.monthly || 0), 0)
);

const overheadCosts = computed(() =>
  coopStore.overheadCosts.reduce((sum, c) => sum + (c.amount || 0), 0)
);

const availablePayroll = computed(() =>
  Math.max(0, totalRevenue.value - overheadCosts.value)
);

// Status colors based on coverage
const statusColor = computed(() => {
  const ratio = fullyCoveredCount.value / Math.max(1, totalMembers.value);
  if (ratio === 1) return "text-green-600";
  if (ratio >= 0.8) return "text-amber-600";
  return "text-red-600";
});

const underCoveredColor = computed(() => {
  if (stats.value.under100 === 0) return "text-green-600";
  if (stats.value.under100 <= Math.ceil(totalMembers.value * 0.2))
    return "text-amber-600";
  return "text-red-600";
});

// Currency formatting
function formatCurrency(amount: number): string {
  return new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
    minimumFractionDigits: 0,
    maximumFractionDigits: 0,
  }).format(amount);
}
</script>