songs2vid/components/PaygPriceCalculator.tsx

"use client";

import Link from "next/link";
import { useState } from "react";
import {
  CREDIT_PRICE_CENTS,
  CREDIT_PURCHASE_MAX,
  CREDIT_PURCHASE_MIN,
  formatCreditPrice,
} from "@/lib/credits";

export function PaygPriceCalculator() {
  const [videos, setVideos] = useState(CREDIT_PURCHASE_MIN);
  const total = formatCreditPrice(videos);
  const unit = formatCreditPrice(1);

  return (
    <div className="mx-auto w-full max-w-xl rounded-2xl border border-gray-700/60 bg-surface/80 p-6 sm:p-8">
      <p className="text-xs font-semibold uppercase tracking-wider text-amber-400">
        Pay as you go
      </p>
      <h3 className="mt-2 text-xl font-semibold text-white sm:text-2xl">
        Choose how many videos you need
      </h3>
      <p className="mt-2 text-sm text-gray-400">
        {unit} per video · minimum {CREDIT_PURCHASE_MIN} videos (
        {formatCreditPrice(CREDIT_PURCHASE_MIN)})
      </p>

      <div className="mt-8">
        <div className="flex items-end justify-between gap-4">
          <label htmlFor="payg-videos" className="text-sm text-gray-300">
            Videos
          </label>
          <div className="flex items-center gap-2">
            <input
              id="payg-videos-number"
              type="number"
              min={CREDIT_PURCHASE_MIN}
              max={CREDIT_PURCHASE_MAX}
              value={videos}
              onChange={(e) => {
                const n = Math.floor(Number(e.target.value));
                if (!Number.isFinite(n)) return;
                setVideos(
                  Math.min(CREDIT_PURCHASE_MAX, Math.max(CREDIT_PURCHASE_MIN, n)),
                );
              }}
              className="w-20 rounded border border-gray-600 bg-surface-dark px-3 py-2 text-center text-lg font-semibold text-white focus:border-accent focus:outline-none"
            />
          </div>
        </div>

        <input
          id="payg-videos"
          type="range"
          min={CREDIT_PURCHASE_MIN}
          max={CREDIT_PURCHASE_MAX}
          value={videos}
          onChange={(e) => setVideos(Number(e.target.value))}
          className="mt-4 w-full accent-amber-400"
          aria-valuemin={CREDIT_PURCHASE_MIN}
          aria-valuemax={CREDIT_PURCHASE_MAX}
          aria-valuenow={videos}
          aria-label="Number of videos"
        />
        <div className="mt-1 flex justify-between text-xs text-gray-500">
          <span>{CREDIT_PURCHASE_MIN}</span>
          <span>{CREDIT_PURCHASE_MAX}</span>
        </div>
      </div>

      <div className="mt-8 flex flex-wrap items-end justify-between gap-4 border-t border-gray-800 pt-6">
        <div>
          <p className="text-xs uppercase tracking-wider text-gray-500">Total</p>
          <p className="mt-1 text-3xl font-bold text-white sm:text-4xl">{total}</p>
          <p className="mt-1 text-sm text-gray-400">
            {videos} × {unit}{" "}
            <span className="text-gray-500">
              (€{(CREDIT_PRICE_CENTS / 100).toFixed(2)} each)
            </span>
          </p>
        </div>
        <Link
          href="/dashboard/settings"
          className="inline-flex rounded border border-amber-500/40 bg-amber-500/10 px-5 py-3 text-sm font-medium text-amber-300 transition-colors hover:border-amber-500/60 hover:bg-amber-500/20"
        >
          Buy credits
        </Link>
      </div>
    </div>
  );
}