<script lang="ts">
  import DoubleRangeSlider from "@src/lib/components/DoubleRangeSlider.svelte";
  import iso3 from "./iso3.json";
  import countryList from "country-list-js";
  import onMount from "@src/optimizers/onMount";
  import Search from "lucide-svelte/icons/search";
  import X from "lucide-svelte/icons/x";
  import CustomScrollBar from "../../comps/CustomScrollBar.svelte";

  class Range {
    start: number = 0;
    end: number = 1;
  }

  let leftRange: Range = new Range();
  let rightRange: Range = new Range();

  function round(num: number): number {
    return Math.round(num * 10) / 10;
  }

  function isValidSelection() {
    if (leftRange.start == leftRange.end) return false;
    if (rightRange.start == rightRange.end) return false;
    return true;
  }

  let currentCountry: string = "";
  let currentCountrySelected: string = "";
  let interactiveEmbed: HTMLIFrameElement;
  let searchFilter: string = "";

  interface RegionFilter {
    region: string;
    selected: boolean;
  }
  const continents: string[] = countryList.continents();
  const regionFilters: RegionFilter[] = continents.map((name) => ({
    region: name,
    selected: false,
  }));

  function selectCountry(country: string, towards: boolean) {
    currentCountry =
      "https://deprived.dev/assets/school/social-science/data/interactive/" +
      country +
      "-" +
      (towards ? "in" : "out") +
      ".html";

    currentCountrySelected = towards
      ? "Others towards " + getCountryName(country)
      : getCountryName(country) + "'s opinion of others";

    setTimeout(() => {
      interactiveEmbed.scrollIntoView({
        behavior: "smooth",
        block: "end",
      });
    }, 200);
  }

  function getCountryName(code) {
    const uppercaseCode = code.toUpperCase();

    // Hardcoded historical and regional exceptions
    const exceptions = {
      YDYE: "People's Democratic Republic of Yemen",
      CMR: "Cameroon",
      CSK: "Czechoslovakia",
      YUG: "Yugoslavia",
      DDR: "German Democratic Republic",
      EU: "European Union",
    };

    if (exceptions[uppercaseCode]) {
      return exceptions[uppercaseCode];
    }

    const countryData = countryList.findByIso3(uppercaseCode);
    return countryData ? countryData.name : "Country not found";
  }

  onMount(() => {
    // selectCountry("DNK", true);
    console.log(countryList.findByIso3("DNK"));
  });
</script>

