<script lang="ts">
  import Calculator from '$lib/components/Calculator.svelte';
  import type { PageData } from './$types';
  import { buildSeoMeta, canonicalUrl, calculatorDescription, SITE_NAME, SITE_URL, toJsonLd } from '$lib/seo';

  export let data: PageData;

  $: calc = data.calculator;
  $: related = data.related;
  $: pageTitle = data.seo?.title ?? `${calc.name} — ${SITE_NAME}`;
  $: pageDescription = data.seo?.description ?? calculatorDescription(calc);
  $: seo = buildSeoMeta({
    title: pageTitle,
    description: pageDescription,
    pathname: `/${calc.slug}`,
    canonical: data.seo?.canonicalUrl,
    robots: data.seo?.robots,
  });
  $: breadcrumbJsonLd = toJsonLd({
    '@context': 'https://schema.org',
    '@type': 'BreadcrumbList',
    itemListElement: [
      {
        '@type': 'ListItem',
        position: 1,
        name: 'Home',
        item: SITE_URL,
      },
      {
        '@type': 'ListItem',
        position: 2,
        name: data.categoryLabel,
        item: canonicalUrl(`/category/${data.category}`),
      },
      {
        '@type': 'ListItem',
        position: 3,
        name: calc.name,
        item: seo.canonical,
      },
    ],
  });
  $: webPageJsonLd = toJsonLd({
    '@context': 'https://schema.org',
    '@type': 'WebPage',
    name: calc.name,
    description: pageDescription,
    url: seo.canonical,
    isPartOf: {
      '@type': 'WebSite',
      name: SITE_NAME,
      url: SITE_URL,
    },
  });

</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">${data.jsonLd}</script>`}
  {@html `<script type="application/ld+json">${breadcrumbJsonLd}</script>`}
  {@html `<script type="application/ld+json">${webPageJsonLd}</script>`}
</svelte:head>

<nav class="breadcrumbs" aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/category/{data.category}">{data.categoryIcon} {data.categoryLabel}</a></li>
    <li aria-current="page">{calc.name}</li>
  </ol>
</nav>

<h1 class="page-title calculator-page-title">{calc.name}</h1>

{#key calc.slug}
  <Calculator config={calc} showTitle={false} />
{/key}

<div class="seo-content">
  {#if calc.descriptionHTML}
    {@html calc.descriptionHTML}
  {:else}
    <h3>How to convert {calc.labels.in1} to {calc.labels.in2}</h3>
    {#if calc.type === 'standard' && (calc.factor || calc.offset)}
      <p>
        The conversion between {calc.labels.in1.toLowerCase()} and {calc.labels.in2.toLowerCase()}
        uses {calc.offset ? 'a linear formula with an offset' : 'a fixed multiplication factor'}.
        {#if calc.offset}
          This offset is common in temperature conversions, where scales differ not just in magnitude but also in their zero point.
        {:else}
          One {calc.labels.in1.toLowerCase()} equals {calc.factor} {calc.labels.in2.toLowerCase()}.
        {/if}
      </p>
      <p>
        To convert, multiply the value in {calc.labels.in1.toLowerCase()} by {calc.factor ?? 1}{calc.offset ? `, then ${calc.offset > 0 ? 'add' : 'subtract'} ${Math.abs(calc.offset)}` : ''}.
        To convert in the opposite direction, {calc.offset ? `${calc.offset > 0 ? 'subtract' : 'add'} ${Math.abs(calc.offset)}, then ` : ''}divide by {calc.factor ?? 1}.
      </p>
    {:else if calc.type === '3col' || calc.type === '3col-mul'}
      <p>
        This is a three-variable conversion. Enter any two of the three values
        — {calc.labels.in1}, {calc.labels.in2}, and {calc.labels.in3} — and the third
        will be calculated automatically.
      </p>
    {:else if calc.type === 'base'}
      <p>
        Number system conversion between base-{calc.fromBase} ({calc.labels.in1.toLowerCase()}) and
        base-{calc.toBase} ({calc.labels.in2.toLowerCase()}). Enter a value in either field and the
        equivalent representation will appear in the other.
      </p>
    {:else}
      <p>
        Enter a value in the field for {calc.labels.in1.toLowerCase()} and the equivalent
        in {calc.labels.in2.toLowerCase()} will be calculated instantly. The conversion
        works bidirectionally — modify either field and the other updates in real time.
      </p>
    {/if}
  {/if}
</div>

{#if related.length > 0}
  <h3 class="section-heading">Related Converters</h3>
  <div class="related-grid">
    {#each related as rel}
      <a href="/{rel.slug}" class="related-chip">{rel.name}</a>
    {/each}
  </div>
{/if}
