import React, { useState } from 'react'

// ** MUI Imports
import Box from '@mui/material/Box'
import Grid from '@mui/material/Grid'
import Card from '@mui/material/Card'
import CardContent from '@mui/material/CardContent'
import CardMedia from '@mui/material/CardMedia'
import Typography from '@mui/material/Typography'
import Tabs from '@mui/material/Tabs'
import Tab from '@mui/material/Tab'
import { styled } from '@mui/material/styles'


interface GiftCardsSectionProps {
  onGiftCardClick: (giftCard: any) => void
}

interface TabPanelProps {
  children?: React.ReactNode
  index: number
  value: number
}

function TabPanel(props: TabPanelProps) {
  const { children, value, index, ...other } = props
  return (
    <div role='tabpanel' hidden={value !== index} {...other}>
      {value === index && <Box sx={{ py: 3 }}>{children}</Box>}
    </div>
  )
}

const GiftCardCard = styled(Card)(({ theme }) => ({
  cursor: 'pointer',
  transition: 'transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out',
  '&:hover': {
    transform: 'translateY(-5px)',
    boxShadow: theme.shadows[10]
  }
}))

// Popular Gift Cards
const popularGiftCards = [
  { id: 'tommy-bahama', name: 'Tommy Bahama', image: '/images/voucher/tommy-bahama.png', category: 'popular' },
  { id: 'turo-usa', name: 'Turo USA', image: '/images/voucher/turo-usa.webp', category: 'popular' },
  { id: 'stubhub', name: 'StubHub', image: '/images/voucher/stubhub.webp', category: 'popular' },
  { id: 'twitch', name: 'Twitch', image: '/images/voucher/twitch.webp', category: 'popular' }
]

// Restaurant Gift Cards
const restaurantGiftCards = [
  { id: 'texas-roadhouse', name: 'Texas Roadhouse', image: '/images/voucher/texas-roadhouse.webp', category: 'restaurants' },
  { id: 'kammelna', name: 'Kammelna', image: '/images/voucher/kammelna.webp', category: 'restaurants' },
  { id: 'kitkem', name: 'Kitkem', image: '/images/voucher/kitkem.webp', category: 'restaurants' },
  { id: 'blaze-pizza', name: 'Blaze Pizza', image: '/images/voucher/blaze-pizza.webp', category: 'restaurants' }
]

// Groceries Gift Cards
const groceriesGiftCards = [
  { id: 'instacart', name: 'Instacart', image: '/images/voucher/instacart.webp', category: 'groceries' },
  { id: 'kroger', name: 'Kroger', image: '/images/voucher/kroger.webp', category: 'groceries' },
  { id: 'walmart', name: 'Walmart', image: '/images/voucher/walmart.webp', category: 'groceries' },
  { id: 'petsmart', name: 'PetSmart', image: '/images/voucher/petsmart.webp', category: 'groceries' }
]

// Payment Cards Gift Cards
const paymentCardsGiftCards = [
  { id: 'swype-global-usa', name: 'Swype Global USA', image: '/images/voucher/swype-global-usa.webp', category: 'payment-cards' },
  { id: 'rewarble-gift-card', name: 'Rewarble Gift Card', image: '/images/voucher/rewarble-gift-card.webp', category: 'payment-cards' },
  { id: 'virtual-mastercard', name: 'Virtual Mastercard', image: '/images/voucher/virtual-mastercard.webp', category: 'payment-cards' }
]

// Shopping Gift Cards
const shoppingGiftCards = [
  { id: 'topgolf-egift-card', name: 'Topgolf egift Card', image: '/images/voucher/topgolf-egift-card.webp', category: 'shopping' },
  { id: 'ulta-beauty', name: 'Ulta Beauty', image: '/images/voucher/ulta-beauty.webp', category: 'shopping' },
  { id: 'malooba', name: 'Malooba', image: '/images/voucher/malooba.webp', category: 'shopping' },
  { id: 'chicos', name: 'Chicos', image: '/images/voucher/chicos.webp', category: 'shopping' }
]

