"use client"

import * as React from "react"
import { ResponsiveContainer, AreaChart, CartesianGrid, XAxis, YAxis, Tooltip, Area } from "recharts"
import { TransactionTrendPoint } from "./types"
import { NoDataFound } from "@/components/ui/no-data-found"

interface TransactionTrendChartProps {
    data?: TransactionTrendPoint[] | null
}

export const TransactionTrendChart = React.memo(function TransactionTrendChart({
    data,
}: TransactionTrendChartProps) {
    const points = data ?? []
    if (!points.length) {
        return (
            <div className="bg-[rgba(255,255,255,0.45)] dark:bg-[rgba(244,246,255,0.4)] backdrop-blur-[15px] border border-white/60 rounded-[14px] p-6 shadow-[0px_2px_15px_0px_rgba(0,0,0,0.06)]">
                <h3 className="text-[13px] font-extrabold text-text font-['Lexend'] mb-0.5">Transaction Trend</h3>
                <p className="text-[11px] text-gray-700 font-medium mb-4 uppercase tracking-tight">Monthly paid volume ($M) · All time</p>
                <NoDataFound message="No transaction trend data" description="Paid transactions in this period will appear here." size="sm" />
            </div>
        )
    }

    return (
        <div className="bg-[rgba(255,255,255,0.45)] dark:bg-[rgba(244,246,255,0.4)] backdrop-blur-[15px] border border-white/60 rounded-[14px] p-6 shadow-[0px_2px_15px_0px_rgba(0,0,0,0.06)] hover:shadow-[0px_6px_25px_0px_rgba(108,99,255,0.1)] transition-all duration-300 hover:scale-[1.005]">
            <div className="flex justify-between items-start mb-6">
                <div>
                    <h3 className="text-[13px] font-extrabold text-text font-['Lexend'] mb-0.5">Transaction Trend</h3>
                    <p className="text-[11px] text-gray-700 font-medium mb-1 uppercase tracking-tight">Monthly paid volume ($M) · All time</p>
                </div>
                <div className="flex items-center gap-1.5">
                    <div className="size-2 rounded bg-accent" />
                    <span className="text-[10px] font-bold text-gray-700 uppercase">Paid</span>
                </div>
            </div>
            <div className="h-[240px]">
                <ResponsiveContainer width="100%" height="100%">
                    <AreaChart data={points}>
                        <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#E4E6EF88" />
                        <XAxis
                            dataKey="label"
                            axisLine={false}
                            tickLine={false}
                            tick={{ fontSize: 10, fill: "#6B7280", fontWeight: "bold" }}
                            dy={8}
                        />
                        <YAxis
                            axisLine={false}
                            tickLine={false}
                            tick={{ fontSize: 10, fill: "#6B7280" }}
                            dx={-8}
                        />
                        <Tooltip
                            cursor={{ stroke: '#6C63FF18', strokeWidth: 20 }}
                            contentStyle={{
                                borderRadius: '12px',
                                border: '1px solid rgba(255, 255, 255, 0.2)',
                                backdropFilter: 'blur(10px)',
                                boxShadow: '0 8px 32px 0 rgba(31, 38, 135, 0.15)',
                                padding: '12px',
                                backgroundColor: 'rgba(15, 17, 23, 0.85)',
                                color: '#fff'
                            }}
                            itemStyle={{ color: '#fff', fontSize: '12px', fontWeight: 'bold' }}
                        />
                        <Area
                            type="monotone"
                            dataKey="amount"
                            fill="url(#txGrad)"
                            stroke="#6C63FF"
                            strokeWidth={3}
                            dot={{ r: 4, fill: '#6C63FF', stroke: '#fff', strokeWidth: 2 }}
                            activeDot={{ r: 6, fill: '#6C63FF', stroke: '#fff', strokeWidth: 2 }}
                        />
                        <defs>
                            <linearGradient id="txGrad" x1="0" y1="0" x2="0" y2="1">
                                <stop offset="5%" stopColor="#6C63FF" stopOpacity={0.1} />
                                <stop offset="95%" stopColor="#6C63FF" stopOpacity={0} />
                            </linearGradient>
                        </defs>
                    </AreaChart>
                </ResponsiveContainer>
            </div>
        </div>
    )
})