<script setup>
import InventoryRow from "@/components/inventory/InventoryRow.vue";
import SelectedInvItem from "@/components/inventory/SelectedInvItem.vue";

const invItems = [
  {
    id: 1,
    name: "Dầu gội thảo mộc 500ml",
    category: "Chăm sóc tóc",
    sku: "DG-012",
    storage: "Kho TP.HCM",
    storage__position: "WH-HCM/C-01",
    stock: 200,
    preorder: 50,
    available: 150,
    unit_price: "120000.00",
    total: "24000000.00",
    batch: "BATCH-2024-012",
    expired: "2026-08-20",
    status: "OK",
    moveHistory: [
      {
        id: 1,
        type: 1,
        type__name: "Nhập",
        date: "2026-04-03",
        code: "PO-009",
        to__code: "WH-HCM/C-01",
        delta: 300,
      },
      {
        id: 2,
        type: 2,
        type__name: "Xuất",
        date: "2026-04-04",
        code: "SO-034",
        from__code: "WH-HCM/C-01",
        delta: -100,
      },
    ],
  },
  {
    id: 2,
    name: "Gel rửa mặt làm sạch sâu",
    category: "Mỹ phẩm",
    sku: "GRM-006",
    storage: "Kho Hà Nội",
    storage__position: "WH-HN/A-03",
    stock: 12,
    preorder: 5,
    available: 7,
    unit_price: "140000.00",
    total: "1700000.00",
    batch: "BATCH-2024-006",
    expired: "2025-11-20",
    status: "Thấp",
    moveHistory: [
      {
        id: 3,
        type: 2,
        type__name: "Xuất",
        date: "2026-03-28",
        code: "SO-028",
        to__code: "WH-HN/A-03",
        delta: -50,
      },
    ],
  },
  {
    id: 3,
    name: "Kem chống nắng SPF 50+",
    category: "Mỹ phẩm",
    sku: "KCN-001",
    storage: "Kho Hà Nội",
    storage__position: "WH-HN/A-01",
    stock: 150,
    preorder: 20,
    available: 130,
    unit_price: "280000.00",
    total: "42000000.00",
    batch: "BATCH-2024-001",
    expired: "2025-10-15",
    status: "OK",
    moveHistory: [
      {
        id: 4,
        type: 1,
        type__name: "Nhập",
        date: "2026-04-05",
        code: "PO-001",
        from__code: "WH-HN/A-01",
        delta: 200,
      },
      {
        id: 5,
        type: 2,
        type__name: "Xuất",
        date: "2026-04-06",
        code: "SO-023",
        from__code: "WH-HN/A-01",
        delta: -50,
      },
    ],
  },
  {
    id: 4,
    name: "Kem dưỡng ẩm ban đêm",
    category: "Dưỡng da",
    sku: "KD-007",
    storage: "Kho Đà Nẵng",
    storage__position: "WH-DN/A-01",
    stock: 8,
    preorder: 3,
    available: 5,
    unit_price: "380000.00",
    total: "30040000.00",
    batch: "BATCH-2024-007",
    expired: "2025-09-10",
    status: "Thấp",
    moveHistory: [
      {
        id: 6,
        type: 2,
        type__name: "Xuất",
        date: "2026-03-25",
        code: "SO-029",
        from__code: "WH-DN/A-01",
        delta: -40,
      },
    ],
  },
  {
    id: 5,
    name: "Kem mắt chống lão hóa",
    category: "Dưỡng da",
    sku: "KM-011",
    storage: "Kho Hà Nội",
    storage__position: "WH-HN/B-02",
    stock: 30,
    preorder: 28,
    available: 2,
    unit_price: "550000.00",
    total: "16500000.00",
    batch: "BATCH-2024-011",
    expired: "2025-10-05",
    status: "Thấp",
    moveHistory: [
      {
        id: 7,
        type: 2,
        type__name: "Xuất",
        date: "2026-03-27",
        code: "SO-033",
        from__code: "WH-HN/B-02",
        delta: -25,
      },
    ],
  },
  {
    id: 6,
    name: "Mặt nạ collagen 10 miếng",
    category: "Mặt nạ",
    sku: "MN-004",
    storage: "Kho TP.HCM",
    storage__position: "WH-HCM/A-01",
    stock: 45,
    preorder: 15,
    available: 30,
    unit_price: "320000.00",
    total: "14400000.00",
    batch: "BATCH-2024-004",
    expired: "2025-08-15",
    status: "OK",
    moveHistory: [
      {
        id: 8,
        type: 1,
        type__name: "Nhập",
        date: "2026-03-30",
        code: "PO-004",
        to__code: "WH-HCM/A-01",
        delta: 60,
      },
      {
        id: 9,
        type: 2,
        type__name: "Xuất",
        date: "2026-04-01",
        code: "SO-026",
        from__code: "WH-HCM/A-01",
        delta: -15,
      },
    ],
  },
  {
    id: 7,
    name: "Nước tẩy trang 3 trong 1",
    category: "Tẩy trang",
    sku: "NTT-010",
    storage: "Kho Đà Nẵng",
    storage__position: "WH-DN/A-02",
    stock: 140,
    preorder: 35,
    available: 105,
    unit_price: "195000.00",
    total: "27300000.00",
    batch: "BATCH-2024-010",
    expired: "2026-04-30",
    status: "OK",
    moveHistory: [
      {
        id: 10,
        type: 1,
        type__name: "Nhập",
        date: "2026-03-29",
        code: "PO-008",
        to__code: "WH-DN/A-02",
        delta: 200,
      },
      {
        id: 11,
        type: 2,
        type__name: "Xuất",
        date: "2026-04-01",
        code: "SO-032",
        from__code: "WH-DN/A-02",
        delta: -60,
      },
    ],
  },
  {
    id: 8,
    name: "Phấn nền BB cream",
    category: "Trang điểm",
    sku: "PN-009",
    storage: "Kho TP.HCM",
    storage__position: "WH-HCM/B-01",
    stock: 65,
    preorder: 20,
    available: 45,
    unit_price: "220000.00",
    total: "14300000.00",
    batch: "BATCH-2024-009",
    expired: "2025-07-15",
    status: "OK",
    moveHistory: [
      {
        id: 12,
        type: 1,
        type__name: "Nhập",
        date: "2026-04-01",
        code: "PO-007",
        to__code: "WH-HCM/B-01",
        delta: 100,
      },
      {
        id: 13,
        type: 2,
        type__name: "Xuất",
        date: "2026-04-02",
        code: "SO-031",
        from__code: "WH-HCM/B-01",
        delta: -35,
      },
    ],
  },
  {
    id: 9,
    name: "Serum Vitamin C 30ml",
    category: "Dưỡng da",
    sku: "SER-003",
    storage: "Kho Hà Nội",
    storage__position: "WH-HN/B-01",
    stock: 220,
    preorder: 40,
    available: 180,
    unit_price: "450000.00",
    total: "99000000.00",
    batch: "BATCH-2024-003",
    expired: "2025-12-31",
    status: "OK",
    moveHistory: [
      {
        id: 14,
        type: 1,
        type__name: "Nhập",
        date: "2026-04-01",
        code: "PO-003",
        to__code: "WH-HN/B-01",
        delta: 300,
      },
      {
        id: 15,
        type: 2,
        type__name: "Xuất",
        date: "2026-04-02",
        code: "SO-025",
        from__code: "WH-HN/B-01",
        delta: -80,
      },
    ],
  },
  {
    id: 10,
    name: "Son dưỡng môi vitamin E",
    category: "Trang điểm",
    sku: "SD-008",
    storage: "Kho Hà Nội",
    storage__position: "WH-HN/C-01",
    stock: 95,
    preorder: 45,
    available: 50,
    unit_price: "75000.00",
    total: "7100000.00",
    batch: "BATCH-2024-008",
    expired: "2026-02-28",
    status: "OK",
    moveHistory: [
      {
        id: 16,
        type: 1,
        type__name: "Nhập",
        date: "2026-04-04",
        code: "PO-006",
        to__code: "WH-HN/C-01",
        delta: 150,
      },
      {
        id: 17,
        type: 2,
        type__name: "Xuất",
        date: "2026-04-02",
        code: "SO-030",
        from__code: "WH-HN/C-01",
        delta: -55,
      },
    ],
  },
  {
    id: 11,
    name: "Sữa rửa mặt trà xanh 150ml",
    category: "Mỹ phẩm",
    sku: "SRM-002",
    storage: "Kho Hà Nội",
    storage__position: "WH-HN/A-02",
    stock: 85,
    preorder: 30,
    available: 55,
    unit_price: "150000.00",
    total: "12800000.00",
    batch: "BATCH-2024-002",
    expired: "2026-03-20",
    status: "OK",
    moveHistory: [
      {
        id: 18,
        type: 1,
        type__name: "Nhập",
        date: "2026-04-03",
        code: "PO-002",
        to__code: "WH-HN/A-02",
        delta: 100,
      },
      {
        id: 19,
        type: 2,
        type__name: "Xuất",
        date: "2026-04-04",
        code: "SO-025",
        from__code: "WH-HN/A-02",
        delta: -15,
      },
    ],
  },
  {
    id: 12,
    name: "Toner cân bằng da 200ml",
    category: "Dưỡng da",
    sku: "TN-005",
    storage: "Kho TP.HCM",
    storage__position: "WH-HCM/A-02",
    stock: 180,
    preorder: 25,
    available: 155,
    unit_price: "180000.00",
    total: "32400000.00",
    batch: "BATCH-2024-005",
    expired: "2026-06-30",
    status: "OK",
    moveHistory: [
      {
        id: 20,
        type: 1,
        type__name: "Nhập",
        date: "2026-04-02",
        code: "PO-005",
        to__code: "WH-HCM/A-02",
        delta: 200,
      },
      {
        id: 21,
        type: 2,
        type__name: "Xuất",
        date: "2026-04-04",
        code: "SO-025",
        from__code: "WH-HCM/A-02",
        delta: -15,
      },
    ],
  },
];