// Entertainment Gift Cards
const entertainmentGiftCards = [
  { id: 'apple-gift-card', name: 'Apple Gift Card', image: '/images/voucher/apple-gift-card.webp', category: 'entertainment' },
  { id: 'hello-yo', name: 'Hello Yo', image: '/images/voucher/hello-yo.webp', category: 'entertainment' },
  { id: 'alamo-drafthouse-cinema', name: 'Alamo Drafthouse Cinema', image: '/images/voucher/alamo-drafthouse-cinema.webp', category: 'entertainment' },
  { id: 'atom-movie-tickets', name: 'Atom Movie Tickets', image: '/images/voucher/atom-movie-tickets.webp', category: 'entertainment' }
]

// Travel Gift Cards
const travelGiftCards = [
  { id: 'airbnb', name: 'Airbnb', image: '/images/voucher/airbnb.webp', category: 'travel' },
  { id: 'carnival', name: 'Carnival', image: '/images/voucher/carnival.webp', category: 'travel' },
  { id: 'flightgift', name: 'Flightgift', image: '/images/voucher/flightgift.webp', category: 'travel' },
  { id: 'flystaygift', name: 'Flystaygift', image: '/images/voucher/flystaygift.webp', category: 'travel' }
]

// Gaming Gift Cards
const gamingGiftCards = [
  { id: 'nintendo', name: 'Nintendo', image: '/images/voucher/nintendo.webp', category: 'gaming' },
  { id: 'minecraft-gaming', name: 'Minecraft', image: '/images/voucher/minecraft.webp', category: 'gaming' },
  { id: 'pubg', name: 'PUBG', image: '/images/voucher/pubg.webp', category: 'gaming' },
  { id: 'badlanders', name: 'Badlanders', image: '/images/voucher/badlanders.webp', category: 'gaming' },
  { id: 'kigso-games', name: 'Kigso Games', image: '/images/voucher/kigso-games.webp', category: 'gaming' }
]

// All Gift Cards (combining all categories)
const allGiftCards = [
    // Original Gift Cards
  { id: 'google-play', name: 'Google Play', image: '/images/voucher/google-play.png', category: 'gift-cards' },
  { id: 'apple-store', name: 'Apple Store', image: '/images/voucher/apple-store.webp', category: 'gift-cards' },
  { id: 'spotify', name: 'Spotify', image: '/images/voucher/spotify.webp', category: 'gift-cards' },
  { id: 'uber', name: 'Uber', image: '/images/voucher/uber.webp', category: 'gift-cards' },
  { id: 'xbox', name: 'Xbox', image: '/images/voucher/xbox.webp', category: 'gift-cards' },
  { id: 'ebay', name: 'eBay', image: '/images/voucher/ebay.webp', category: 'gift-cards' },
  { id: 'netflix', name: 'Netflix', image: '/images/voucher/netflix.webp', category: 'gift-cards' },
  { id: 'amazon', name: 'Amazon', image: '/images/voucher/amazon.webp', category: 'gift-cards' },
  { id: 'ubereats', name: 'UberEats', image: '/images/voucher/ubereats.webp', category: 'gift-cards' },
  { id: 'tim-hortons', name: 'Tim Hortons', image: '/images/voucher/tim-hortons.webp', category: 'gift-cards' },
  { id: 'prime-video', name: 'Prime Video', image: '/images/voucher/prime-video.webp', category: 'gift-cards' },
  { id: 'hulu', name: 'Hulu', image: '/images/voucher/hulu.webp', category: 'gift-cards' },
  { id: 'fortnite', name: 'Fortnite', image: '/images/voucher/fortnite.webp', category: 'gift-cards' },
  { id: 'roblox', name: 'Roblox', image: '/images/voucher/roblox.webp', category: 'gift-cards' },
  { id: 'mcdonalds', name: "McDonald's", image: '/images/voucher/mcdonalds.webp', category: 'gift-cards' },
  { id: 'starbucks', name: 'Starbucks', image: '/images/voucher/starbucks.webp', category: 'gift-cards' },

  // Popular
  ...popularGiftCards,

  // Restaurants
  ...restaurantGiftCards,

  // Groceries
  ...groceriesGiftCards,

  // Payment Cards
  ...paymentCardsGiftCards,

  // Shopping
  ...shoppingGiftCards,

  // Entertainment
  ...entertainmentGiftCards,

  // Travel
  ...travelGiftCards,

  // Gaming
  ...gamingGiftCards,
  ]

