'use client'

// React Imports
import { useState } from 'react'

// Next Imports
import dynamic from 'next/dynamic'

// MUI Imports
import Card from '@mui/material/Card'
import CardHeader from '@mui/material/CardHeader'
import CardContent from '@mui/material/CardContent'
import Button from '@mui/material/Button'
import ButtonGroup from '@mui/material/ButtonGroup'
import Table from '@mui/material/Table'
import TableBody from '@mui/material/TableBody'
import TableCell from '@mui/material/TableCell'
import TableContainer from '@mui/material/TableContainer'
import TableHead from '@mui/material/TableHead'
import TableRow from '@mui/material/TableRow'
import TableFooter from '@mui/material/TableFooter'
import Typography from '@mui/material/Typography'

// Third Party Imports
import type { ApexOptions } from 'apexcharts'

// Components Imports
import OptionMenu from '@core/components/option-menu'

// Styled Component Imports
const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))

// Data
const customerData = [
  { pelanggan: 'Mumpuni Imam Rajata...', perusahaan: 'Fa Hassanah', nilai: 14117300 },
  { pelanggan: 'Balangga Saefullah M...', perusahaan: 'CV Siregar Prasetya Tbk', nilai: 12520640 },
  { pelanggan: 'Jais Mursita Adrians...', perusahaan: 'UD Sinaga Waluyo', nilai: 12174120 },
  { pelanggan: 'Paramita Wijayanti M...', perusahaan: 'PD Waluyo Yuniar', nilai: 11001060 },
  { pelanggan: 'Putri Puji Pertiwi S...', perusahaan: 'CV Wahyudin Tbk', nilai: 9175560 },
  { pelanggan: 'Lainnya', perusahaan: '', nilai: 63285770 }
]

const totalNilai = customerData.reduce((sum, item) => sum + item.nilai, 0)

// Chart series and colors
const series = customerData.map(item => item.nilai)
const colors = ['#FF6B9D', '#FFD93D', '#6BCF7F', '#4D96FF', '#B39DDB', '#E91E63']

const SalesCustomerSalesChart = () => {
  const [activeView, setActiveView] = useState<'chart' | 'table'>('chart')

  const options: ApexOptions = {
    chart: {
      type: 'donut'
    },
    labels: customerData.map(item => item.pelanggan),
    colors: colors,
    legend: {
      position: 'bottom',
      horizontalAlign: 'center',
      fontSize: '14px',
      markers: {
        width: 12,
        height: 12,
        radius: 2
      },
      itemMargin: {
        horizontal: 15,
        vertical: 5
      }
    },
    plotOptions: {
      pie: {
        donut: {
          size: '70%'
        }
      }
    },
    dataLabels: {
      enabled: false
    },
    tooltip: {
      y: {
        formatter: function (val) {
          return 'Rp ' + val.toLocaleString('id-ID')
        }
      }
    },
    stroke: {
      width: 2,
      colors: ['#fff']
    }
  }

  const formatCurrency = (amount: number): string => {
    return amount.toLocaleString('id-ID')
  }

  return (
    <Card className='mt-5'>
      <CardHeader
        title='Penjualan Per Pelanggan Tahun Ini'
        action={
          <div className='flex items-center gap-2'>
            <div className='w-4 h-4 bg-gray-300 rounded cursor-pointer'></div>
            <OptionMenu options={['View More', 'Delete']} />
          </div>
        }
      />
      <CardContent>
        {/* Content based on active view */}
        {activeView === 'chart' ? (
          // Donut Chart View (Slide 1)
          <div className='flex flex-col items-center'>
            <AppReactApexCharts
              id='customer-sales-donut'
              type='donut'
              height={350}
              width='100%'
              series={series}
              options={options}
            />
          </div>
        ) : (
          // Table View (Slide 2)
          <TableContainer>
            <Table>
              <TableHead>
                <TableRow>
                  <TableCell sx={{ fontWeight: 600 }}>Pelanggan</TableCell>
                  <TableCell align='right' sx={{ fontWeight: 600 }}>
                    Nilai
                  </TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {customerData.map((row, index) => (
                  <TableRow key={index}>
                    <TableCell>
                      <div>
                        <Typography variant='body2' sx={{ fontWeight: 500 }}>
                          {row.pelanggan}
                        </Typography>
                        {row.perusahaan && (
                          <Typography variant='caption' color='text.secondary'>
                            {row.perusahaan}
                          </Typography>
                        )}
                      </div>
                    </TableCell>
                    <TableCell align='right'>{formatCurrency(row.nilai)}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
              <TableFooter>
                <TableRow sx={{ backgroundColor: '#f5f5f5' }}>
                  <TableCell sx={{ fontWeight: 700, fontSize: '14px' }}>Total</TableCell>
                  <TableCell align='right' sx={{ fontWeight: 700, fontSize: '14px' }}>
                    {formatCurrency(totalNilai)}
                  </TableCell>
                </TableRow>
              </TableFooter>
            </Table>
          </TableContainer>
        )}

        {/* Two dot indicators at bottom */}
        <div className='flex justify-center items-center gap-2 mt-6'>
          <div
            className={`w-3 h-3 rounded-full cursor-pointer transition-colors ${
              activeView === 'chart' ? 'bg-blue-500' : 'bg-gray-300'
            }`}
            onClick={() => setActiveView('chart')}
          ></div>
          <div
            className={`w-3 h-3 rounded-full cursor-pointer transition-colors ${
              activeView === 'table' ? 'bg-blue-500' : 'bg-gray-300'
            }`}
            onClick={() => setActiveView('table')}
          ></div>
        </div>
      </CardContent>
    </Card>
  )
}

export default SalesCustomerSalesChart
