'use client';

import { useState } from 'react';
import { motion } from 'framer-motion';
import GpuPaymentModal from '@/components/GpuPaymentModal'

interface IGPU {
  id: string;
  title: string;
  subTitle: string;
  price: string;
  price_usd: number;
  isRecentlyPurchased?: boolean;
}

export default function Boxes() {
  const [selectedGpu, setSelectedGpu] = useState<IGPU | null>(null);

  const gpus: IGPU[] = [
    {
      id: 'k80',
      title: 'NVIDIA Tesla K80',
      subTitle: '24 GB GDDR5 - 4992 CUDA Cores',
      price: '$0.15/hour ($110/mo)',
      price_usd: 1, //110
    },
    {
      id: 't1000',
      title: 'NVIDIA T1000',
      subTitle: '4 GB GDDR6 - 896 CUDA Cores',
      price: '$0.16/hr ($119/month)',
      price_usd: 119,
    },
    {
      id: 'a4000',
      title: 'NVIDIA RTX A4000',
      subTitle: '16 GB GDDR6 - 6144 CUDA Cores',
      price: '$0.17/hour ($125/mo)',
      price_usd: 125,
      isRecentlyPurchased: true,
    },
    {
      id: 'a5000',
      title: 'NVIDIA RTX A5000',
      subTitle: '24 GB GDDR6 - 8192 CUDA Cores',
      price: '$0.22/hr ($162/month)',
      price_usd: 162,
    },
    {
      id: 'v100',
      title: 'NVIDIA V100',
      subTitle: '32 GB HBM2 - 5120 CUDA Cores',
      price: '$0.23/hr ($170/month)',
      price_usd: 170,
    },
    {
      id: 'p100',
      title: 'NVIDIA Tesla P100',
      subTitle: '16 GB HBM2 - 3584 CUDA Cores',
      price: '$0.27/hour ($196/mo)',
      price_usd: 196,
    },
    {
      id: '4x4090',
      title: '4x NVIDIA RTX 4090',
      subTitle: '24 GB GDDR6X - 16384 GPU CUDA Cores',
      price: '$0.32/hr ($228/month)',
      price_usd: 228,
    },
    {
      id: 'l4ada',
      title: 'NVIDIA L4 Ada',
      subTitle: '24 GB GDDR6 - 7680 CUDA Cores',
      price: '$0.44/hr ($316/month)',
      price_usd: 316,
    },
    {
      id: 'a6000',
      title: 'NVIDIA RTX A6000',
      subTitle: '48 GB GDDR6 - 10752 CUDA Cores',
      price: '$0.45/hr ($323/month)',
      price_usd: 323,
    },
    {
      id: 'l40sada',
      title: 'NVIDIA L40S Ada',
      subTitle: '48 GB GDDR6 - 18176 CUDA Cores',
      price: '$1.04/hr ($756/month)',
      price_usd: 756,
    },
    {
      id: 'a100',
      title: 'NVIDIA A100 PCIe',
      subTitle: '40 GB HBM2 - 6912 CUDA Cores',
      price: '$1.36/hr ($991/month)',
      price_usd: 991,
    },
    {
      id: 'h100nvl',
      title: 'NVIDIA H100 NVL',
      subTitle: '94 GB HBM3 - 14592 CUDA Cores',
      price: '$2.85/hr ($2,048/month)',
      price_usd: 2048,
    },
    {
      id: 'h100sxm',
      title: 'NVIDIA H100 SXM',
      subTitle: '80 GB HBM3 - 14592 CUDA Cores',
      price: '$3.06/hr ($2,203/month)',
      price_usd: 2203,
    },
  ];
  

  return (
    <>
      <div className="grid grid-cols-2 gap-4">
        {gpus.map((gpu, index) => (
          <motion.div
            key={gpu.id}
            initial={{ y: 25, opacity: 0 }}
            whileInView={{ y: 0, opacity: 1 }}
            transition={{ delay: 0.2 * index }}
            viewport={{ once: true }}
            className="group relative p-5 border border-white/5 bg-[#0E1618]/10 hover:bg-[#0CE77E]/25 backdrop-blur-sm duration-200"
          >
            <div className="flex justify-between items-center">
              <div className="flex items-center gap-3">
                {/* GPU SVG ICON */}
                <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect width="40" height="40" rx="3" fill="#0CE77E" />
                  <rect width="40" height="40" rx="3" fill="url(#gpuGrad)" fillOpacity="0.5" />
                  <path d="M17.0338 16.8167V15.3963C17.1707 15.3877 17.3162 15.3791 17.4531 15.3791C21.3551 15.2593 23.9051 18.7249 23.9051 18.7249C23.9051 18.7249 21.1498 22.5585 18.189 22.5585C17.7612 22.5585 17.3847 22.49 17.0424 22.3702V18.0489C18.557 18.2372 18.865 18.9046 19.7806 20.4192L21.8087 18.7078C21.8087 18.7078 20.3283 16.7654 17.8296 16.7654C17.5558 16.7739 17.2905 16.7911 17.0338 16.8167ZM17.0338 12.1104V14.2325C17.1707 14.2239 17.3162 14.2154 17.4531 14.2068C22.8697 14.0186 26.4038 18.6479 26.4038 18.6479C26.4038 18.6479 22.3478 23.5853 18.1291 23.5853C17.7441 23.5853 17.3847 23.5511 17.0424 23.4912V24.809C17.3333 24.8432 17.6414 24.8689 17.9494 24.8689C21.8857 24.8689 24.7266 22.858 27.482 20.4877C27.9355 20.8557 29.8095 21.7456 30.1946 22.1306C27.5761 24.3213 21.4749 26.0926 18.0179 26.0926C17.6842 26.0926 17.3676 26.0754 17.0509 26.0412V27.8895H32.0001V12.1104H17.0338ZM17.0338 22.3788V23.4998C13.3971 22.8494 12.3874 19.0672 12.3874 19.0672C12.3874 19.0672 14.133 17.1333 17.0338 16.8167V18.0489H17.0253C15.5107 17.8607 14.3127 19.2897 14.3127 19.2897C14.3127 19.2897 14.9887 21.6771 17.0338 22.3788ZM10.5733 18.9046C10.5733 18.9046 12.7296 15.73 17.0338 15.3963V14.2411C12.2676 14.6261 8.14307 18.665 8.14307 18.665C8.14307 18.665 10.4791 25.4251 17.0338 26.0498V24.8176C12.2248 24.21 10.5733 18.9046 10.5733 18.9046Z" fill="white" />
                  <defs>
                    <linearGradient id="gpuGrad" x1="20" y1="0" x2="20" y2="40" gradientUnits="userSpaceOnUse">
                      <stop stopOpacity="0" />
                      <stop offset="1" />
                    </linearGradient>
                  </defs>
                </svg>
                <p className="font-medium text-[#0CE77E]">{gpu.title}</p>
              </div>
              <p className="text-sm text-white/75">{gpu.subTitle}</p>
            </div>

            <div className="mt-5 flex justify-between items-center">
              <div className="flex items-center gap-3">
                <p className="p-2.5 border border-white/10 text-sm font-medium text-[#0CE77E]">
                  {gpu.price}
                </p>
                {gpu.isRecentlyPurchased && (
                  <p className="py-1.5 px-2 border border-[#0CE77E] bg-[#0CE77E]/10 flex items-center gap-1.5 text-xs font-medium text-[#0CE77E]">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                      <path
                        d="M7.58334 1.16675L2.38785 7.40136C2.18438 7.64548 2.08265 7.76757 2.08109 7.87071C2.07973 7.96031 2.11968 8.04559 2.1894 8.10194C2.2696 8.16675 2.42852 8.16675 2.74636 8.16675H7.00001L6.41668 12.8334L11.6121 6.59881C11.8156 6.35468 11.9173 6.23259 11.9189 6.12946C11.9203 6.03986 11.8804 5.95457 11.8106 5.89822C11.7304 5.83342 11.5715 5.83342 11.2537 5.83342H7.00001L7.58334 1.16675Z"
                        fill="#0CE77E"
                        stroke="#0CE77E"
                        strokeWidth="1.16667"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      />
                    </svg>
                    Recently purchased
                  </p>
                )}
              </div>

              <button
                onClick={() => setSelectedGpu(gpu)}
                className="py-2.5 px-5 border border-[#0CE77E] bg-[#0CE77E]/10 hover:bg-[#0CE77E] text-sm font-medium uppercase text-[#0CE77E] hover:text-[#0B1516] duration-200"
              >
                Rent now
              </button>
            </div>

            {/* Corner Decorations */}
            {['top', 'bottom'].map((pos) =>
              ['left', 'right'].map((side) => (
                <span
                  key={`${pos}-${side}`}
                  className={`absolute -${pos}-px -${side}-px opacity-25 group-hover:opacity-100 duration-200 ${
                    side === 'right' ? 'scale-x-[-1]' : ''
                  }`}
                >
                  <svg width="6" height="5" viewBox="0 0 6 5" fill="none">
                    <path d={pos === 'top' ? 'M1 0V4.5' : 'M1 4.5V0'} stroke="#0CE77E" />
                    <path d={pos === 'top' ? 'M5.5 0.5L1 0.5' : 'M5.5 4L1 4'} stroke="#0CE77E" />
                  </svg>
                </span>
              ))
            )}
          </motion.div>
        ))}
      </div>

      {selectedGpu && (
        <GpuPaymentModal
        isOpen={true}
        onClose={() => setSelectedGpu(null)}
        gpu={{
          id: selectedGpu.id,
          title: selectedGpu.title,
          price_usd: selectedGpu.price_usd,
          price_per_hour: selectedGpu.price, // pass it here
        }}
      />      
      )}
    </>
  );
}