const storages = ["Kho Hà Nội", "Kho TP.HCM", "Kho Đà Nẵng"];

const categories = ["Chăm sóc tóc", "Dưỡng da", "Mỹ phẩm", "Mặt nạ", "Trang điểm", "Tẩy trang"];

const statuses = ["OK", "Thấp"];

const input = ref();
const selectedStorage = ref();
const selectedCategory = ref();
const selectedStatus = ref();

const filteredInvItems = computed(() => {
  const filteredByInput = invItems.filter((invItem) => {
    if (!input.value) return true;
    const values = Object.values(invItem);
    const strValues = values.filter((v) => typeof v === "string");
    return strValues.some((str) => str.toLowerCase().includes(input.value.toLowerCase()));
  });

  const filteredByStorage = filteredByInput.filter((invItem) => {
    if (!selectedStorage.value) return true;
    return invItem.storage === selectedStorage.value;
  });

  const filteredByCategory = filteredByStorage.filter((invItem) => {
    if (!selectedCategory.value) return true;
    return invItem.category === selectedCategory.value;
  });

  const filteredByStatus = filteredByCategory.filter((invItem) => {
    if (!selectedStatus.value) return true;
    return invItem.status === selectedStatus.value;
  });

  return filteredByStatus;
});

const selectedInvItem = ref(null);
</script>

