import React, { useState, useEffect } from "react";

function RetellPricingCalculator() {
  const [minutes, setMinutes] = useState(500);
  const [selectedLLM, setSelectedLLM] = useState("Claude 3.7 sonnet");
  const [selectedVoice, setSelectedVoice] = useState("Elevenlabs Voices");
  const [selectedTelephony, setSelectedTelephony] = useState("Custom Telephony");
  
  // LLM cost rates per minute with 5x markup
  const llmRates = {
    "Custom LLM": 0.000,
    "GPT 4o mini": 0.030, // 0.006 * 5
    "GPT 4o": 0.060, // 0.012 * 5
    "GPT 4.1": 0.080, // 0.016 * 5
    "GPT 4.1 mini": 0.040, // 0.008 * 5
    "GPT 4.1 nano": 0.020, // 0.004 * 5
    "Claude 3.5 haiku": 0.015, // 0.003 * 5
    "Claude 3.7 sonnet": 0.030, // 0.006 * 5
    "Gemini 2.0 Flash": 0.040, // 0.008 * 5
    "Gemini 2.0 Flash Lite": 0.020 // 0.004 * 5
  };
  
  // Voice engine rates per minute with 5x markup
  const voiceRates = {
    "Elevenlabs Voices": 0.350, // 0.070 * 5
    "OpenAI / PlayHT Voices": 0.175 // 0.035 * 5
  };
  
  // Telephony rates per minute with 5x markup
  const telephonyRates = {
    "Custom Telephony": 0.000,
    "Retell Twilio/Telynx": 0.100 // 0.020 * 5
  };
  
  // Calculate costs
  const llmCost = llmRates[selectedLLM] * minutes;
  const voiceCost = voiceRates[selectedVoice] * minutes;
  const telephonyCost = telephonyRates[selectedTelephony] * minutes;
  const costPerMinute = llmRates[selectedLLM] + voiceRates[selectedVoice] + telephonyRates[selectedTelephony];
  const totalCost = llmCost + voiceCost + telephonyCost;
  
  // Format numbers to 3 decimal places
  const formatNumber = (num) => {
    return num.toFixed(3);
  };
  
  return (
    <div className="flex flex-col w-full max-w-4xl bg-gray-900 text-white rounded-lg overflow-hidden shadow-xl">
      <div className="p-6 flex flex-col lg:flex-row gap-6">
        {/* Left panel - Controls */}
        <div className="flex-1 space-y-8">
          {/* Minutes slider */}
          <div className="space-y-2">
            <div className="flex justify-between">
              <label className="text-gray-300 font-medium">How many minutes of calls do you have per month?</label>
              <span className="font-bold text-xl">{minutes}</span>
            </div>
            <input
              type="range"
              min="100"
              max="10000"
              step="100"
              value={minutes}
              onChange={(e) => setMinutes(parseInt(e.target.value))}
              className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
            />
          </div>
          
          {/* LLM selection */}
          <div className="space-y-2">
            <label className="text-gray-300 font-medium">LLM Agent</label>
            <div className="flex flex-wrap gap-2">
              {Object.keys(llmRates).map((llm) => (
                <button
                  key={llm}
                  className={`px-4 py-2 rounded-full text-sm ${
                    selectedLLM === llm
                      ? "bg-blue-600 text-white"
                      : "bg-gray-800 text-gray-300"
                  }`}
                  onClick={() => setSelectedLLM(llm)}
                >
                  {llm}
                </button>
              ))}
            </div>
          </div>
          
          {/* Voice Engine selection */}
          <div className="space-y-2">
            <label className="text-gray-300 font-medium">Voice Engine</label>
            <div className="flex flex-wrap gap-2">
              {Object.keys(voiceRates).map((voice) => (
                <button
                  key={voice}
                  className={`px-4 py-2 rounded-full text-sm ${
                    selectedVoice === voice
                      ? "bg-blue-600 text-white"
                      : "bg-gray-800 text-gray-300"
                  }`}
                  onClick={() => setSelectedVoice(voice)}
                >
                  {voice}
                </button>
              ))}
            </div>
          </div>
          
          {/* Telephony selection */}
          <div className="space-y-2">
            <label className="text-gray-300 font-medium">Telephony</label>
            <div className="flex flex-wrap gap-2">
              {Object.keys(telephonyRates).map((telephony) => (
                <button
                  key={telephony}
                  className={`px-4 py-2 rounded-full text-sm ${
                    selectedTelephony === telephony
                      ? "bg-blue-600 text-white"
                      : "bg-gray-800 text-gray-300"
                  }`}
                  onClick={() => setSelectedTelephony(telephony)}
                >
                  {telephony}
                </button>
              ))}
            </div>
          </div>
        </div>
        
        {/* Right panel - Cost breakdown */}
        <div className="flex-none w-full lg:w-64 bg-gray-800 rounded-lg p-4">
          <div className="flex justify-between items-center mb-2">
            <span className="text-gray-300">Cost Per Minute</span>
            <span className="font-medium">$ {formatNumber(costPerMinute)}</span>
          </div>
          
          <hr className="border-gray-700 my-2" />
          
          <div className="space-y-1 mb-4">
            <div className="flex justify-between items-center">
              <span className="text-gray-400 text-sm">• LLM Cost</span>
              <span className="text-gray-300">$ {formatNumber(llmRates[selectedLLM])}</span>
            </div>
            <div className="flex justify-between items-center">
              <span className="text-gray-400 text-sm">• Voice Engine Cost</span>
              <span className="text-gray-300">$ {formatNumber(voiceRates[selectedVoice])}</span>
            </div>
            <div className="flex justify-between items-center">
              <span className="text-gray-400 text-sm">• Telephony Cost</span>
              <span className="text-gray-300">$ {formatNumber(telephonyRates[selectedTelephony])}</span>
            </div>
          </div>
          
          <hr className="border-gray-700 my-4" />
          
          <div className="flex justify-between items-center">
            <span className="text-gray-300 font-medium">Total</span>
            <div className="text-right">
              <span className="text-xl font-bold">$ {totalCost.toFixed(2)}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default RetellPricingCalculator;