// src/views/dashboards/merchant/GatewayChart.jsx
import React from 'react'
import { motion } from 'framer-motion'

// ** MUI
import { Card, CardContent, Box, Typography, Chip } from '@mui/material'
import { useTheme } from '@mui/material/styles'

// ** Chart
import { Line } from 'react-chartjs-2'
import { ChartData, ChartOptions } from 'chart.js'

const GatewayChart = () => {
  const theme = useTheme()

  const options: ChartOptions<'line'> = {
    responsive: true,
    maintainAspectRatio: false,
    animation: {
      duration: 1200,
      easing: 'easeInOutQuart'
    },
    interaction: {
      intersect: false,
      mode: 'index'
    },
    plugins: {
      legend: {
        display: false
      },
     tooltip: {
  backgroundColor: 'rgba(255,255,255,0.95)',
  titleColor: '#1a1a2e',
  bodyColor: '#1a1a2e',
  borderColor: 'rgba(40,218,198,0.2)',
  borderWidth: 1,
  padding: 14,
  cornerRadius: 14,
  callbacks: {
    label: (context: any) => `$${context.parsed.y.toLocaleString()}`
  }
}
    },
    scales: {
      x: {
        grid: {
          display: false
        },
        ticks: {
          color: theme.palette.text.disabled,
          font: {
            size: 11,
            weight: '500'
          }
        }
      },
      y: {
       grid: {
  color: theme.palette.divider
},
border: {
  display: false
},
        ticks: {
          color: theme.palette.text.disabled,
          font: {
            size: 11,
            weight: '500'
          },
          callback: function(value: any) {
            return `$${value.toLocaleString()}`
          }
        }
      }
    }
  }

  const data: ChartData<'line'> = {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    datasets: [
      {
        label: 'Volume',
        data: [12500, 18900, 15600, 22000, 19800, 24500, 28900],
        borderColor: '#28DAC6',
        backgroundColor: (context: any) => {
          const ctx = context.chart.ctx
          const gradient = ctx.createLinearGradient(0, 0, 0, 300)
          gradient.addColorStop(0, 'rgba(40,218,198,0.3)')
          gradient.addColorStop(1, 'rgba(40,218,198,0)')
          return gradient
        },
        fill: true,
        tension: 0.4,
        pointBackgroundColor: '#28DAC6',
        pointBorderColor: '#fff',
        pointBorderWidth: 2,
        pointRadius: 4,
        pointHoverRadius: 7,
        pointHoverBackgroundColor: '#2D9CFF',
        borderWidth: 3
      }
    ]
  }

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
      style={{ height: '100%' }}
    >
      <Card
        sx={{
          height: '100%',
          borderRadius: 4,
          background: 'rgba(255,255,255,0.9)',
          backdropFilter: 'blur(18px)',
          WebkitBackdropFilter: 'blur(18px)',
          border: '1px solid rgba(255,255,255,0.35)',
          boxShadow: '0 4px 20px rgba(0,0,0,0.04)',
          position: 'relative',
          overflow: 'hidden',
          transition: 'all 0.3s ease',
          '&:hover': {
            boxShadow: '0 12px 40px rgba(0,0,0,0.08)'
          }
        }}
      >
        {/* Premium gradient accent */}
        <Box
          sx={{
            position: 'absolute',
            top: 0,
            right: 0,
            width: '50%',
            height: '100%',
            background: 'linear-gradient(135deg, transparent 0%, rgba(40,218,198,0.05) 100%)',
            pointerEvents: 'none'
          }}
        />

        <CardContent sx={{ p: 3, height: '100%', display: 'flex', flexDirection: 'column' }}>
          {/* Header */}
          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 2 }}>
            <Box>
              <Typography
                variant="caption"
                color="text.secondary"
                sx={{
                  textTransform: 'uppercase',
                  letterSpacing: '1.5px',
                  fontWeight: 600,
                  fontSize: 10
                }}
              >
                Gateway Analytics
              </Typography>
              <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mt: 0.5 }}>
                <Typography variant="h5" sx={{ fontWeight: 700 }}>
                  $28,900
                </Typography>
                <Chip
                  label="+12.5%"
                  size="small"
                  sx={{
                    backgroundColor: 'rgba(40,218,198,0.12)',
                    color: '#28DAC6',
                    fontWeight: 600,
                    fontSize: 11,
                    height: 24,
                    borderRadius: '6px'
                  }}
                />
              </Box>
            </Box>
            {/* <Box
              sx={{
                width: 44,
                height: 44,
                borderRadius: '14px',
                background: 'linear-gradient(135deg, rgba(40,218,198,0.15), rgba(45,156,255,0.12))',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: 20
              }}
            >
              📈
            </Box> */}
          </Box>

          {/* Chart */}
          <Box sx={{ flex: 1, minHeight: 200 }}>
            <Line data={data} options={options} />
          </Box>

          {/* Bottom stats */}
          <Box
            sx={{
              display: 'flex',
              justifyContent: 'space-between',
              mt: 1.5,
              pt: 1.5,
              borderTop: '1px solid',
              borderColor: 'divider'
            }}
          >
            <Box>
              <Typography variant="caption" color="text.secondary" sx={{ fontWeight: 500 }}>
                Total Transactions
              </Typography>
              <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
                8,642
              </Typography>
            </Box>
            <Box sx={{ textAlign: 'right' }}>
              <Typography variant="caption" color="text.secondary" sx={{ fontWeight: 500 }}>
                Avg. Value
              </Typography>
              <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
                $3.34
              </Typography>
            </Box>
          </Box>
        </CardContent>
      </Card>
    </motion.div>
  )
}

export default GatewayChart