import React, { useState, useMemo } from "react";
import { Text, TextInput } from "@tremor/react";
import CodeBlock from "@/app/(dashboard)/api-reference/components/CodeBlock";

const HowItWorks: React.FC = () => {
  const [responseCost, setResponseCost] = useState("");
  const [discountAmount, setDiscountAmount] = useState("");

  const calculatedDiscount = useMemo(() => {
    const cost = parseFloat(responseCost);
    const discount = parseFloat(discountAmount);
    
    if (isNaN(cost) || isNaN(discount) || cost === 0 || discount === 0) {
      return null;
    }

    const originalCost = cost + discount;
    const discountPercentage = (discount / originalCost) * 100;

    return {
      originalCost: originalCost.toFixed(10),
      finalCost: cost.toFixed(10),
      discountAmount: discount.toFixed(10),
      discountPercentage: discountPercentage.toFixed(2),
    };
  }, [responseCost, discountAmount]);

  return (
    <div className="space-y-4 pt-2">
          <div>
            <Text className="font-medium text-gray-900 text-sm mb-1">Cost Calculation</Text>
            <Text className="text-xs text-gray-600">
              Discounts are applied to provider costs: <code className="bg-gray-100 px-1.5 py-0.5 rounded text-xs">final_cost = base_cost × (1 - discount%/100)</code>
            </Text>
          </div>
          <div>
            <Text className="font-medium text-gray-900 text-sm mb-1">Example</Text>
            <Text className="text-xs text-gray-600">
              A 5% discount on a $10.00 request results in: $10.00 × (1 - 0.05) = $9.50
            </Text>
          </div>
          <div>
            <Text className="font-medium text-gray-900 text-sm mb-1">Valid Range</Text>
            <Text className="text-xs text-gray-600">
              Discount percentages must be between 0% and 100%
            </Text>
          </div>

          <div className="pt-4 border-t border-gray-200">
            <Text className="font-medium text-gray-900 text-sm mb-2">Validating Discounts</Text>
            <Text className="text-xs text-gray-600 mb-3">
              Make a test request and check the response headers to verify discounts are applied:
            </Text>
            <CodeBlock
              language="bash"
              code={`curl -X POST -i http://your-proxy:4000/chat/completions \\
  -H "Content-Type: application/json" \\
  -H "Authorization: Bearer sk-1234" \\
  -d '{
    "model": "gemini/gemini-2.5-pro",
    "messages": [{"role": "user", "content": "Hello"}]
  }'`}
            />
            <Text className="text-xs text-gray-600 mt-3 mb-2">
              Look for these headers in the response:
            </Text>
            <div className="space-y-1.5">
              <div className="flex items-start gap-3">
                <code className="bg-gray-100 px-2 py-1 rounded text-xs font-mono text-gray-800 whitespace-nowrap">
                  x-litellm-response-cost
                </code>
                <Text className="text-xs text-gray-600">Final cost after discount</Text>
              </div>
              <div className="flex items-start gap-3">
                <code className="bg-gray-100 px-2 py-1 rounded text-xs font-mono text-gray-800 whitespace-nowrap">
                  x-litellm-response-cost-original
                </code>
                <Text className="text-xs text-gray-600">Original cost before discount</Text>
              </div>
              <div className="flex items-start gap-3">
                <code className="bg-gray-100 px-2 py-1 rounded text-xs font-mono text-gray-800 whitespace-nowrap">
                  x-litellm-response-cost-discount-amount
                </code>
                <Text className="text-xs text-gray-600">Amount discounted</Text>
              </div>
            </div>
          </div>

          <div className="pt-4 border-t border-gray-200">
            <Text className="font-medium text-gray-900 text-sm mb-3">Discount Calculator</Text>
            <Text className="text-xs text-gray-600 mb-3">
              Enter values from your response headers to verify the discount:
            </Text>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
              <div>
                <label className="block text-xs font-medium text-gray-700 mb-1">
                  Response Cost (x-litellm-response-cost)
                </label>
                <TextInput
                  placeholder="0.0171938125"
                  value={responseCost}
                  onValueChange={setResponseCost}
                  className="text-sm"
                />
              </div>
              <div>
                <label className="block text-xs font-medium text-gray-700 mb-1">
                  Discount Amount (x-litellm-response-cost-discount-amount)
                </label>
                <TextInput
                  placeholder="0.0009049375"
                  value={discountAmount}
                  onValueChange={setDiscountAmount}
                  className="text-sm"
                />
              </div>
            </div>

            {calculatedDiscount && (
              <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                <Text className="text-sm font-medium text-blue-900 mb-2">Calculated Results</Text>
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <Text className="text-xs text-blue-800">Original Cost:</Text>
                    <code className="text-xs font-mono text-blue-900">${calculatedDiscount.originalCost}</code>
                  </div>
                  <div className="flex items-center justify-between">
                    <Text className="text-xs text-blue-800">Final Cost:</Text>
                    <code className="text-xs font-mono text-blue-900">${calculatedDiscount.finalCost}</code>
                  </div>
                  <div className="flex items-center justify-between">
                    <Text className="text-xs text-blue-800">Discount Amount:</Text>
                    <code className="text-xs font-mono text-blue-900">${calculatedDiscount.discountAmount}</code>
                  </div>
                  <div className="flex items-center justify-between pt-2 border-t border-blue-300">
                    <Text className="text-xs font-semibold text-blue-900">Discount Applied:</Text>
                    <Text className="text-sm font-bold text-blue-900">{calculatedDiscount.discountPercentage}%</Text>
                  </div>
                </div>
              </div>
            )}
          </div>
    </div>
  );
};

export default HowItWorks;