import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@ui/components/ui/card'
import {
    Bar,
    CartesianGrid,
    ComposedChart,
    LabelList,
    Line,
    ResponsiveContainer,
    Tooltip,
    XAxis,
    YAxis,
} from 'recharts'

export interface SampleChartDataItem {
    month: string
    masuk: number
    selesai: number
    persentase: number
}

interface SampleMonthlyChartProps {
    data: SampleChartDataItem[]
}

const CustomTooltip = ({ active, payload, label }: any) => {
    if (active && payload && payload.length) {
        return (
            <div className='rounded-lg border border-slate-200 bg-white p-3 shadow-lg dark:border-slate-800 dark:bg-slate-900'>
                <p className='mb-2 font-bold text-slate-900 dark:text-slate-100'>{label}</p>
                <div className='space-y-1 text-sm'>
                    <div className='flex justify-between gap-8'>
                        <span className='text-slate-500'>Sampel Masuk:</span>
                        <span className='font-mono font-bold text-teal-600'>
                            {payload[0]?.value ?? 0} sampel
                        </span>
                    </div>
                    <div className='flex justify-between gap-8'>
                        <span className='text-slate-500'>Sampel Selesai:</span>
                        <span className='font-mono font-bold text-cyan-600'>
                            {payload[1]?.value ?? 0} sampel
                        </span>
                    </div>
                    <div className='flex justify-between gap-8 mt-1 border-t pt-1'>
                        <span className='text-slate-500'>Tingkat Selesai:</span>
                        <span className='font-mono font-bold text-amber-500'>
                            {payload[2]?.value ?? 0}%
                        </span>
                    </div>
                </div>
            </div>
        )
    }
    return null
}

export function SampleMonthlyChart({ data }: SampleMonthlyChartProps) {
    return (
        <Card className='col-span-full overflow-hidden rounded-2xl border-none bg-white shadow-xl dark:bg-slate-900/50'>
            <CardHeader className='border-b bg-white/50 py-6 dark:border-slate-800 dark:bg-slate-950/20'>
                <div className='flex items-center justify-between'>
                    <div>
                        <CardTitle className='text-xl font-black uppercase tracking-tight text-slate-900 dark:text-slate-50'>
                            Sampel Masuk VS Sampel Selesai
                        </CardTitle>
                        <CardDescription className='font-medium text-slate-500 dark:text-slate-400'>
                            PT Graha Mutu Persada — Data Kinerja Pengujian Bulanan
                        </CardDescription>
                    </div>
                    <div className='flex items-center gap-6 text-xs font-bold uppercase tracking-widest'>
                        <div className='flex items-center gap-2'>
                            <div className='h-3 w-3 rounded-sm bg-teal-600' />
                            <span className='text-slate-500'>Masuk</span>
                        </div>
                        <div className='flex items-center gap-2'>
                            <div className='h-3 w-3 rounded-sm bg-cyan-400' />
                            <span className='text-slate-500'>Selesai</span>
                        </div>
                        <div className='flex items-center gap-2'>
                            <div className='h-0.5 w-3 bg-amber-500' />
                            <span className='text-slate-500'>Tingkat Selesai (%)</span>
                        </div>
                    </div>
                </div>
            </CardHeader>
            <CardContent className='px-2 pt-8'>
                <div className='h-[420px] w-full'>
                    <ResponsiveContainer width='100%' height='100%'>
                        <ComposedChart
                            data={data}
                            margin={{ top: 20, right: 30, left: 20, bottom: 20 }}
                        >
                            <CartesianGrid
                                strokeDasharray='3 3'
                                vertical={false}
                                stroke='#e2e8f0'
                                opacity={0.5}
                            />
                            <XAxis
                                dataKey='month'
                                axisLine={false}
                                tickLine={false}
                                tick={{ fill: '#64748b', fontSize: 12, fontWeight: 600 }}
                                dy={10}
                            />
                            <YAxis
                                yAxisId='left'
                                axisLine={false}
                                tickLine={false}
                                tick={{ fill: '#64748b', fontSize: 11 }}
                                tickFormatter={(v) => `${v}`}
                                width={50}
                                label={{
                                    value: 'Sampel',
                                    angle: -90,
                                    position: 'insideLeft',
                                    offset: -5,
                                    style: { fill: '#94a3b8', fontSize: 11 },
                                }}
                            />
                            <YAxis
                                yAxisId='right'
                                orientation='right'
                                axisLine={false}
                                tickLine={false}
                                tick={{ fill: '#94a3b8', fontSize: 11 }}
                                tickFormatter={(v) => `${v}%`}
                                domain={[0, 100]}
                            />
                            <Tooltip content={<CustomTooltip />} />

                            {/* Sampel Masuk */}
                            <Bar
                                yAxisId='left'
                                dataKey='masuk'
                                name='Sampel Masuk'
                                fill='#0d9488'
                                radius={[4, 4, 0, 0]}
                                barSize={36}
                            >
                                <LabelList
                                    dataKey='masuk'
                                    position='top'
                                    style={{ fill: '#0d9488', fontSize: 10, fontWeight: 700 }}
                                />
                            </Bar>

                            {/* Sampel Selesai */}
                            <Bar
                                yAxisId='left'
                                dataKey='selesai'
                                name='Sampel Selesai'
                                fill='#22d3ee'
                                radius={[4, 4, 0, 0]}
                                barSize={36}
                            >
                                <LabelList
                                    dataKey='selesai'
                                    position='top'
                                    style={{ fill: '#0891b2', fontSize: 10, fontWeight: 700 }}
                                />
                            </Bar>

                            {/* Tingkat Penyelesaian */}
                            <Line
                                yAxisId='right'
                                type='monotone'
                                dataKey='persentase'
                                name='Tingkat Selesai'
                                stroke='#f59e0b'
                                strokeWidth={3}
                                dot={{ r: 4, fill: '#f59e0b', strokeWidth: 2, stroke: '#fff' }}
                                activeDot={{ r: 6, strokeWidth: 0 }}
                            >
                                <LabelList
                                    dataKey='persentase'
                                    position='top'
                                    formatter={(v: unknown) => `${v ?? 0}%`}
                                    style={{ fill: '#d97706', fontSize: 11, fontWeight: 800 }}
                                    offset={10}
                                />
                            </Line>
                        </ComposedChart>
                    </ResponsiveContainer>
                </div>
            </CardContent>
        </Card>
    )
}