<script lang="ts">
  import { numberOfUnreadNotification } from "$lib/store";
  import ArrowLogo from "lucide-svelte/icons/move-up-right";
  import { Chart } from "svelte-echarts";
  import Lazy from "$lib/components/Lazy.svelte";

  import { init, use } from "echarts/core";
  import { LineChart, BarChart } from "echarts/charts";
  import { GridComponent, TooltipComponent } from "echarts/components";
  import { CanvasRenderer } from "echarts/renderers";
  import { onMount } from "svelte";
  import { goto } from "$app/navigation";
  use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]);

  export let data;

  let isLoaded = false;
  let rawData;
  let tableList = [];
  let optionsData;
  let optionsCPI;
  let optionsGDP;
  let optionsInflation;
  let optionsFedFundRate;

  let filterRule = "annual";
  let activeIdx = 0;

  const tabs = [
    {
      title: "Annual",
    },
    {
      title: "Quarterly",
    },
  ];

  let timePeriod = "threeYears";
  const monthNames = [
    "Jan",
    "Feb",
    "Mar",
    "Apr",
    "May",
    "Jun",
    "Jul",
    "Aug",
    "Sep",
    "Oct",
    "Nov",
    "Dec",
  ];

  const treasuryLabel = {
    month1: "1-Month",
    month2: "2-Month",
    month3: "3-Month",
    month6: "6-Month",
    year1: "1-Year",
    year2: "2-Year",
    year3: "3-Year",
    year5: "5-Year",
    year7: "7-Year",
    year10: "10-Year",
    year20: "20-Year",
    year30: "30-Year",
  };

  function filterEndOfYearDates(data) {
    // Step 1: Group data by year
    const groupedByYear = data.reduce((acc, item) => {
      const year = new Date(item.date).getFullYear();
      if (!acc[year]) {
        acc[year] = [];
      }
      acc[year].push(item);
      return acc;
    }, {});

    // Step 2: For each year, find the entry with the latest date
    const annualData = Object.values(groupedByYear).map((yearData) => {
      return yearData.reduce((latest, current) => {
        return new Date(latest.date) > new Date(current.date)
          ? latest
          : current;
      });
    });

    return annualData;
  }

  function filterEndOfQuarterDates(data) {
    // Step 1: Group data by year and quarter
    const groupedByQuarter = data?.reduce((acc, item) => {
      const date = new Date(item?.date);
      const year = date.getFullYear();
      const quarter = Math?.floor(date?.getMonth() / 3) + 1; // Get the quarter (1-4)

      const key = `${year}-Q${quarter}`;
      if (!acc[key]) {
        acc[key] = [];
      }
      acc[key].push(item);
      return acc;
    }, {});

    // Step 2: For each year-quarter group, find the entry with the latest date
    const quarterlyData = Object?.values(groupedByQuarter)?.map(
      (quarterData) => {
        return quarterData?.reduce((latest, current) => {
          return new Date(latest?.date) > new Date(current?.date)
            ? latest
            : current;
        });
      },
    );

    return quarterlyData;
  }

  function changeTablePeriod(index) {
    activeIdx = index;
    if (activeIdx === 0) {
      tableList = filterEndOfYearDates(rawData);
    } else {
      if (data?.user?.tier === "Pro") {
        tableList = filterEndOfQuarterDates(rawData);
      } else {
        goto("/pricing");
      }
    }
    tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date));
  }

  async function changeStatement(event) {
    timePeriod = event.target.value;

    optionsData = await plotData();
  }

  // Function to filter data by a specified time period
  function filterDataByTimePeriod(rawData, timePeriod) {
    let dates = [];
    let seriesData = {};

    const now = new Date();

    // Calculate the date threshold based on the selected time period
    let thresholdDate;
    switch (timePeriod) {
      case "oneMonth":
        thresholdDate = new Date(now);
        thresholdDate.setMonth(now.getMonth() - 1);
        break;
      case "sixMonths":
        thresholdDate = new Date(now);
        thresholdDate.setMonth(now.getMonth() - 6);
        break;
      case "oneYear":
        thresholdDate = new Date(now);
        thresholdDate.setFullYear(now.getFullYear() - 1);
        break;
      case "threeYears":
        thresholdDate = new Date(now);
        thresholdDate.setFullYear(now.getFullYear() - 3);
        break;
      case "fiveYears":
        thresholdDate = new Date(now);
        thresholdDate.setFullYear(now.getFullYear() - 5);
        break;
      case "tenYears":
        thresholdDate = new Date(now);
        thresholdDate.setFullYear(now.getFullYear() - 10);
        break;
      case "max":
      default:
        thresholdDate = new Date(0); // Set to the earliest possible date
        break;
    }

    // Filter the data based on the threshold date
    rawData?.forEach((item) => {
      const itemDate = new Date(item?.date);
      if (itemDate >= thresholdDate) {
        dates.push(item?.date);

        // Iterate over each key in the item, except for 'date'
        Object.keys(item).forEach((key) => {
          if (key !== "date") {
            // Initialize the array if it doesn't exist
            if (!seriesData[key]) {
              seriesData[key] = [];
            }
            // Push the corresponding value into the appropriate array
            seriesData[key].push(item[key]);
          }
        });
      }
    });

    return { dates, seriesData };
  }

  // Function to plot data based on a specified time period
  async function plotData() {
    // Get the filtered data based on the selected time period
    const { dates, seriesData } = filterDataByTimePeriod(rawData, timePeriod);

    // Convert seriesData to the format required by the series property
    let series = Object?.keys(seriesData).map((key) => {
      return {
        name: treasuryLabel[key],
        data: seriesData[key],
        type: "line",
        smooth: true,
        showSymbol: false,
      };
    });

    const options = {
      animation: false,
      grid: {
        left: "2%",
        right: "2%",
        bottom: "2%",
        top: "10%",
        containLabel: true,
      },
      xAxis: {
        axisLabel: {
          color: "#fff",
          formatter: function (value) {
            // Assuming dates are in the format 'yyyy-mm-dd'
            // Extract the month and day from the date string and convert the month to its abbreviated name
            const dateParts = value.split("-");
            const year = dateParts[0].substring(2); // Extracting the last two digits of the year
            const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
            return `${monthNames[monthIndex]} '${year}`;
          },
        },
        data: dates,
        type: "category",
      },
      yAxis: [
        {
          type: "value",
          splitLine: {
            show: false, // Disable x-axis grid lines
          },
          axisLabel: {
            show: false,
          },
        },
        {
          type: "value",
          splitLine: {
            show: false, // Disable x-axis grid lines
          },
        },
      ],
      series: series, // Use the dynamically created series array
      tooltip: {
        trigger: "axis",
        hideDelay: 100,
      },
    };

    return options;
  }

  async function plotCPI() {
    // Get the filtered data based on the selected time period
    let dates = [];
    let valueList = [];
    // Iterate over the data and extract required information
    data?.getEconomicIndicator?.cpi?.forEach((item) => {
      dates?.push(item?.date);
      valueList?.push(item?.value);
    });

    const options = {
      animation: false,
      grid: {
        left: "2%",
        right: "2%",
        bottom: "2%",
        top: "10%",
        containLabel: true,
      },
      xAxis: {
        axisLabel: {
          color: "#fff",
          formatter: function (value) {
            // Assuming dates are in the format 'yyyy-mm-dd'
            // Extract the month and day from the date string and convert the month to its abbreviated name
            const dateParts = value.split("-");
            const year = dateParts[0].substring(2); // Extracting the last two digits of the year
            const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
            return `${monthNames[monthIndex]} '${year}`;
          },
        },
        data: dates,
        type: "category",
      },
      yAxis: [
        {
          type: "value",
          splitLine: {
            show: false, // Disable x-axis grid lines
          },
          axisLabel: {
            show: false,
          },
        },
        {
          type: "value",
          splitLine: {
            show: false, // Disable x-axis grid lines
          },
        },
      ],
      series: {
        name: "CPI",
        data: valueList,
        type: "line",
        areaStyle: { opacity: 0.2 },
        smooth: true,
        symbol: "none",
        itemStyle: {
          color: "#fff",
        },
      },
      tooltip: {
        trigger: "axis",
        hideDelay: 100,
      },
    };

    return options;
  }

  async function plotGDP() {
    // Get the filtered data based on the selected time period
    let dates = [];
    let gdpList = [];
    let realGDPList = [];
    let realGDPPerCapitaList = [];
    // Iterate over the data and extract required information
    data?.getEconomicIndicator?.gdp?.forEach((item) => {
      dates?.push(item?.date);
      gdpList?.push(item?.value);
    });

    data?.getEconomicIndicator?.realGDP?.forEach((item) => {
      realGDPList?.push(item?.value);
    });

    data?.getEconomicIndicator?.realGDPPerCapita?.forEach((item) => {
      realGDPPerCapitaList?.push(item?.value);
    });

    const options = {
      animation: false,
      grid: {
        left: "2%",
        right: "2%",
        bottom: "2%",
        top: "10%",
        containLabel: true,
      },
      xAxis: {
        axisLabel: {
          color: "#fff",
          formatter: function (value) {
            // Assuming dates are in the format 'yyyy-mm-dd'
            // Extract the month and day from the date string and convert the month to its abbreviated name
            const dateParts = value.split("-");
            const year = dateParts[0].substring(2); // Extracting the last two digits of the year
            const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
            return `${monthNames[monthIndex]} '${year}`;
          },
        },
        data: dates,
        type: "category",
      },
      yAxis: [
        {
          type: "value",
          splitLine: {
            show: false, // Disable x-axis grid lines
          },
          axisLabel: {
            show: false,
          },
        },
        {
          type: "value",
          splitLine: {
            show: false, // Disable x-axis grid lines
          },
          axisLabel: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: "GDP",
          data: gdpList,
          type: "line",
          smooth: true,
          showSymbol: false,
        },
        {
          name: "Real GDP",
          data: realGDPList,
          type: "line",
          smooth: true,
          showSymbol: false,
        },
        {
          name: "Real GDP Per Capita",
          data: realGDPPerCapitaList,
          type: "line",
          yAxisIndex: 1,
          smooth: true,
          showSymbol: false,
        },
      ],
      tooltip: {
        trigger: "axis",
        hideDelay: 100,
      },
    };

    return options;
  }

  async function plotInflation() {
    // Get the filtered data based on the selected time period
    let dates = [];
    let inflationRateList = [];
    let recessionList = [];
    // Iterate over the data and extract required information
    data?.getEconomicIndicator?.inflationRate?.forEach((item) => {
      dates?.push(item?.date);
      inflationRateList?.push(item?.value);
    });

    data?.getEconomicIndicator?.unemploymentRate?.forEach((item) => {
      recessionList?.push(item?.value);
    });

    const options = {
      animation: false,
      grid: {
        left: "2%",
        right: "2%",
        bottom: "2%",
        top: "10%",
        containLabel: true,
      },
      xAxis: {
        axisLabel: {
          color: "#fff",
          formatter: function (value) {
            // Assuming dates are in the format 'yyyy-mm-dd'
            // Extract the month and day from the date string and convert the month to its abbreviated name
            const dateParts = value.split("-");
            const year = dateParts[0].substring(2); // Extracting the last two digits of the year
            const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
            return `${monthNames[monthIndex]} '${year}`;
          },
        },
        data: dates,
        type: "category",
      },
      yAxis: [
        {
          type: "value",
          splitLine: {
            show: false, // Disable x-axis grid lines
          },
          axisLabel: {
            show: false,
          },
        },
        {
          type: "value",
          splitLine: {
            show: false, // Disable x-axis grid lines
          },
          axisLabel: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: "Inflation Rate",
          data: inflationRateList,
          type: "line",
          smooth: true,
          showSymbol: false,
        },
        {
          name: "Unemployment Rate",
          data: recessionList,
          yAxisIndex: 1,

          type: "line",
          smooth: true,
          showSymbol: false,
        },
      ],
      tooltip: {
        trigger: "axis",
        hideDelay: 100,
      },
    };

    return options;
  }

  async function plotFedFundRate() {
    // Get the filtered data based on the selected time period
    let dates = [];
    let valueList = [];
    // Iterate over the data and extract required information
    data?.getEconomicIndicator?.fedFundRate?.forEach((item) => {
      dates?.push(item?.date);
      valueList?.push(item?.value);
    });

    const options = {
      animation: false,
      grid: {
        left: "2%",
        right: "2%",
        bottom: "2%",
        top: "10%",
        containLabel: true,
      },
      xAxis: {
        axisLabel: {
          color: "#fff",
          formatter: function (value) {
            // Assuming dates are in the format 'yyyy-mm-dd'
            // Extract the month and day from the date string and convert the month to its abbreviated name
            const dateParts = value.split("-");
            const year = dateParts[0].substring(2); // Extracting the last two digits of the year
            const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
            return `${monthNames[monthIndex]} '${year}`;
          },
        },
        data: dates,
        type: "category",
      },
      yAxis: [
        {
          type: "value",
          splitLine: {
            show: false, // Disable x-axis grid lines
          },
          axisLabel: {
            show: false,
          },
        },
        {
          type: "value",
          splitLine: {
            show: false, // Disable x-axis grid lines
          },
        },
      ],
      series: {
        name: "Fed Fund Rate",
        data: valueList,
        type: "line",
        areaStyle: { opacity: 0.2 },
        smooth: true,
        symbol: "none",
        itemStyle: {
          color: "#fff",
        },
      },
      tooltip: {
        trigger: "axis",
        hideDelay: 100,
      },
    };

    return options;
  }

  onMount(async () => {
    rawData = data?.getEconomicIndicator?.treasury ?? {};

    // Run the async functions concurrently
    [
      optionsData,
      optionsCPI,
      optionsGDP,
      optionsInflation,
      optionsFedFundRate,
    ] = await Promise.all([
      plotData(),
      plotCPI(),
      plotGDP(),
      plotInflation(),
      plotFedFundRate(),
    ]);

    tableList = filterEndOfYearDates(rawData);
    tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date));

    isLoaded = true;
  });