<template>
  <div class="card">
    <div class="card-content">
      <div class="is-flex is-gap-2 is-align-items-center">
        <div class="field is-flex-grow-1 mb-0">
          <p class="control has-icons-left">
            <input
              v-model="input"
              class="input"
              type="text"
              placeholder="Tìm kiếm theo tên, SKU, barcode..."
            />
            <span class="icon is-small is-left">
              <Icon
                name="material-symbols:search-rounded"
                :size="20"
              />
            </span>
          </p>
        </div>
        <div class="select">
          <select v-model="selectedStorage">
            <option :value="undefined">Tất cả kho</option>
            <option
              v-for="storage in storages"
              :key="storage"
              :value="storage"
            >
              {{ storage }}
            </option>
          </select>
        </div>
        <div class="select">
          <select v-model="selectedCategory">
            <option :value="undefined">Tất cả danh mục</option>
            <option
              v-for="category in categories"
              :key="category"
              :value="category"
            >
              {{ category }}
            </option>
          </select>
        </div>
        <div class="select">
          <select v-model="selectedStatus">
            <option :value="undefined">Trạng thái tồn</option>
            <option
              v-for="status in statuses"
              :key="status"
              :value="status"
            >
              {{ status }}
            </option>
          </select>
        </div>
      </div>
    </div>
  </div>
  <div class="fixed-grid has-3-cols">
    <div class="grid">
      <div :class="['cell', selectedInvItem ? 'is-col-span-2' : 'is-col-span-3']">
        <div class="card is-clipped">
          <div class="card-content p-0">
            <p class="p-5 fs-17 font-semibold is-flex is-align-items-center is-gap-1">
              <Icon
                name="material-symbols:deployed-code-outline"
                :size="22"
              />
              <span>Danh sách tồn kho ({{ filteredInvItems.length }})</span>
            </p>
            <table class="table is-fullwidth is-hoverable fs-13">
              <thead>
                <tr>
                  <th class="font-semibold">Sản phẩm</th>
                  <th class="font-semibold">SKU</th>
                  <th class="font-semibold">Kho</th>
                  <th class="font-semibold">Vị trí</th>
                  <th class="font-semibold has-text-right">Tồn</th>
                  <th class="font-semibold has-text-right">Đặt trước</th>
                  <th class="font-semibold has-text-right">Khả dụng</th>
                  <th class="font-semibold">Batch</th>
                  <th class="font-semibold">Hạn sử dụng</th>
                  <th class="font-semibold">Trạng thái</th>
                </tr>
              </thead>
              <tbody>
                <InventoryRow
                  v-for="invItem in filteredInvItems"
                  :key="invItem.id"
                  :invItem="invItem"
                  :selected="invItem.id === selectedInvItem?.id"
                  @selectInvItem="
                    (id) => {
                      selectedInvItem = filteredInvItems.find((item) => item.id === id);
                    }
                  "
                  @unselect="selectedInvItem = null"
                />
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <SelectedInvItem
        :invItem="selectedInvItem"
        @unselect="selectedInvItem = null"
      />
    </div>
  </div>
</template>
