---
import type { TtLandings } from "#/copy/landings";
import type { AstroComponentInstance } from "astro/runtime/server/index.js";
import Icon from "#/components/Icon.astro";
import type { AstroBuiltinAttributes } from "astro";
import type { I18n } from "#/copy/i18n";

interface Props {
  t: TtLandings.ComparisonTable;
}

const { t } = Astro.props;

const order: (keyof TtLandings.ComparisonHeader)[] = [
  "metric",
  "alumnium",
  "browser-use",
  "mobile-mcp",
  "playwright-mcp",
];
---

<div class="table-wrapper">
  <table class="table">
    <thead>
      <tr>
        {
          order.map((key) => (
            <th class={`cell is-header is-${key}`}>{t.header[key].en}</th>
          ))
        }
      </tr>
    </thead>

    <tbody>
      {
        t.rows.map((row) => {
          interface CellItem {
            classList?: AstroBuiltinAttributes["class:list"] & {};
            content: AstroComponentInstance | string;
          }

          const renderSuperscript = (value: string) => (
            <sup class="superscript">{value}</sup>
          );

          const cellToItem = (
            cell: TtLandings.ComparisonCell | TtLandings.ComparisonMetricCell,
          ): CellItem => {
            if ("en" in cell)
              return {
                classList: ["is-string"],
                content: cell.en,
              };

            switch (cell.kind) {
              case "metric": {
                const valueT = cell.value.en;
                return {
                  content: (
                    <div class="metric">
                      <div class="metric-label">{valueT.label}</div>
                      <div class="metric-subtext">{valueT.subtext}</div>
                    </div>
                  ),
                };
              }

              case "string":
                return {
                  classList: [
                    "is-string",
                    cell.highlight === "positive" && "is-positive",
                    cell.highlight === "negative" && "is-negative",
                    cell.highlight === "mixed" && "is-mixed",
                  ],
                  content: cell.value.en,
                };

              case "support": {
                const content =
                  cell.support === "partial" ? (
                    <span class="symbol">~</span>
                  ) : (
                    <Icon
                      id={cell.support === "yes" ? "check" : "close"}
                      class="icon"
                    />
                  );

                return {
                  classList: [
                    "is-support",
                    cell.support === "yes" && "is-yes",
                    cell.support === "no" && "is-no",
                    cell.support === "partial" && "is-partial",
                  ],
                  content: (
                    <>
                      {content}
                      {cell.superscript && renderSuperscript(cell.superscript)}
                    </>
                  ),
                };
              }

              case "na":
                return {
                  classList: ["is-na"],
                  content: <span class="symbol">-</span>,
                };
            }
          };

          return (
            <tr>
              {order.map((key) => {
                const cell = row[key];
                const item = cellToItem(cell);
                const classList = [
                  "cell",
                  `is-${key}`,
                  key !== "metric" && "is-product",
                  item.classList,
                ];
                return <td class:list={classList}>{item.content}</td>;
              })}
            </tr>
          );
        })
      }
    </tbody>
  </table>

  {
    t.disclaimer && (
      <p class="text-accent-500 text-sm px-(--section-padding-x) sm:px-0">
        {t.disclaimer.en}
      </p>
    )
  }
</div>

<style>
  @reference "#/styles/global.css";

  .table-wrapper {
    @apply mx-[calc(var(--section-padding-x)*-1-0.5px)] md:mx-0 flex flex-col gap-3 overflow-x-auto scrollbar-thin;
  }

  .table {
    @apply text-left border-collapse shrink-0 min-w-full w-max md:w-full;
    table-layout: fixed;

    & th,
    & td {
      @apply border border-accent-700;
    }

    & .is-metric {
      @apply w-[20%] sm:w-[28%];
    }
  }

  .cell {
    @apply px-1.5 py-1.5 sm:px-2 sm:py-2 md:px-5 md:py-2 relative;

    &.is-header,
    &.is-metric {
      @apply bg-accent-950/40;
    }

    &.is-header {
      @apply py-2 sm:py-5 text-xs sm:text-sm md:text-base text-accent-200 leading-snug text-center;

      &.is-alumnium {
        @apply bg-accent-800/70 text-ink-dark font-bold;
      }
    }

    &.is-metric {
      @apply text-accent-400;
    }

    &:not(.is-header):not(.is-metric) {
      @apply text-center text-xs sm:text-sm md:text-base leading-snug;
    }

    &.is-alumnium {
      @apply bg-accent-800/50 text-ink-dark font-bold;
    }

    &.is-product {
      @apply font-mono leading-none capsize px-1.5 py-1.5 sm:px-5 sm:py-3 font-light;
    }

    & .icon {
      @apply text-2xl;
    }

    & .symbol {
      @apply text-3xl;
    }

    &.is-na {
      --symbol-color: var(--color-gray-400);
    }

    &.is-string {
      &.is-positive {
        @apply text-emerald-300;
      }

      &.is-negative {
        @apply text-rose-300;
      }

      &.is-mixed {
        @apply text-orange-300;
      }
    }

    &.is-support {
      &.is-yes {
        --icon-color: var(--color-emerald-500);
      }

      &.is-no {
        --icon-color: var(--color-rose-500);
      }

      &.is-partial {
        --symbol-color: var(--color-yellow-500);
      }
    }
  }

  .metric {
    @apply flex flex-col gap-1;
  }

  .metric-label {
    @apply text-sm sm:text-base leading-snug font-medium text-accent-300;
  }

  .metric-subtext {
    @apply text-xs sm:text-sm text-accent-500 max-w-[15rem];
  }

  .superscript {
    @apply text-accent-500;
    vertical-align: top;
    font-size: 11px;
  }
</style>
