---
import CaseCard from "./CaseCard.astro";

// Массив из 12 дел
const allCases = [
  {
    id: "1",
    title: "Возмещение ущерба при ДТП с участием грузового транспорта",
    category: "Административное",
    result: "won" as const,
    amount: "₽3.2 млн",
    date: "2024-01-15",
    description:
      "Взыскание ущерба с виновника ДТП и страховой компании после отказа в выплате по факту превышения лимита ОСАГО.",
    tag: "ДТП",
    complexity: "medium",
  },
  {
    id: "2",
    title:
      "Защита при обвинении по ст. 228 УК РФ (незаконный оборот наркотиков)",
    category: "Уголовное",
    result: "settled" as const,
    date: "2023-12-10",
    description:
      "Доказано нарушение правил хранения вещественных доказательств. Дело прекращено за отсутствием состава преступления.",
    tag: "Отказ в возбуждении",
    complexity: "high",
  },
  {
    id: "3",
    title: "Арбитражный спор о взыскании задолженности по договору поставки",
    category: "Арбитраж",
    result: "won" as const,
    amount: "₽18.5 млн",
    date: "2024-03-22",
    description:
      "Взыскание основного долга, процентов и неустойки с контрагента, злоупотреблявшего правом на отсрочку платежа.",
    tag: "Взыскание долга",
    complexity: "high",
  },
  {
    id: "4",
    title:
      "Раздел совместно нажитого имущества супругов стоимостью более 50 млн",
    category: "Семейное",
    result: "settled" as const,
    amount: "Сохранено 70%",
    date: "2024-02-14",
    description:
      "Достигнуто мирное соглашение, позволившее клиенту сохранить бизнес и недвижимость без длительных судебных разбирательств.",
    tag: "Медиация",
    complexity: "medium",
  },
  {
    id: "5",
    title: "Оспаривание кадастровой стоимости торгового центра",
    category: "Гражданское",
    result: "won" as const,
    amount: "₽8.9 млн налогов",
    date: "2023-11-30",
    description:
      "Снижение кадастровой стоимости на 40%, что привело к существенной экономии на налоге на имущество в последующие годы.",
    tag: "Налоги",
    complexity: "medium",
  },
  {
    id: "6",
    title:
      "Защита директора по делу о банкротстве с признаками преднамеренного",
    category: "Уголовное",
    result: "ongoing" as const,
    date: "2024-04-05",
    description:
      "Доказывание добросовестности руководителя при банкротстве предприятия, отсутствия ущерба кредиторам.",
    tag: "Субсидиарная ответственность",
    complexity: "high",
  },
  {
    id: "7",
    title: "Взыскание неустойки с застройщика за просрочку сдачи квартиры",
    category: "Гражданское",
    result: "won" as const,
    amount: "₽2.8 млн",
    date: "2024-05-18",
    description:
      "Успешное взыскание неустойки по договору долевого участия с одновременным сохранением права собственности.",
    tag: "ДДУ",
    complexity: "low",
  },
  {
    id: "8",
    title: "Защита бизнеса от рейдерского захвата через подложные документы",
    category: "Арбитраж",
    result: "won" as const,
    amount: "Сохранён бизнес",
    date: "2024-06-12",
    description:
      "Оспаривание сделок по передаче долей в уставном капитале, совершённых с использованием поддельных подписей.",
    tag: "Корпоративные споры",
    complexity: "high",
  },
  {
    id: "9",
    title: "Прекращение уголовного дела о мошенничестве в сфере строительства",
    category: "Уголовное",
    result: "settled" as const,
    date: "2024-07-20",
    description:
      "Доказано отсутствие умысла на хищение денежных средств инвесторов при реализации проекта.",
    tag: "Прекращение дела",
    complexity: "high",
  },
  {
    id: "10",
    title: "Восстановление на работе и компенсация морального вреда",
    category: "Трудовое",
    result: "won" as const,
    amount: "₽1.5 млн",
    date: "2024-08-03",
    description:
      "Успешное оспаривание незаконного увольнения с восстановлением на прежней должности и выплатой среднего заработка.",
    tag: "Увольнение",
    complexity: "low",
  },
  {
    id: "11",
    title: "Защита интеллектуальной собственности — товарный знак",
    category: "Гражданское",
    result: "ongoing" as const,
    date: "2024-09-15",
    description:
      "Судебное пресечение незаконного использования зарегистрированного товарного знака конкурентом.",
    tag: "Авторское право",
    complexity: "medium",
  },
  {
    id: "12",
    title: "Оспаривание решения налоговой о доначислении НДС",
    category: "Налоговое",
    result: "won" as const,
    amount: "₽24 млн",
    date: "2024-10-08",
    description:
      "Отмена акта налоговой проверки и решения о привлечении к ответственности по сделкам с контрагентами.",
    tag: "Налоговые споры",
    complexity: "high",
  },
];

