frontend/components/FraudStatsCard.tsx

'use client';

import { ArrowUpRight } from 'lucide-react';

interface FraudStatsCardProps {
  totalTransactions: number;
  fraudDetected: number;
  fraudRate: number;
  weeklyData: number[];
}

export default function FraudStatsCard({ 
  totalTransactions, 
  fraudDetected, 
  fraudRate,
  weeklyData 
}: FraudStatsCardProps) {
  const days = ['Mon', 'Tue', 'Wen', 'Thu', 'Fri', 'Sat', 'Sun'];
  const maxValue = Math.max(...weeklyData, 1);
  const today = new Date().getDay();
  const todayIndex = today === 0 ? 6 : today - 1;

  return (
    <div className="card-coral rounded-3xl p-6 card-hover h-full">
      {/* Header */}
      <div className="flex items-center justify-between mb-6">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 rounded-xl bg-white/20 flex items-center justify-center">
            <Shield className="w-5 h-5" />
          </div>
          <h3 className="text-xl font-bold">FRAUD DETECTION</h3>
        </div>
        <div className="flex gap-2">
          <select className="bg-white/20 border-0 rounded-lg px-3 py-1.5 text-sm font-medium focus:ring-0 cursor-pointer">
            <option>this week</option>
            <option>this month</option>
            <option>this year</option>
          </select>
        </div>
      </div>

      {/* Chart */}
      <div className="flex items-end justify-between gap-2 mb-6 h-32">
        {weeklyData.map((value, index) => {
          const height = (value / maxValue) * 100;
          const isToday = index === todayIndex;
          return (
            <div key={index} className="flex-1 flex flex-col items-center gap-2">
              <div className="w-full relative" style={{ height: '100px' }}>
                {isToday && (
                  <div className="absolute -top-8 left-1/2 -translate-x-1/2 bg-white text-red-500 px-2 py-1 rounded-lg text-xs font-bold whitespace-nowrap shadow-lg">
                    {value.toLocaleString()}
                  </div>
                )}
                <div 
                  className={`w-full rounded-t-lg transition-all duration-500 absolute bottom-0 ${
                    isToday ? 'bg-white' : 'bg-white/40'
                  }`}
                  style={{ height: `${height}%`, minHeight: '8px' }}
                />
              </div>
              <span className={`text-xs font-medium ${isToday ? 'bg-white text-red-500 px-2 py-0.5 rounded' : 'text-white/80'}`}>
                {days[index]}
              </span>
            </div>
          );
        })}
      </div>

      {/* Stats */}
      <div className="space-y-4">
        <div className="flex items-center justify-between">
          <span className="text-white/80 text-sm">TOTAL TRANSACTIONS</span>
          <span className="text-xs bg-white/20 px-2 py-0.5 rounded-full flex items-center gap-1">
            <ArrowUpRight className="w-3 h-3" />
            +7.5%
          </span>
        </div>
        <p className="text-3xl font-bold">{totalTransactions.toLocaleString()}</p>

        <div className="pt-4 border-t border-white/20">
          <div className="flex items-center justify-between">
            <span className="text-white/80 text-sm">FRAUD DETECTED</span>
            <span className="text-xs bg-white/20 px-2 py-0.5 rounded-full flex items-center gap-1">
              <ArrowUpRight className="w-3 h-3" />
              +2.4%
            </span>
          </div>
          <div className="flex items-baseline gap-2 mt-1">
            <p className="text-2xl font-bold">{fraudDetected.toLocaleString()}</p>
            <span className="text-sm text-white/60">
              ({fraudRate.toFixed(2)}%)
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}

function Shield({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
    </svg>
  );
}