import React from 'react';
import { GlassCard } from '@/components/ui/GlassCard';
import { AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';
import { DirhamIcon } from '@/components/ui/custom-icons';

const InvestmentPerformance: React.FC = () => {
    // Dummy chart data for visualization
    const data = [
        { name: 'Jan', value: 2400000 },
        { name: 'Feb', value: 2450000 },
        { name: 'Mar', value: 2550000 },
        { name: 'Apr', value: 2500000 },
        { name: 'May', value: 2650000 },
        { name: 'Jun', value: 2847500 },
    ];

    return (
        <GlassCard className="p-6 h-full flex flex-col">
            <div className="flex justify-between items-center mb-6">
                <h3 className="text-lg font-semibold text-slate-800">Investment Performance</h3>
                <select className="bg-slate-50 border-none text-sm text-slate-600 rounded-lg p-2 focus:ring-0 cursor-pointer">
                    <option>Last 6 Months</option>
                    <option>Year to Date</option>
                    <option>All Time</option>
                </select>
            </div>

            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                <div>
                    <p className="text-xs text-slate-500">Total Portfolio</p>
                    <div className="flex items-center gap-1 font-bold text-slate-800 text-lg">
                        <DirhamIcon className="w-4 h-4" /> 2.85M
                    </div>
                </div>
                <div>
                    <p className="text-xs text-slate-500">Annual Return</p>
                    <p className="font-bold text-green-600 text-lg">+12.7%</p>
                </div>
                <div>
                    <p className="text-xs text-slate-500">Monthly Contrib.</p>
                    <div className="flex items-center gap-1 font-bold text-slate-800 text-lg">
                        <DirhamIcon className="w-4 h-4" /> 12.5K
                    </div>
                </div>
                <div>
                    <p className="text-xs text-slate-500">Risk Score</p>
                    <p className="font-bold text-orange-500 text-lg">3.2/10</p>
                </div>
            </div>

            <div className="flex-1 min-h-[200px] w-full">
                <ResponsiveContainer width="100%" height="100%">
                    <AreaChart data={data}>
                        <defs>
                            <linearGradient id="colorValue" x1="0" y1="0" x2="0" y2="1">
                                <stop offset="5%" stopColor="#8b5cf6" stopOpacity={0.3} />
                                <stop offset="95%" stopColor="#8b5cf6" stopOpacity={0} />
                            </linearGradient>
                        </defs>
                        <XAxis dataKey="name" axisLine={false} tickLine={false} tick={{ fontSize: 12, fill: '#94a3b8' }} />
                        <Tooltip
                            contentStyle={{ borderRadius: '12px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }}
                        />
                        <Area type="monotone" dataKey="value" stroke="#8b5cf6" strokeWidth={3} fillOpacity={1} fill="url(#colorValue)" />
                    </AreaChart>
                </ResponsiveContainer>
            </div>
        </GlassCard>
    );
};

export default InvestmentPerformance;