<template>
  <div class="p-6 space-y-6">

    <!-- Empty state -->
    <div v-if="orderItems.length === 0" class="flex flex-col items-center justify-center py-24 text-gray-500">
      <p class="text-lg font-medium text-gray-400">No items in production</p>
      <p class="text-sm mt-1">Click the <span class="text-amber-400 font-mono">+</span> button on any item in the Calculator</p>
    </div>

    <template v-else>

      <!-- ── Production Order ──────────────────────────────────────────────── -->
      <section>
        <div class="flex items-center justify-between mb-3">
          <h2 class="text-sm font-semibold text-gray-400 uppercase tracking-wider">Production Order</h2>
          <button
            class="text-xs text-red-400 hover:text-red-300 transition-colors"
            @click="clear()"
          >Clear all</button>
        </div>

        <div class="bg-gray-800/50 border border-gray-700 rounded-xl overflow-hidden">
          <table class="w-full text-sm">
            <thead>
              <tr class="border-b border-gray-700 bg-gray-700/30">
                <th class="text-left px-4 py-2 text-xs font-semibold text-gray-400 uppercase tracking-wider">Item</th>
                <th class="text-center px-3 py-2 text-xs font-semibold text-gray-400 uppercase tracking-wider w-28">Qty</th>
                <th class="text-right px-4 py-2 text-xs font-semibold text-gray-400 uppercase tracking-wider">Cost / unit</th>
                <th class="w-8"></th>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="item in computedItems"
                :key="item.recipe.outputItemId"
                class="border-t border-gray-700/40 hover:bg-gray-700/20"
              >
                <td class="px-4 py-2">
                  <div class="flex items-center gap-2">
                    <img
                      :src="itemImageUrl(item.recipe.outputItemId)"
                      :alt="item.recipe.displayName"
                      class="w-12 h-12 -my-2 rounded flex-shrink-0"
                    />
                    <span class="text-gray-200 font-medium">{{ item.recipe.displayName }}</span>
                    <span class="text-xs text-gray-500">{{ item.recipe.category }}</span>
                  </div>
                </td>
                <td class="px-3 py-2 text-center">
                  <input
                    type="number"
                    min="1"
                    :value="item.qty"
                    class="w-20 bg-gray-900 border border-gray-700 rounded px-2 py-0.5 text-center text-sm font-mono text-gray-200 focus:outline-none focus:border-amber-500"
                    @change="upsert(item.recipe, Number(($event.target as HTMLInputElement).value))"
                  />
                </td>
                <td class="px-4 py-2 text-right font-mono text-gray-300">
                  <span v-if="item.missingPrices" class="text-red-400 text-xs">Missing prices</span>
                  <span v-else>{{ formatSilver(item.craftCostPerUnit) }}</span>
                </td>
                <td class="px-2 py-2">
                  <button
                    class="text-gray-600 hover:text-red-400 transition-colors text-sm leading-none"
                    title="Remove"
                    @click="remove(item.recipe.outputItemId)"
                  >✕</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>

      <!-- ── Bottom section: Materials + Summary ──────────────────────────── -->
      <div class="flex gap-6 items-start">

        <!-- Materials Needed + Journals -->
        <section class="flex-[2] min-w-0 space-y-4">
          <div>
            <h2 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">Materials Needed</h2>
            <div class="bg-gray-800/50 border border-gray-700 rounded-xl overflow-hidden">
              <table class="w-full text-xs">
                <thead>
                  <tr class="border-b border-gray-700 bg-gray-700/30">
                    <th class="text-left px-4 py-2 text-gray-400 font-semibold uppercase tracking-wider">Material</th>
                    <th class="text-right px-4 py-2 text-gray-400 font-semibold uppercase tracking-wider">Qty</th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    v-for="mat in aggregatedMaterials"
                    :key="mat.itemId"
                    class="border-t border-gray-700/40 hover:bg-gray-700/20"
                  >
                    <td class="px-4 py-1.5 text-gray-300">
                      <div class="flex items-center gap-2">
                        <img :src="itemImageUrl(mat.itemId)" :alt="mat.displayName" class="w-10 h-10 -my-1 rounded flex-shrink-0" />
                        {{ mat.displayName }}
                      </div>
                    </td>
                    <td class="px-4 py-1.5 text-right font-mono text-gray-200 font-medium">{{ mat.qty.toLocaleString() }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          <!-- Journals -->
          <div>
            <div class="bg-gray-800/50 border border-gray-700 rounded-xl overflow-hidden">
              <table class="w-full text-xs">
                <thead>
                  <tr class="border-b border-gray-700 bg-gray-700/30">
                    <th class="text-left px-4 py-2 text-gray-400 font-semibold uppercase tracking-wider">Journal</th>
                    <th class="text-right px-4 py-2 text-gray-400 font-semibold uppercase tracking-wider">Qty</th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    v-for="row in journalRows"
                    :key="`${row.journalType}::${row.tier}`"
                    class="border-t border-gray-700/40 hover:bg-gray-700/20"
                  >
                    <td class="px-4 py-1.5 text-gray-300">
                      <div class="flex items-center gap-2">
                        <img :src="row.journalImgUrl" :alt="row.journalName" class="w-10 h-10 -my-1 rounded flex-shrink-0" />
                        {{ row.journalName }}
                      </div>
                    </td>
                    <td class="px-4 py-1.5 text-right font-mono text-gray-200 font-medium">{{ row.journals.toLocaleString() }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </section>

        <!-- Summary -->
        <section class="flex-1 min-w-0">
          <h2 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">Summary</h2>
          <div class="bg-gray-800/50 border border-gray-700 rounded-xl p-4 space-y-2 text-xs font-mono">
            <div class="flex justify-between gap-4">
              <span class="text-gray-400">Raw materials cost</span>
              <span class="text-gray-200">{{ formatSilver(totals.rawCost) }}</span>
            </div>
            <div class="flex justify-between gap-4">
              <span class="text-gray-400">RRR savings ({{ filters.rrr }}%)</span>
              <span class="text-green-400">−{{ formatSilver(totals.rrrSavings) }}</span>
            </div>
            <div class="flex justify-between gap-4 border-t border-gray-700/50 pt-2">
              <span class="text-gray-200 font-semibold">Total craft cost</span>
              <span class="text-gray-100 font-semibold">{{ formatSilver(totals.effectiveCost) }}</span>
            </div>
            <div class="flex justify-between gap-4 border-t border-gray-700/50 pt-2">
              <span class="text-gray-400">Total items</span>
              <span class="text-gray-200">{{ totals.totalItems }}</span>
            </div>
            <div class="flex justify-between gap-4">
              <span class="text-gray-400">Crafting actions</span>
              <span class="text-gray-200">{{ totals.totalCrafts }}</span>
            </div>
          </div>
        </section>
      </div>

    </template>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useProductionOrder } from '../composables/useProductionOrder'
import { useAlbionPrices } from '../composables/useAlbionPrices'
import { useFilters } from '../composables/useFilters'
import { formatSilver, formatItemId, tierStyle, itemImageUrl } from '../utils/formatting'
import type { Tier, JournalType } from '../types/crafting'

const { orderItems, upsert, remove, clear } = useProductionOrder()
const { getPrice } = useAlbionPrices()
const { filters } = useFilters()

// Laborer journal fills ≈ 13 crafts per book (ratio is constant across tiers)
const CRAFTS_PER_JOURNAL = 13

const JOURNAL_DISPLAY_NAME: Record<JournalType, string> = {
  warrior:   "Blacksmith's",
  hunter:    "Fletcher's",
  mage:      "Imbuer's",
  toolmaker: "Toolmaker's",
}

const JOURNAL_ITEM_ID: Record<JournalType, string> = {
  warrior:   'JOURNAL_WARRIOR',
  hunter:    'JOURNAL_HUNTER',
  mage:      'JOURNAL_MAGE',
  toolmaker: 'JOURNAL_TOOLMAKER',
}

// ─── Per-item computed values ─────────────────────────────────────────────────

const computedItems = computed(() => {
  const city    = filters.value.city
  const rrrFactor = 1 - filters.value.rrr / 100

  return orderItems.value.map(({ recipe, qty }) => {
    let rawCost = 0
    let missingPrices = false

    for (const ing of recipe.ingredients) {
      const entry = getPrice(ing.itemId, city)
      if (!entry || entry.sell_price_min === 0) {
        missingPrices = true
      } else {
        rawCost += entry.sell_price_min * ing.quantity
      }
    }

    const craftCostPerUnit = rawCost * rrrFactor
    return { recipe, qty, craftCostPerUnit, totalCraftCost: craftCostPerUnit * qty, missingPrices }
  })
})

// ─── Aggregated materials ─────────────────────────────────────────────────────

const aggregatedMaterials = computed(() => {
  const city = filters.value.city
  const map = new Map<string, { displayName: string; qty: number; unitPrice: number }>()

  for (const { recipe, qty } of orderItems.value) {
    for (const ing of recipe.ingredients) {
      const entry = getPrice(ing.itemId, city)
      const unitPrice = entry?.sell_price_min ?? 0
      if (!map.has(ing.itemId)) {
        map.set(ing.itemId, { displayName: formatItemId(ing.itemId), qty: 0, unitPrice })
      }
      map.get(ing.itemId)!.qty += ing.quantity * qty
    }
  }

  return [...map.entries()]
    .sort((a, b) => a[1].displayName.localeCompare(b[1].displayName))
    .map(([itemId, m]) => ({ ...m, itemId, totalCost: m.qty * m.unitPrice }))
})

// ─── Totals + journals ────────────────────────────────────────────────────────

const totals = computed(() => {
  const rrrFactor = 1 - filters.value.rrr / 100
  let rawCost = 0
  let totalCrafts = 0
  let totalItems = 0

  for (const item of computedItems.value) {
    if (!item.missingPrices) {
      rawCost += item.craftCostPerUnit / rrrFactor * item.qty  // back to raw
    }
    totalCrafts += item.qty
    totalItems  += item.qty
  }

  const effectiveCost = rawCost * rrrFactor
  const rrrSavings    = rawCost - effectiveCost
  const totalJournals = Math.ceil(totalCrafts / CRAFTS_PER_JOURNAL)

  return { rawCost, effectiveCost, rrrSavings, totalCrafts, totalItems, totalJournals }
})

const journalRows = computed(() => {
  const map = new Map<string, { journalType: JournalType; tier: Tier; crafts: number }>()
  for (const { recipe, qty } of orderItems.value) {
    const key = `${recipe.journalType}::${recipe.tier}`
    const cur = map.get(key) ?? { journalType: recipe.journalType, tier: recipe.tier as Tier, crafts: 0 }
    map.set(key, { ...cur, crafts: cur.crafts + qty })
  }

  return [...map.values()]
    .sort((a, b) => a.journalType.localeCompare(b.journalType) || a.tier - b.tier)
    .map(row => ({
      ...row,
      journalName:   JOURNAL_DISPLAY_NAME[row.journalType],
      journals:      Math.ceil(row.crafts / CRAFTS_PER_JOURNAL),
      journalImgUrl: itemImageUrl(`T${row.tier}_${JOURNAL_ITEM_ID[row.journalType]}`),
    }))
})
</script>
