<script lang="ts">
  import type { PageData } from './$types';
  import { buildSeoMeta, canonicalUrl, SITE_NAME, SITE_URL, toJsonLd } from '$lib/seo';
  import { getConversionRateText } from '$lib/utils/conversionRate';

  const handleCalcTooltipMousemove = (event: MouseEvent) => {
    const card = event.currentTarget as HTMLElement | null;
    if (!card) return;
    const rect = card.getBoundingClientRect();
    const x = Math.min(Math.max(event.clientX - rect.left, 0), rect.width);
    const y = Math.min(Math.max(event.clientY - rect.top, 0), rect.height);
    card.style.setProperty('--calc-tooltip-left', `${x}px`);
    card.style.setProperty('--calc-tooltip-top', `${y}px`);
    card.style.setProperty('--calc-tooltip-bottom', 'auto');
    card.style.setProperty('--calc-tooltip-translate', 'calc(-100% - 0.55rem)');
  };

  const resetCalcTooltipPosition = (event: MouseEvent | FocusEvent) => {
    const card = event.currentTarget as HTMLElement | null;
    if (!card) return;
    card.style.removeProperty('--calc-tooltip-left');
    card.style.removeProperty('--calc-tooltip-top');
    card.style.removeProperty('--calc-tooltip-bottom');
    card.style.removeProperty('--calc-tooltip-translate');
  };

  export let data: PageData;

  $: pageTitle = `${data.label} Converters — ${SITE_NAME}`;
  $: pageDescription = `Browse all ${data.label.toLowerCase()} unit converters. Free online calculators for converting between ${data.label.toLowerCase()} units.`;
  $: categoryPath = `/category/${data.category}`;
  $: seo = buildSeoMeta({
    title: pageTitle,
    description: pageDescription,
    pathname: categoryPath,
    robots: data.calculators.length > 0 ? 'index,follow' : 'noindex,follow',
  });
  $: breadcrumbJsonLd = toJsonLd({
    '@context': 'https://schema.org',
    '@type': 'BreadcrumbList',
    itemListElement: [
      {
        '@type': 'ListItem',
        position: 1,
        name: 'Home',
        item: SITE_URL,
      },
      {
        '@type': 'ListItem',
        position: 2,
        name: `${data.label} Converters`,
        item: seo.canonical,
      },
    ],
  });
  $: collectionJsonLd = toJsonLd({
    '@context': 'https://schema.org',
    '@type': 'CollectionPage',
    name: `${data.label} Converters`,
    description: pageDescription,
    url: seo.canonical,
    isPartOf: {
      '@type': 'WebSite',
      name: SITE_NAME,
      url: SITE_URL,
    },
    mainEntity: {
      '@type': 'ItemList',
      itemListElement: data.calculators.map((calc, index) => ({
        '@type': 'ListItem',
        position: index + 1,
        name: calc.name,
        url: canonicalUrl(`/${calc.slug}`),
      })),
    },
  });
</script>

<svelte:head>
  <title>{pageTitle}</title>
  <meta name="description" content={pageDescription} />
  <meta name="robots" content={seo.robots} />
  <link rel="canonical" href={seo.canonical} />
  <meta property="og:type" content={seo.og.type} />
  <meta property="og:title" content={seo.og.title} />
  <meta property="og:description" content={seo.og.description} />
  <meta property="og:url" content={seo.og.url} />
  <meta property="og:site_name" content={seo.og.siteName} />
  <meta name="twitter:card" content={seo.twitter.card} />
  <meta name="twitter:title" content={seo.twitter.title} />
  <meta name="twitter:description" content={seo.twitter.description} />
  {@html `<script type="application/ld+json">${breadcrumbJsonLd}</script>`}
  {@html `<script type="application/ld+json">${collectionJsonLd}</script>`}
</svelte:head>

<nav class="breadcrumbs" aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li aria-current="page">{data.icon} {data.label}</li>
  </ol>
</nav>

<h1 class="page-title">{data.icon} {data.label} Converters</h1>
<p class="page-subtitle">
  {data.calculators.length} converter{data.calculators.length !== 1 ? 's' : ''} available in this category.
  Select any conversion below to get started.
</p>

<div class="calc-list">
  {#each data.calculators as calc}
    {@const conversionRateText = getConversionRateText(calc)}
    <a
      href="/{calc.slug}"
      class="calc-list-item"
      on:mousemove={handleCalcTooltipMousemove}
      on:mouseleave={resetCalcTooltipPosition}
      on:focus={resetCalcTooltipPosition}
    >
      {calc.name}
      {#if conversionRateText}
        <span class="calc-list-tooltip" role="tooltip">{conversionRateText}</span>
      {/if}
    </a>
  {/each}
</div>