</script>

<svelte:head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>
    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} US
    Economic Indicator · Stocknear
  </title>
  <meta
    name="description"
    content={`Economic indicators measure economic performance and identify growth trends.`}
  />

  <!-- Other meta tags -->
  <meta property="og:title" content={`US Economic Indicator · Stocknear`} />
  <meta
    property="og:description"
    content={`Economic indicators measure economic performance and identify growth trends.`}
  />
  <meta property="og:type" content="website" />
  <!-- Add more Open Graph meta tags as needed -->

  <!-- Twitter specific meta tags -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content={`US Economic Indicator · Stocknear`} />
  <meta
    name="twitter:description"
    content={`Economic indicators measure economic performance and identify growth trends.`}
  />
  <!-- Add more Twitter meta tags as needed -->
</svelte:head>

<section
  class="w-full max-w-screen-2xl overflow-hidden min-h-screen pb-20 pt-5 px-4 lg:px-3"
>
  <div class="text-sm sm:text-[1rem] breadcrumbs">
    <ul>
      <li><a href="/" class="text-gray-300">Home</a></li>
      <li class="text-gray-300">US Economic Indicator</li>
    </ul>
  </div>

  <div class="w-full overflow-hidden m-auto mt-5">
    <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
      <div
        class="relative flex justify-center items-start overflow-hidden w-full"
      >
        <main class="w-full lg:w-3/4 lg:pr-5">
          <div class="mb-6 border-b-[2px]">
            <h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
              Economic Indicators
            </h1>
          </div>

          {#if isLoaded}
            <div
              class="mb-8 w-full text-start sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-md h-auto p-5"
            >
              <svg
                class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 256 256"
                ><path
                  fill="#fff"
                  d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
                /></svg
              >
              Real-time and historical data on key economic indicators like GDP,
              unemployment, and inflation, essential for tracking economic performance
              and growth trends.
            </div>

            <div class="w-full m-auto mt-10">
              <h2 class="text-xl sm:text-2xl text-gray-200 font-bold">
                Federal Fund Rate
              </h2>

              <div class="text-[1rem] text-white mt-2 mb-2">
                The federal funds rate is the interest rate at which banks lend
                to each other overnight to maintain reserve balances. It's a
                critical tool for U.S. monetary policy, influencing borrowing
                costs for consumers and businesses, economic growth, and
                inflation. Changes in the federal funds rate affect everything
                from loan interest rates to stock market performance, making it
                a key indicator of economic health.
              </div>

              <Lazy>
                <div class="app w-full">
                  <Chart {init} options={optionsFedFundRate} class="chart" />
                </div>
              </Lazy>

              <h2
                class="text-xl sm:text-2xl text-gray-200 font-bold mt-20 sm:mt-10"
              >
                Consumer Price Index (CPI)
              </h2>

              <div class="text-[1rem] text-white mt-2 mb-2">
                The CPI measures the average change in prices for a typical
                basket of goods. It's key for tracking inflation, affecting
                interest rates, wages, and business decisions. Rising CPI
                indicates inflation, impacting purchasing power and the overall
                economy.
              </div>

              <Lazy>
                <div class="app w-full">
                  <Chart {init} options={optionsCPI} class="chart" />
                </div>
              </Lazy>

              <h2
                class="text-xl sm:text-2xl text-gray-200 font-bold mt-20 sm:mt-10"
              >
                Gross Domestic Product (GDP)
              </h2>

              <div class="text-[1rem] text-white mt-2 mb-2">
                The GDP measures a country's economic performance, representing
                the total value of all goods and services produced within a
                specific period. It's a key indicator of economic health, used
                to compare the economic output of different nations and track
                growth or decline over time.
              </div>

              <Lazy>
                <div class="app w-full">
                  <Chart {init} options={optionsGDP} class="chart" />
                </div>
              </Lazy>

              <h2
                class="text-xl sm:text-2xl text-gray-200 font-bold mt-20 sm:mt-10"
              >
                Unemployment Rate vs Inflation Rate
              </h2>

              <div class="text-[1rem] text-white mt-2 mb-2">
                The unemployment rate measures the jobless percentage in the
                labor force, impacting spending and growth. Low unemployment
                boosts wages and activity, while high unemployment slows them.
                The inflation rate tracks price increases, with moderate
                inflation (~2%) being healthy. These rates are often inversely
                related and crucial for economic stability, influencing
                spending, savings, and investment.
              </div>

              <Lazy>
                <div class="app w-full">
                  <Chart {init} options={optionsInflation} class="chart" />
                </div>
              </Lazy>

              <h2
                class="text-xl sm:text-2xl text-gray-200 font-bold mt-20 sm:mt-10"
              >
                Treasury Rates
              </h2>

              <div class="text-[1rem] text-white mt-2 mb-2">
                Treasury rates are the interest rates that the US government
                pays on its debt obligations, and they are a key benchmark for
                interest rates across the economy.
              </div>

              <div class="w-full text-white">
                <div class="relative flex justify-end">
                  <select
                    class="w-24 select select-bordered select-sm p-0 pl-5 bg-secondary"
                    on:change={changeStatement}
                  >
                    <option disabled>Choose a Time Period</option>
                    <option value="oneMonth">1M</option>
                    <option value="sixMonths">6M</option>
                    <option value="oneYear">1Y</option>
                    <option value="threeYears" selected>3Y</option>
                    <option value="fiveYears">5Y</option>
                    <option value="max">Max</option>
                  </select>
                </div>
              </div>
              <Lazy>
                <div class="app w-full">
                  <Chart {init} options={optionsData} class="chart" />
                </div>
              </Lazy>

              <div
                class="mt-10 mb-4 bg-secondary w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 flex justify-center sm:justify-end items-center ml-auto"
              >
                {#each tabs as item, i}
                  <button
                    on:click={() => changeTablePeriod(i)}
                    class="group relative z-[1] rounded-full px-6 py-1 {activeIdx ===
                    i
                      ? 'z-0'
                      : ''} "
                  >
                    {#if activeIdx === i}
                      <div class="absolute inset-0 rounded-md bg-[#fff]"></div>
                    {/if}
                    <span
                      class="relative text-sm block font-semibold {activeIdx ===
                      i
                        ? 'text-black'
                        : 'text-white'}"
                    >
                      {item.title}
                      <svg
                        class="{data?.user?.tier !== 'Pro' && i === 1
                          ? ''
                          : 'hidden'} inline-block ml-0.5 -mt-1 w-3.5 h-3.5"
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        ><path
                          fill="#fff"
                          d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
                        /></svg
                      >
                    </span>
                  </button>
                {/each}
              </div>

              <div class="w-full overflow-x-scroll">
                <table
                  class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
                >
                  <thead>
                    <tr class="border border-gray-600">
                      <th
                        class="text-white font-semibold text-start text-sm sm:text-[1rem]"
                        >Date</th
                      >
                      <th
                        class="text-white font-semibold text-end text-sm sm:text-[1rem]"
                        >1-Month</th
                      >
                      <th
                        class="text-white font-semibold text-end text-sm sm:text-[1rem]"
                        >2-Month</th
                      >
                      <th
                        class="text-white font-semibold text-end text-sm sm:text-[1rem]"
                        >3-Month</th
                      >
                      <th
                        class="text-white font-semibold text-end text-sm sm:text-[1rem]"
                        >6-Month</th
                      >
                      <th
                        class="text-white font-semibold text-end text-sm sm:text-[1rem]"
                        >1-Year</th
                      >
                      <th
                        class="text-white font-semibold text-end text-sm sm:text-[1rem]"
                        >2-Year</th
                      >
                      <th
                        class="text-white font-semibold text-end text-sm sm:text-[1rem]"
                        >3-Year</th
                      >
                      <th
                        class="text-white font-semibold text-end text-sm sm:text-[1rem]"
                        >5-Year</th
                      >
                      <th
                        class="text-white font-semibold text-end text-sm sm:text-[1rem]"
                        >7-Year</th
                      >
                      <th
                        class="text-white font-semibold text-end text-sm sm:text-[1rem]"
                        >10-Year</th
                      >
                      <th
                        class="text-white font-semibold text-end text-sm sm:text-[1rem]"
                        >20-Year</th
                      >
                      <th
                        class="text-white font-semibold text-end text-sm sm:text-[1rem]"
                        >30-Year</th
                      >
                    </tr>
                  </thead>
                  <tbody>
                    {#each tableList as item}
                      <!-- row -->
                      <tr
                        class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B] shake-ticker cursor-pointer"
                      >
                        <td
                          class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
                        >
                          {item?.date}
                        </td>
                        <td
                          class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]"
                        >
                          {item?.month1}
                        </td>
                        <td
                          class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]"
                        >
                          {item?.month2 !== null ? item?.month2 : "-"}
                        </td>
                        <td
                          class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]"
                        >
                          {item?.month3}
                        </td>
                        <td
                          class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]"
                        >
                          {item?.month6}
                        </td>
                        <td
                          class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]"
                        >
                          {item?.year1}
                        </td>
                        <td
                          class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]"
                        >
                          {item?.year2}
                        </td>
                        <td
                          class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]"
                        >
                          {item?.year3}
                        </td>
                        <td
                          class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]"
                        >
                          {item?.year5}
                        </td>
                        <td
                          class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]"
                        >
                          {item?.year7}
                        </td>
                        <td
                          class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]"
                        >
                          {item?.year10}
                        </td>
                        <td
                          class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]"
                        >
                          {item?.year20}
                        </td>
                        <td
                          class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]"
                        >
                          {item?.year30}
                        </td>
                      </tr>
                    {/each}
                  </tbody>
                </table>
              </div>
            </div>
          {:else}
            <div class="flex justify-center items-center h-80">
              <div class="relative">
                <label
                  class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
                >
                  <span class="loading loading-spinner loading-md text-gray-400"
                  ></span>
                </label>
              </div>
            </div>
          {/if}
        </main>
        <aside class="hidden lg:block relative fixed w-1/4 ml-4">
          {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
            <div
              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
            >
              <a
                href="/pricing"
                class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
              >
                <div class="w-full flex justify-between items-center p-3 mt-3">
                  <h2 class="text-start text-xl font-semibold text-white ml-3">
                    Pro Subscription
                  </h2>
                  <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
                </div>
                <span class="text-white p-3 ml-3 mr-3">
                  Upgrade now for unlimited access to all data and tools.
                </span>
              </a>
            </div>
          {/if}

          <div
            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
          >
            <a
              href="/economic-calendar"
              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
            >
              <div class="w-full flex justify-between items-center p-3 mt-3">
                <h2 class="text-start text-xl font-semibold text-white ml-3">
                  Economic Events
                </h2>
                <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
              </div>
              <span class="text-white p-3 ml-3 mr-3">
                Stay updated on upcoming Economic Events worldwide.
              </span>
            </a>
          </div>

          <div
            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
          >
            <a
              href="/earnings-calendar"
              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
            >
              <div class="w-full flex justify-between items-center p-3 mt-3">
                <h2 class="text-start text-xl font-semibold text-white ml-3">
                  Earnings Calendar
                </h2>
                <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
              </div>
              <span class="text-white p-3 ml-3 mr-3">
                Get the latest Earnings of companies.
              </span>
            </a>
          </div>
        </aside>
      </div>
    </div>
  </div>
</section>

<style>
  .app {
    height: 400px;
    width: 100%;
  }

  @media (max-width: 560px) {
    .app {
      width: 100%;
      height: 300px;
    }
  }

  .chart {
    width: 100%;
  }
</style>