// Уникальные категории для фильтров
const categories = ["Все", ...new Set(allCases.map((c) => c.category))];
---

<section class="py-16 px-4 bg-gray-50" id="cases-grid">
  <div class="w-full px-4 md:container md:mx-auto md:px-4 md:max-w-7xl">
    <!-- Заголовок -->
    <div class="mb-8">
      <h2 class="text-2xl font-bold text-gray-900">Последние дела</h2>
      <p class="text-gray-500 mt-2">
        Выберите категорию для фильтрации или сортировку
      </p>
    </div>

    <!-- Фильтры по категориями (табы) -->
    <div class="flex flex-wrap gap-2 mb-6" id="category-filters">
      {
        categories.map((category, index) => (
          <button
            class={`category-filter px-4 py-2 rounded-full text-sm font-medium transition-all border cursor-pointer hover:cursor-pointer ${index === 0 ? "bg-[var(--color-navy)] text-white border-[var(--color-navy)]" : "bg-white text-gray-600 border-gray-200 hover:border-[var(--color-gold)] hover:text-[var(--color-gold)]"}`}
            data-category={category}
          >
            {category}
          </button>
        ))
      }
    </div>

    <!-- Сортировка -->
    <div class="flex items-center gap-3 mb-10 pb-6 border-b border-gray-200">
      <span class="text-sm text-gray-500 font-medium">Сортировать по:</span>
      <div class="flex gap-2">
        <button
          class="sort-btn active px-4 py-2 rounded-lg text-sm font-medium bg-[var(--color-gold)]/10 text-[var(--color-gold)] border border-[var(--color-gold)] cursor-pointer hover:cursor-pointer"
          data-sort="date-desc"
        >
          Дате ↓
        </button>
        <button
          class="sort-btn px-4 py-2 rounded-lg text-sm font-medium bg-white text-gray-600 border border-gray-200 hover:border-[var(--color-gold)] cursor-pointer hover:cursor-pointer"
          data-sort="amount-desc"
        >
          Сумме ↓
        </button>
        <button
          class="sort-btn px-4 py-2 rounded-lg text-sm font-medium bg-white text-gray-600 border border-gray-200 hover:border-[var(--color-gold)] cursor-pointer hover:cursor-pointer"
          data-sort="complexity-desc"
        >
          Сложности ↓
        </button>
      </div>
    </div>

    <!-- Сетка -->
    <div
      class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
      id="cases-container"
    >
      {
        allCases.map((caseItem) => (
          <div
            class="case-item"
            data-category={caseItem.category}
            data-date={caseItem.date}
            data-amount={caseItem.amount}
            data-complexity={caseItem.complexity}
            data-id={caseItem.id}
          >
            <CaseCard case={caseItem} />
          </div>
        ))
      }
    </div>

    <!-- Сообщение "Нет дел" -->
    <div id="no-cases-msg" class="hidden text-center py-16">
      <div class="text-6xl mb-4">📁</div>
      <h3 class="text-xl font-bold text-gray-900 mb-2">Дела не найдены</h3>
      <p class="text-gray-500">Выберите другую категорию</p>
    </div>

    <!-- Пагинация/Загрузить еще -->
    <div class="mt-12 text-center" id="load-more-container">
      <button
        id="load-more-btn"
        class="inline-flex items-center gap-3 px-8 py-4 bg-white border-2 border-gray-200 rounded-xl font-bold text-gray-700 hover:border-[var(--color-gold)] hover:text-[var(--color-gold)] transition-all group cursor-pointer hover:cursor-pointer"
      >
        <span>Загрузить еще дела</span>
        <span id="remaining-count" class="text-sm text-gray-400 font-normal"
          >(осталось 6)</span
        >
        <svg
          class="w-5 h-5 transform group-hover:translate-y-1 transition-transform"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M19 9l-7 7-7-7"></path>
        </svg>
      </button>

      <p id="all-loaded-msg" class="hidden text-gray-500 font-medium">
        Все дела загружены
      </p>
    </div>
  </div>
