import React from 'react';
import { GlassCard } from '@/components/ui/GlassCard';
import { formatAmount } from '@/lib/utils';
import { DirhamIcon } from '@/components/ui/custom-icons';
import {
    TrendingUp,
    BarChart3,
    ArrowUpRight,
    Coins,
    Library
} from 'lucide-react';

interface PortfolioSummaryCardsProps {
    overview: {
        totalValue: number;
        totalInvested: number;
        totalGains: number;
        gainPercentage: number;
        dayChange: number;
        dayChangePercent: number;
    };
    holdingsCount: number;
}

const PortfolioSummaryCards: React.FC<PortfolioSummaryCardsProps> = ({ overview, holdingsCount }) => {
    return (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            {/* Total Value */}
            <GlassCard className="p-6">
                <div className="flex items-center justify-between mb-4">
                    <p className="text-sm font-medium text-slate-500">Total Value</p>
                    <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center shadow-lg shadow-green-200">
                        <BarChart3 className="w-5 h-5 text-white" />
                    </div>
                </div>
                <div className="flex items-center gap-1">
                    <DirhamIcon className="w-6 h-6 text-slate-900" />
                    <p className="text-2xl font-bold text-slate-900">{formatAmount(overview.totalValue)}</p>
                </div>
                <div className="flex items-center mt-2">
                    <TrendingUp className="w-4 h-4 text-green-500 mr-1" />
                    <span className="text-sm text-green-600 font-medium">+{overview.gainPercentage}%</span>
                </div>
            </GlassCard>

            {/* Today's Change */}
            <GlassCard className="p-6">
                <div className="flex items-center justify-between mb-4">
                    <p className="text-sm font-medium text-slate-500">Today's Change</p>
                    <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-cyan-400 to-cyan-600 flex items-center justify-center shadow-lg shadow-cyan-200">
                        <Coins className="w-5 h-5 text-white" />
                    </div>
                </div>
                <div className="flex items-center gap-1">
                    <DirhamIcon className="w-6 h-6 text-slate-900" />
                    <p className="text-2xl font-bold text-slate-900">{formatAmount(overview.dayChange)}</p>
                </div>
                <div className="flex items-center mt-2">
                    <ArrowUpRight className="w-4 h-4 text-green-500 mr-1" />
                    <span className="text-sm text-green-600 font-medium">+{overview.dayChangePercent}%</span>
                </div>
            </GlassCard>

            {/* Holdings Count */}
            <GlassCard className="p-6">
                <div className="flex items-center justify-between mb-4">
                    <p className="text-sm font-medium text-slate-500">Holdings</p>
                    <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center shadow-lg shadow-purple-200">
                        <Library className="w-5 h-5 text-white" />
                    </div>
                </div>
                <p className="text-2xl font-bold text-slate-900">{holdingsCount}</p>
                <p className="text-sm text-slate-500 mt-2">Active Positions</p>
            </GlassCard>

            {/* Performance / Total Gains */}
            <GlassCard className="p-6">
                <div className="flex items-center justify-between mb-4">
                    <p className="text-sm font-medium text-slate-500">Total Gains</p>
                    <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center shadow-lg shadow-blue-200">
                        <TrendingUp className="w-5 h-5 text-white" />
                    </div>
                </div>
                <div className="flex items-center gap-1">
                    <DirhamIcon className="w-6 h-6 text-slate-900" />
                    <p className="text-2xl font-bold text-slate-900">{formatAmount(overview.totalGains)}</p>
                </div>
                <div className="flex items-center gap-1 text-xs text-slate-400 mt-2">
                    vs <DirhamIcon className="w-3 h-3" /> {formatAmount(overview.totalInvested)} invested
                </div>
            </GlassCard>
        </div>
    );
};

export default PortfolioSummaryCards;