"use client";

import ActionLink from "@/components/ActionLink";
import Container from "@/components/NAWebsite/Container";
import Slider from "@/components/Slider";
import { useState } from "react";
import Calculator from "./PricingCalculatorSection.Calculator";
import { SectionSubTitle, SectionTitle } from "./Section";

function format(v: number) {
  if (v == 0) {
    return "0";
  }
  if (v >= 1_000_000) {
    return (v / 1_000_000).toFixed(1).replace(/\.0$/, "") + "M";
  }
  return (v / 1000).toFixed(0) + "K";
}

function rangeMark(
  min: number,
  max: number,
  step: number,
  formatter: (value: number) => string,
) {
  const marks: Record<number, string> = {};
  for (let i = min; i <= max; i += step) {
    marks[i] = formatter(i);
  }
  return marks;
}

const dimensions = [512, 768, 1536];
const dimensionMarks = dimensions.reduce((a, v) => ({ ...a, [v]: v }), {});
const tableSizeMarks = rangeMark(0, 4_000_000, 1_000_000, format);
const writeRowsMarks = rangeMark(0, 4_000_000, 1_000_000, format);
const readQueriesMarks = rangeMark(0, 1_000_000, 200_000, format);

function Row({
  name,
  value,
  slider,
  formatter,
}: {
  name: string;
  value: number;
  slider: React.ReactNode;
  formatter?: (value: number) => string;
}) {
  return (
    <>
      <div className="flex items-center justify-between gap-x-2 md:gap-x-8 text-nowrap">
        <div className="text-base md:text-[22px]">{name}</div>
        <div className="text-base font-bold text-white md:text-[22px]">
          {formatter ? formatter(value) : value}
        </div>
      </div>
      <div className="flex items-center">{slider}</div>
    </>
  );
}

export default function PricingCalculatorSection() {
  const [dimension, setDimension] = useState(768);
  const [tableSize, setTableSize] = useState(1_000_000);
  const [writeRows, setWriteRows] = useState(1_000_000);
  const [readQueries, setReadQueries] = useState(100_000);

  return (
    <div className="bg-black py-10 md:py-20">
      <Container>
        <SectionSubTitle>No Provision, No Capacity Planning</SectionSubTitle>
        <SectionTitle className="max-w-[840px]">
          Pay Only for What You Actually Use
        </SectionTitle>
        <div className="mt-16 md:grid md:grid-cols-12 md:gap-16">
          <div className="md:col-span-10">
            <div className="text-carbon grid grid-cols-[180px_1fr] gap-x-8 md:gap-x-20 gap-y-8 md:grid-cols-[280px_1fr]">
              <Row
                name="Vector dimension:"
                value={dimension}
                slider={
                  <Slider
                    min={0}
                    max={Math.max(...dimensions)}
                    step={null}
                    marks={dimensionMarks}
                    included={false}
                    value={dimension}
                    onChange={setDimension}
                  />
                }
              />
              <Row
                name="Rows in table:"
                value={tableSize}
                formatter={format}
                slider={
                  <Slider
                    min={0}
                    max={4_000_000}
                    step={100_000}
                    formatValue={format}
                    marks={tableSizeMarks}
                    value={tableSize}
                    onChange={setTableSize}
                  />
                }
              />
              <Row
                name="Write Rows:"
                value={writeRows}
                formatter={format}
                slider={
                  <Slider
                    min={0}
                    max={4_000_000}
                    step={100_000}
                    formatValue={format}
                    marks={writeRowsMarks}
                    value={writeRows}
                    onChange={setWriteRows}
                  />
                }
              />
              <Row
                name="Read Queries:"
                value={readQueries}
                formatter={format}
                slider={
                  <Slider
                    min={0}
                    max={1_000_000}
                    step={100_000}
                    formatValue={format}
                    marks={readQueriesMarks}
                    value={readQueries}
                    onChange={setReadQueries}
                  />
                }
              />
            </div>
            <div className="mt-20 grid grid-cols-[min-content_1fr] gap-x-4 gap-y-6 text-gray-600 md:gap-x-8">
              <div className="text-carbon flex items-center gap-x-3 text-nowrap text-base md:text-[22px]">
                <div className="border-violet-medium h-3 w-3 rounded-full border"></div>
                Estimated storage cost:
              </div>
              <div>
                <div className="text-2xl md:text-4xl lg:text-[50px] font-medium text-white">
                  ${Calculator.PriceStorage(dimension, tableSize).toFixed(2)}{" "}
                  <span className="text-carbon text-base font-normal md:text-[22px]">
                    per month
                  </span>
                </div>
              </div>
              <div className="text-carbon flex items-center gap-x-2 text-nowrap text-base md:text-[22px]">
                <div className="border-violet-medium h-3 w-3 rounded-full border"></div>
                Estimated request cost:
              </div>
              <div>
                <div className="text-2xl md:text-4xl lg:text-[50px] font-medium text-white">
                  $
                  {(
                    Calculator.PriceRead(dimension, tableSize, readQueries) +
                    Calculator.PriceWrite(dimension, writeRows)
                  ).toFixed(2)}
                </div>
              </div>
              <div className="text-carbon-500 col-span-2 text-base pr-4">
                The above estimated price is for your reference only. The actual
                price will be calculated based on your actual usage of Serveless
                services, including but not limited to the network transfer fee,
                region, workload, usage of non-vector data, etc. For more
                details, please refer to{" "}
                <a className="underline" href="https://www.pingcap.com/tidb-serverless-pricing-details/">
                  Pricing Details
                </a>{" "}
                or{" "}
                <a className="underline"  href="https://www.pingcap.com/contact-us/">
                  contact us
                </a>
                .
              </div>
            </div>
          </div>
        </div>
      </Container>
    </div>
  );
}