<div class="flex flex-col w-full h-full pt-40 gap-16 NotoSans">
  <div class="flex flex-col items-center justify-center w-full">
    <h1 class="text-4xl">Country Mention Networks in UN Speeches</h1>
    <div>Computational Social Science 02467 - group 10</div>
  </div>
  <div class="flex flex-col items-center justify-center w-full prose">
    <div class="flex gap-30 justify-between">
      <div>Negative range</div>
      <div>Positive range</div>
    </div>
    <div class="w-98">
      <div class="flex w-full justify-between">
        <div class="-ml-1.5">-1</div>
        <div>0</div>
        <div>1</div>
      </div>
      <div class="flex gap-8">
        <DoubleRangeSlider
          bind:start={leftRange.start}
          bind:end={leftRange.end}
        />
        <DoubleRangeSlider
          bind:start={rightRange.start}
          bind:end={rightRange.end}
        />
      </div>
      <div class="flex w-full justify-around">
        <div>
          -{round(1 - leftRange.start).toFixed(1)} --- -{round(
            1 - leftRange.end,
          ).toFixed(1)}
        </div>
        <div>
          {round(rightRange.start).toFixed(1)} --- {round(
            rightRange.end,
          ).toFixed(1)}
        </div>
      </div>
    </div>
    <div class="w-full flex justify-center max-h-screen">
      <img
        class="max-h-[80vh] object-contain"
        src={"https://deprived.dev/assets/school/social-science/data/plots/sentiment_graph_-" +
          round(1 - leftRange.end).toFixed(1) +
          "_-" +
          round(1 - leftRange.start).toFixed(1) +
          "_" +
          round(rightRange.start).toFixed(1) +
          "_" +
          round(rightRange.end).toFixed(1) +
          ".jpg"}
        alt=""
      />
    </div>
  </div>
  <div class="w-full flex flex-col items-center gap-10">
    <div class="w-80">
      <div class="text-4xl">Interactive graphs</div>
    </div>

    <div
      class="{currentCountry == '' ? 'hidden' : ''} relative"
      style="width: 80%; height: 800px;"
    >
      <div>{currentCountrySelected}</div>
      <div class="relative w-full h-full">
        <iframe
          src={currentCountry}
          width="100%"
          height="100%"
          style="border: none; background: transparent;"
          allowtransparency={true}
          title="Network Graph"
          bind:this={interactiveEmbed}
          class="relative"
        >
        </iframe>
        <button
          on:click={() => {
            currentCountrySelected = "";
            currentCountry = "";
          }}
          class="absolute right-0 top-0"
        >
          <X class="text-accent w-16 h-18 cursor-pointer" />
        </button>
      </div>
    </div>
    <div class="w-[60%]">
      <div class="flex justify-between">
        <div class="text-2xl">List of interactive graphs</div>

        <div class="join">
          <button
            class="btn btn-outline btn-disabled btn-accent join-item grid items-center justify-center"
          >
            <Search />
          </button>
          <input
            bind:value={searchFilter}
            type="text"
            class="input join-item"
          />
        </div>
      </div>
      <div class="italic opacity-60">
        The interactive graphs has to be filtered, due to the large amount of
        connections, making a full interactive graph, requires too much
        processing power.
      </div>

      <div class="py-4"></div>
      <div class="flex flex-wrap gap-2">
        <div class="">Filter by region:</div>
        {#each regionFilters as filter}
          <div class="join">
            <input
              type="checkbox"
              bind:checked={filter.selected}
              class="join-item checkbox"
            />
            <div class="input input-xs join-item">{filter.region}</div>
          </div>
        {/each}
      </div>
      <div class="py-2"></div>
      <CustomScrollBar
        overflowX="hidden"
        overflowY="auto"
        Class="h-[60vh] border border-base-200  "
        requireAbsolute={true}
        hideOnMobile={true}
      >
        <table class="table w-full border-separate border-spacing-0">
          <thead>
            <tr>
              <th class="sticky top-0 bg-base-100 z-10">Country</th>
              <th class="sticky top-0 bg-base-100 z-10">ISO3</th>
              <th class="sticky top-0 bg-base-100 z-10">From buttons</th>
              <th class="sticky top-0 bg-base-100 z-10">Towards buttons</th>
            </tr>
          </thead>
          <tbody>
            {#each iso3 as country}
              {#if (getCountryName(country)
                .toLowerCase()
                .includes(searchFilter.toLowerCase()) || country
                  .toLowerCase()
                  .includes(searchFilter.toLowerCase())) && (!regionFilters.some((r) => r.selected) || regionFilters.find((r) => r.region === countryList.findByIso3(country)?.continent)?.selected)}
                <!-- Changed your data cell wrappers from <th> to <td> for correct semantics -->
                <tr class="hover">
                  <td>{getCountryName(country)}</td>
                  <td>{country}</td>
                  <td>
                    <div class="w-full h-full grid items-center justify-center">
                      <button
                        on:click={() => selectCountry(country, false)}
                        class="btn btn-outline btn-primary">From</button
                      >
                    </div>
                  </td>
                  <td>
                    <div class="w-full h-full grid items-center justify-center">
                      <button
                        on:click={() => selectCountry(country, true)}
                        class="btn btn-outline btn-secondary">Towards</button
                      >
                    </div>
                  </td>
                </tr>
              {/if}
            {/each}
          </tbody>
        </table>
      </CustomScrollBar>
    </div>
  </div>
  <div class="flex justify-center w-full">
    <div class="flex flex-col">
      <div class="text-4xl">Sources</div>
      <div class="flex justify-center gap-8">
        <a
          class="link link-primary"
          href="https://git.deprived.dev/DeprivedDevs/deprived-main-website/src/branch/main/src/routes/school/css"
          >Website repository</a
        >
        <a
          class="link link-primary"
          href="https://github.com/MagicBOTAlex/Social-Informatik-02467-project"
          >Python repository</a
        >
        <a
          class="link link-primary"
          href="https://www.kaggle.com/datasets/unitednations/un-general-debates"
          >Dataset from kaggle</a
        >
      </div>
    </div>
  </div>

  <div class="py-8"></div>
</div>
