import { TrendingUp, TrendingDown, Lock } from 'lucide-react';
import { cn } from '../lib/utils';
import { Influencer, PnLData } from '../types';

interface PnLOverviewCardProps {
  influencer: Influencer;
  pnlData: PnLData;
  onLockTerminal: () => void;
  className?: string;
}

export const PnLOverviewCard = ({ influencer, pnlData, onLockTerminal, className }: PnLOverviewCardProps) => {
  const isPositive = pnlData.totalUnrealizedPnl.dollars >= 0;

  return (
    <div className={cn('glassmorphism rounded-xl p-6', className)}>
      <div className="flex items-start justify-between mb-6">
        <div className="flex items-center gap-4">
          <div className="w-16 h-16 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-xl font-bold text-white">
            {influencer.avatar}
          </div>
          <div>
            <h2 className="text-2xl font-bold text-foreground">{influencer.name}</h2>
            <p className="text-sm text-muted-foreground">{influencer.bio}</p>
            <p className="text-xs text-muted-foreground mt-1">{influencer.socialLinks}</p>
          </div>
        </div>
        
        {influencer.isPrivate && (
          <button
            onClick={onLockTerminal}
            className="p-2 rounded-lg hover:bg-accent/50 transition-colors"
            title="Lock Terminal"
          >
            <Lock className="w-5 h-5 text-muted-foreground" />
          </button>
        )}
      </div>

      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
        <div className="bg-card/50 rounded-lg p-4">
          <p className="text-xs text-muted-foreground mb-1">Win Rate</p>
          <p className="text-xl font-bold text-foreground">{influencer.stats.winRate}%</p>
        </div>
        <div className="bg-card/50 rounded-lg p-4">
          <p className="text-xs text-muted-foreground mb-1">Total P&L</p>
          <p className="text-xl font-bold text-foreground">{influencer.stats.totalPnlPercent}%</p>
        </div>
        <div className="bg-card/50 rounded-lg p-4">
          <p className="text-xs text-muted-foreground mb-1">Active Positions</p>
          <p className="text-xl font-bold text-foreground">{influencer.stats.activePositions}</p>
        </div>
        <div className="bg-card/50 rounded-lg p-4">
          <p className="text-xs text-muted-foreground mb-1">Net Worth</p>
          <p className="text-xl font-bold text-foreground">{influencer.stats.netWorthAllocation}</p>
        </div>
      </div>

      <div className="bg-gradient-to-r from-card/50 to-card/30 rounded-lg p-6 border border-border">
        <p className="text-sm text-muted-foreground mb-2">Total Unrealized P&L</p>
        <div className="flex items-center gap-3">
          {isPositive ? (
            <TrendingUp className="w-8 h-8 text-green-500" />
          ) : (
            <TrendingDown className="w-8 h-8 text-red-500" />
          )}
          <div>
            <p className={cn(
              'text-3xl font-bold',
              isPositive ? 'text-green-500' : 'text-red-500'
            )}>
              ${Math.abs(pnlData.totalUnrealizedPnl.dollars).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
            </p>
            <p className={cn(
              'text-sm font-medium',
              isPositive ? 'text-green-500' : 'text-red-500'
            )}>
              {isPositive ? '+' : ''}{pnlData.totalUnrealizedPnl.percent.toFixed(2)}%
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};