import React, { useState } from 'react';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';

const PricingCalculator = () => {
  const [isAnnual, setIsAnnual] = useState(false);
  const [seats, setSeats] = useState(1);
  const [storage, setStorage] = useState(10);
  const [addons, setAddons] = useState(false);

  // Base pricing
  const BASE_PRICE_PER_SEAT = 49;
  const STORAGE_PRICE_PER_GB = 0.5;
  const ADDON_PRICE = 99;
  
  const calculateTotal = () => {
    let total = seats * BASE_PRICE_PER_SEAT;
    total += storage * STORAGE_PRICE_PER_GB;
    if (addons) total += ADDON_PRICE;
    
    // Apply 20% discount for annual billing
    if (isAnnual) {
      total = total * 0.8;
      total = total * 12;
    }
    
    return total.toFixed(2);
  };

  return (
    <Card className="w-full max-w-md mx-auto bg-white shadow-lg">
      <CardHeader className="space-y-1">
        <CardTitle className="text-2xl font-bold text-center">Pricing Calculator</CardTitle>
      </CardHeader>
      <CardContent className="space-y-6">
        {/* Billing Toggle */}
        <div className="flex justify-center items-center space-x-4">
          <span className={`${!isAnnual ? 'font-semibold' : ''}`}>Monthly</span>
          <button
            onClick={() => setIsAnnual(!isAnnual)}
            className={`relative w-14 h-7 rounded-full transition-colors duration-200 focus:outline-none
              ${isAnnual ? 'bg-blue-600' : 'bg-gray-400'}`}
          >
            <span
              className={`absolute top-1 left-1 w-5 h-5 rounded-full bg-white transition-transform duration-200
                ${isAnnual ? 'translate-x-7' : 'translate-x-0'}`}
            />
          </button>
          <span className={`${isAnnual ? 'font-semibold' : ''}`}>Annual</span>
        </div>

        {/* Number of Seats */}
        <div className="space-y-2">
          <label className="block text-sm font-medium">Number of Seats</label>
          <input
            type="number"
            min="1"
            value={seats}
            onChange={(e) => setSeats(Math.max(1, parseInt(e.target.value) || 1))}
            className="w-full p-2 border rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          />
        </div>

        {/* Storage Slider */}
        <div className="space-y-2">
          <label className="block text-sm font-medium">
            Storage (GB): {storage}
          </label>
          <input
            type="range"
            min="10"
            max="100"
            value={storage}
            onChange={(e) => setStorage(parseInt(e.target.value))}
            className="w-full"
          />
        </div>

        {/* Add-ons Toggle */}
        <div className="flex items-center space-x-2">
          <input
            type="checkbox"
            checked={addons}
            onChange={(e) => setAddons(e.target.checked)}
            className="w-4 h-4 text-blue-600"
          />
          <label className="text-sm font-medium">
            Include Premium Add-ons (+${ADDON_PRICE}/mo)
          </label>
        </div>

        {/* Total Price Display */}
        <div className="mt-6 p-4 bg-gray-50 rounded-lg">
          <div className="text-center">
            <span className="text-3xl font-bold text-blue-600">
              ${calculateTotal()}
            </span>
            <span className="text-gray-600 ml-1">
              /{isAnnual ? 'year' : 'month'}
            </span>
          </div>
          {isAnnual && (
            <div className="text-center text-sm text-green-600 mt-2">
              Includes 20% annual discount
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  );
};

export default PricingCalculator;