</section>

<script>
  // Данные всех дел
  const allCasesData = [
    {
      id: "1",
      category: "Административное",
      date: "2024-01-15",
      amount: "₽3.2 млн",
      complexity: "medium",
      amountValue: 3.2,
    },
    {
      id: "2",
      category: "Уголовное",
      date: "2023-12-10",
      amount: null,
      complexity: "high",
      amountValue: 0,
    },
    {
      id: "3",
      category: "Арбитраж",
      date: "2024-03-22",
      amount: "₽18.5 млн",
      complexity: "high",
      amountValue: 18.5,
    },
    {
      id: "4",
      category: "Семейное",
      date: "2024-02-14",
      amount: "Сохранено 70%",
      complexity: "medium",
      amountValue: 35,
    },
    {
      id: "5",
      category: "Гражданское",
      date: "2023-11-30",
      amount: "₽8.9 млн налогов",
      complexity: "medium",
      amountValue: 8.9,
    },
    {
      id: "6",
      category: "Уголовное",
      date: "2024-04-05",
      amount: null,
      complexity: "high",
      amountValue: 0,
    },
    {
      id: "7",
      category: "Гражданское",
      date: "2024-05-18",
      amount: "₽2.8 млн",
      complexity: "low",
      amountValue: 2.8,
    },
    {
      id: "8",
      category: "Арбитраж",
      date: "2024-06-12",
      amount: "Сохранён бизнес",
      complexity: "high",
      amountValue: 50,
    },
    {
      id: "9",
      category: "Уголовное",
      date: "2024-07-20",
      amount: null,
      complexity: "high",
      amountValue: 0,
    },
    {
      id: "10",
      category: "Трудовое",
      date: "2024-08-03",
      amount: "₽1.5 млн",
      complexity: "low",
      amountValue: 1.5,
    },
    {
      id: "11",
      category: "Гражданское",
      date: "2024-09-15",
      amount: null,
      complexity: "medium",
      amountValue: 0,
    },
    {
      id: "12",
      category: "Налоговое",
      date: "2024-10-08",
      amount: "₽24 млн",
      complexity: "high",
      amountValue: 24,
    },
  ];

  let currentCategory = "Все";
  let currentSort = "date-desc";
  let visibleCount = 6;
  const batchSize = 3;

  const caseItems = document.querySelectorAll(".case-item");
  const categoryButtons = document.querySelectorAll(".category-filter");
  const sortButtons = document.querySelectorAll(".sort-btn");
  const loadMoreBtn = document.getElementById("load-more-btn");
  const remainingCount = document.getElementById("remaining-count");
  const allLoadedMsg = document.getElementById("all-loaded-msg");
  const noCasesMsg = document.getElementById("no-cases-msg");
  const loadMoreContainer = document.getElementById("load-more-container");

  // Фильтрация по категории
  categoryButtons.forEach((btn) => {
    btn.addEventListener("click", () => {
      // Обновляем активную кнопку
      categoryButtons.forEach((b) => {
        b.classList.remove(
          "bg-[var(--color-navy)]",
          "text-white",
          "border-[var(--color-navy)]",
        );
        b.classList.add("bg-white", "text-gray-600", "border-gray-200");
      });
      btn.classList.remove("bg-white", "text-gray-600", "border-gray-200");
      btn.classList.add(
        "bg-[var(--color-navy)]",
        "text-white",
        "border-[var(--color-navy)]",
      );

      currentCategory = btn.dataset.category || "Все";
      visibleCount = 6; // Сбрасываем при смене фильтра
      applyFiltersAndSort();
    });
  });

  // Сортировка
  sortButtons.forEach((btn) => {
    btn.addEventListener("click", () => {
      sortButtons.forEach((b) => {
        b.classList.remove(
          "bg-[var(--color-gold)]/10",
          "text-[var(--color-gold)]",
          "border-[var(--color-gold)]",
        );
        b.classList.add("bg-white", "text-gray-600", "border-gray-200");
      });
      btn.classList.remove("bg-white", "text-gray-600", "border-gray-200");
      btn.classList.add(
        "bg-[var(--color-gold)]/10",
        "text-[var(--color-gold)]",
        "border-[var(--color-gold)]",
      );

      currentSort = btn.dataset.sort || "date-desc";
      applyFiltersAndSort();
    });
  });

  // Применить фильтры и сортировку
  function applyFiltersAndSort() {
    let filtered = Array.from(caseItems);

    // Фильтр по категории
    if (currentCategory !== "Все") {
      filtered = filtered.filter(
        (item) => item.dataset.category === currentCategory,
      );
    }

    // Сортировка
    filtered.sort((a, b) => {
      const aId = a.dataset.id;
      const bId = b.dataset.id;
      const aData = allCasesData.find((c) => c.id === aId);
      const bData = allCasesData.find((c) => c.id === bId);

      if (!aData || !bData) return 0;

      switch (currentSort) {
        case "date-desc":
          return (
            new Date(bData.date).getTime() - new Date(aData.date).getTime()
          );
        case "amount-desc":
          return bData.amountValue - aData.amountValue;
        case "complexity-desc":
          const complexityOrder = { high: 3, medium: 2, low: 1 };
          return (
            complexityOrder[bData.complexity] -
            complexityOrder[aData.complexity]
          );
        default:
          return 0;
      }
    });

    // Скрываем все
    caseItems.forEach((item) => {
      item.classList.add("hidden");
      item.classList.remove("animate-fade-in");
    });

    // Показываем отфильтрованные с учётом лимита
    const toShow = filtered.slice(0, visibleCount);
    toShow.forEach((item, index) => {
      item.classList.remove("hidden");
      // Добавляем анимацию только при первой загрузке или смене фильтра
      if (index < 6) {
        setTimeout(() => item.classList.add("animate-fade-in"), index * 50);
      }
    });

    // Проверяем, есть ли дела
    if (filtered.length === 0) {
      noCasesMsg?.classList.remove("hidden");
      loadMoreContainer?.classList.add("hidden");
    } else {
      noCasesMsg?.classList.add("hidden");
      loadMoreContainer?.classList.remove("hidden");
    }

    // Обновляем кнопку "Загрузить ещё"
    const remaining = filtered.length - visibleCount;
    if (remainingCount) {
      if (remaining > 0) {
        remainingCount.textContent = `(осталось ${remaining})`;
        loadMoreBtn?.classList.remove("hidden");
        allLoadedMsg?.classList.add("hidden");
      } else {
        remainingCount.textContent = "";
        loadMoreBtn?.classList.add("hidden");
        allLoadedMsg?.classList.remove("hidden");
      }
    }
  }

  // Загрузить ещё
  loadMoreBtn?.addEventListener("click", () => {
    visibleCount += batchSize;
    applyFiltersAndSort();
  });

  // Инициализация
  applyFiltersAndSort();
</script>

<style>
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
  }

  .case-item {
    transition: all 0.3s ease;
  }

  .category-filter {
    white-space: nowrap;
  }

  @media (max-width: 640px) {
    .category-filter {
      font-size: 12px;
      padding: 6px 12px;
    }
  }
</style>