const GiftCardsSection = ({ onGiftCardClick }: GiftCardsSectionProps) => {
  const [activeSubTab, setActiveSubTab] = useState(0)

  const handleSubTabChange = (event: React.SyntheticEvent, newValue: number) => {
    setActiveSubTab(newValue)
  }

  const getCurrentCards = () => {
    switch (activeSubTab) {
      case 0:
        return popularGiftCards
      case 1:
        return restaurantGiftCards
      case 2:
        return groceriesGiftCards
      case 3:
        return paymentCardsGiftCards
      case 4:
        return shoppingGiftCards
      case 5:
        return entertainmentGiftCards
      case 6:
        return travelGiftCards
      case 7:
        return gamingGiftCards
      case 8:
        return allGiftCards
      default:
        return popularGiftCards
    }
  }

  const currentCards = getCurrentCards()

  return (
    <Box>
      <Tabs 
        value={activeSubTab} 
        onChange={handleSubTabChange}
        variant='scrollable'
        scrollButtons='auto'
        sx={{ mb: 3, borderBottom: 1, borderColor: 'divider' }}
      >
        <Tab label='Popular' />
        <Tab label='Restaurants' />
        <Tab label='Groceries' />
        <Tab label='Payment Cards' />
        <Tab label='Shopping' />
        <Tab label='Entertainment' />
        <Tab label='Travel' />
        <Tab label='Gaming' />
        <Tab label='All Gift Cards' />
      </Tabs>

      <TabPanel value={activeSubTab} index={0}>
        <Grid container spacing={4}>
          {currentCards.map((card) => (
            <Grid item xs={12} sm={6} md={4} lg={3} key={card.id}>
              <GiftCardCard onClick={() => onGiftCardClick(card)}>
                <CardMedia
                  component="img"
                  height="200"
                  image={card.image}
                  alt={card.name}
                  sx={{ objectFit: 'cover' }}
                />
                <CardContent sx={{ textAlign: 'center' }}>
                  <Typography variant='h6' sx={{ fontWeight: 600 }}>
                    {card.name}
                  </Typography>
                </CardContent>
              </GiftCardCard>
            </Grid>
          ))}
        </Grid>
      </TabPanel>

      <TabPanel value={activeSubTab} index={1}>
        <Grid container spacing={4}>
          {currentCards.map((card) => (
            <Grid item xs={12} sm={6} md={4} lg={3} key={card.id}>
              <GiftCardCard onClick={() => onGiftCardClick(card)}>
                <CardMedia
                  component="img"
                  height="200"
                  image={card.image}
                  alt={card.name}
                  sx={{ objectFit: 'cover' }}
                />
                <CardContent sx={{ textAlign: 'center' }}>
                  <Typography variant='h6' sx={{ fontWeight: 600 }}>
                    {card.name}
                  </Typography>
                </CardContent>
              </GiftCardCard>
            </Grid>
          ))}
        </Grid>
      </TabPanel>

      <TabPanel value={activeSubTab} index={2}>
        <Grid container spacing={4}>
          {currentCards.map((card) => (
            <Grid item xs={12} sm={6} md={4} lg={3} key={card.id}>
              <GiftCardCard onClick={() => onGiftCardClick(card)}>
                <CardMedia
                  component="img"
                  height="200"
                  image={card.image}
                  alt={card.name}
                  sx={{ objectFit: 'cover' }}
                />
                <CardContent sx={{ textAlign: 'center' }}>
                  <Typography variant='h6' sx={{ fontWeight: 600 }}>
                    {card.name}
                  </Typography>
                </CardContent>
              </GiftCardCard>
            </Grid>
          ))}
        </Grid>
      </TabPanel>

      <TabPanel value={activeSubTab} index={3}>
        <Grid container spacing={4}>
          {currentCards.map((card) => (
            <Grid item xs={12} sm={6} md={4} lg={3} key={card.id}>
              <GiftCardCard onClick={() => onGiftCardClick(card)}>
                <CardMedia
                  component="img"
                  height="200"
                  image={card.image}
                  alt={card.name}
                  sx={{ objectFit: 'cover' }}
                />
                <CardContent sx={{ textAlign: 'center' }}>
                  <Typography variant='h6' sx={{ fontWeight: 600 }}>
                    {card.name}
                  </Typography>
                </CardContent>
              </GiftCardCard>
            </Grid>
          ))}
        </Grid>
      </TabPanel>

      <TabPanel value={activeSubTab} index={4}>
        <Grid container spacing={4}>
          {currentCards.map((card) => (
            <Grid item xs={12} sm={6} md={4} lg={3} key={card.id}>
              <GiftCardCard onClick={() => onGiftCardClick(card)}>
                <CardMedia
                  component="img"
                  height="200"
                  image={card.image}
                  alt={card.name}
                  sx={{ objectFit: 'cover' }}
                />
                <CardContent sx={{ textAlign: 'center' }}>
                  <Typography variant='h6' sx={{ fontWeight: 600 }}>
                    {card.name}
                  </Typography>
                </CardContent>
              </GiftCardCard>
            </Grid>
          ))}
        </Grid>
      </TabPanel>

      <TabPanel value={activeSubTab} index={5}>
        <Grid container spacing={4}>
          {currentCards.map((card) => (
            <Grid item xs={12} sm={6} md={4} lg={3} key={card.id}>
              <GiftCardCard onClick={() => onGiftCardClick(card)}>
                <CardMedia
                  component="img"
                  height="200"
                  image={card.image}
                  alt={card.name}
                  sx={{ objectFit: 'cover' }}
                />
                <CardContent sx={{ textAlign: 'center' }}>
                  <Typography variant='h6' sx={{ fontWeight: 600 }}>
                    {card.name}
                  </Typography>
                </CardContent>
              </GiftCardCard>
            </Grid>
          ))}
        </Grid>
      </TabPanel>

      <TabPanel value={activeSubTab} index={6}>
        <Grid container spacing={4}>
          {currentCards.map((card) => (
            <Grid item xs={12} sm={6} md={4} lg={3} key={card.id}>
              <GiftCardCard onClick={() => onGiftCardClick(card)}>
                <CardMedia
                  component="img"
                  height="200"
                  image={card.image}
                  alt={card.name}
                  sx={{ objectFit: 'cover' }}
                />
                <CardContent sx={{ textAlign: 'center' }}>
                  <Typography variant='h6' sx={{ fontWeight: 600 }}>
                    {card.name}
                  </Typography>
                </CardContent>
              </GiftCardCard>
            </Grid>
          ))}
        </Grid>
      </TabPanel>

      <TabPanel value={activeSubTab} index={7}>
        <Grid container spacing={4}>
          {currentCards.map((card) => (
            <Grid item xs={12} sm={6} md={4} lg={3} key={card.id}>
              <GiftCardCard onClick={() => onGiftCardClick(card)}>
                <CardMedia
                  component="img"
                  height="200"
                  image={card.image}
                  alt={card.name}
                  sx={{ objectFit: 'cover' }}
                />
                <CardContent sx={{ textAlign: 'center' }}>
                  <Typography variant='h6' sx={{ fontWeight: 600 }}>
                    {card.name}
                  </Typography>
                </CardContent>
              </GiftCardCard>
            </Grid>
          ))}
        </Grid>
      </TabPanel>

      <TabPanel value={activeSubTab} index={8}>
        <Grid container spacing={4}>
          {currentCards.map((card) => (
            <Grid item xs={12} sm={6} md={4} lg={3} key={card.id}>
              <GiftCardCard onClick={() => onGiftCardClick(card)}>
                <CardMedia
                  component="img"
                  height="200"
                  image={card.image}
                  alt={card.name}
                  sx={{ objectFit: 'cover' }}
                />
                <CardContent sx={{ textAlign: 'center' }}>
                  <Typography variant='h6' sx={{ fontWeight: 600 }}>
                    {card.name}
                  </Typography>
                </CardContent>
              </GiftCardCard>
            </Grid>
          ))}
        </Grid>
      </TabPanel>
    </Box>
  )
}

export default GiftCardsSection