"use client";

import { useState, useMemo } from "react";
import { motion } from "motion/react";
import { GlowCard } from "@/components/ui/GlowCard";

const RATES = {
  runpod: 0.0003,
  together: 0.0002,
  llmhosts: 0,
} as const;

function formatCurrency(value: number): string {
  return `$${Math.round(value).toLocaleString("en-US")}`;
}

export function CostCalculator() {
  const [requestsPerDay, setRequestsPerDay] = useState(50_000);
  const [avgTokens, setAvgTokens] = useState(500);

  const { runpodCost, togetherCost, llmhostsCost, savings, yearlySavings } = useMemo(() => {
    const tokens = requestsPerDay * avgTokens * 30;
    const runpod = (tokens / 1000) * RATES.runpod;
    const together = (tokens / 1000) * RATES.together;
    const llmhosts = 0;
    const save = together - llmhosts;
    return {
      runpodCost: runpod,
      togetherCost: together,
      llmhostsCost: llmhosts,
      savings: save,
      yearlySavings: save * 12,
    };
  }, [requestsPerDay, avgTokens]);

  return (
    <GlowCard className="mx-auto max-w-4xl p-8">
      <h3 className="mb-2 text-center text-xl font-semibold text-white">
        See how much you save
      </h3>
      <p className="mb-8 text-center text-sm text-gray-400">
        Adjust the sliders to match your usage
      </p>

      {/* Sliders */}
      <div className="mb-8 space-y-6">
        <div>
          <div className="mb-2 flex items-center justify-between">
            <label htmlFor="calc-requests-per-day" className="text-sm font-medium text-gray-300">Requests per day</label>
            <span className="text-sm font-mono text-violet-400">
              {requestsPerDay.toLocaleString("en-US")}
            </span>
          </div>
          <input
            id="calc-requests-per-day"
            type="range"
            min={1000}
            max={1000000}
            step={1000}
            value={requestsPerDay}
            onChange={(e) => setRequestsPerDay(Number(e.target.value))}
            className="w-full h-2 rounded-full appearance-none cursor-pointer bg-white/10"
            style={{ accentColor: "#7c3aed" }}
          />
          <div className="mt-1 flex justify-between text-xs text-gray-500">
            <span>1K</span>
            <span>1M</span>
          </div>
        </div>

        <div>
          <div className="mb-2 flex items-center justify-between">
            <label htmlFor="calc-avg-tokens" className="text-sm font-medium text-gray-300">Avg tokens per request</label>
            <span className="text-sm font-mono text-violet-400">
              {avgTokens.toLocaleString("en-US")}
            </span>
          </div>
          <input
            id="calc-avg-tokens"
            type="range"
            min={100}
            max={4000}
            step={100}
            value={avgTokens}
            onChange={(e) => setAvgTokens(Number(e.target.value))}
            className="w-full h-2 rounded-full appearance-none cursor-pointer bg-white/10"
            style={{ accentColor: "#7c3aed" }}
          />
          <div className="mt-1 flex justify-between text-xs text-gray-500">
            <span>100</span>
            <span>4,000</span>
          </div>
        </div>
      </div>

      {/* Result Cards */}
      <div className="mb-8 grid grid-cols-1 gap-4 sm:grid-cols-3">
        <div className="glass rounded-lg p-4 text-center ring-2 ring-emerald-500/30">
          <p className="mb-1 text-sm font-medium text-gray-400">LLMHosts Local</p>
          <motion.div
            key={`llmhosts-${llmhostsCost}`}
            initial={{ opacity: 0.5, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ type: "spring", damping: 20, stiffness: 300 }}
          >
            <span data-testid="llmhosts-cost" className="text-2xl font-bold text-emerald-400">
              $0
            </span>
          </motion.div>
          <p className="mt-1 text-xs text-gray-500">Your hardware</p>
        </div>

        <div className="glass rounded-lg p-4 text-center">
          <p className="mb-1 text-sm font-medium text-gray-400">Together.ai</p>
          <motion.div
            key={`together-${togetherCost}`}
            initial={{ opacity: 0.5, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ type: "spring", damping: 20, stiffness: 300 }}
          >
            <span data-testid="together-cost" className="text-2xl font-bold text-white">
              {formatCurrency(togetherCost)}
            </span>
          </motion.div>
          <p className="mt-1 text-xs text-gray-500">per month</p>
        </div>

        <div className="glass rounded-lg p-4 text-center">
          <p className="mb-1 text-sm font-medium text-gray-400">RunPod</p>
          <motion.div
            key={`runpod-${runpodCost}`}
            initial={{ opacity: 0.5, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ type: "spring", damping: 20, stiffness: 300 }}
          >
            <span data-testid="runpod-cost" className="text-2xl font-bold text-white">
              {formatCurrency(runpodCost)}
            </span>
          </motion.div>
          <p className="mt-1 text-xs text-gray-500">per month</p>
        </div>
      </div>

      {/* Savings Stat */}
      <div className="mb-6 text-center">
        <motion.div
          key={`savings-${savings}`}
          initial={{ opacity: 0.5, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ type: "spring", damping: 20, stiffness: 300 }}
        >
          <p data-testid="savings-amount" className="text-3xl font-bold text-emerald-400">
            You save {formatCurrency(savings)}/month
          </p>
          {savings > 100 && (
            <p data-testid="yearly-savings" className="mt-1 text-sm text-gray-400">
              That&apos;s {formatCurrency(yearlySavings)}/year saved
            </p>
          )}
        </motion.div>
      </div>

      {/* CTA */}
      <div className="text-center">
        <a
          href="/auth/register"
          className="inline-flex items-center gap-2 rounded-lg bg-violet-600 px-6 py-3 text-base font-medium text-white shadow-lg shadow-violet-500/25 transition-colors hover:bg-violet-500"
        >
          Start saving &rarr;
        </a>
      </div>
    </GlowCard>
  );
}
