/**
 * Signal Pack Card Component
 * Displays signal pack summary with provider info, stats, and subscription options
 */

import React from 'react';
import { Link } from 'react-router-dom';
import {
  TrendingUp,
  TrendingDown,
  Star,
  Users,
  BarChart2,
  CheckCircle,
  Zap,
} from 'lucide-react';
import type { MarketplaceProductListItem } from '../../../types/marketplace.types';

interface SignalPackCardProps {
  pack: MarketplaceProductListItem;
  onSubscribe?: (packId: string) => void;
}

export const SignalPackCard: React.FC<SignalPackCardProps> = ({ pack, onSubscribe }) => {
  const riskLevelColors: Record<string, string> = {
    low: 'bg-green-500/20 text-green-400 border-green-500/30',
    medium: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
    high: 'bg-red-500/20 text-red-400 border-red-500/30',
  };

  const getRiskTag = () => {
    const tag = pack.tags.find((t) => ['low', 'medium', 'high'].includes(t.toLowerCase()));
    return tag || 'medium';
  };

  return (
    <div className="bg-gray-800 rounded-xl border border-gray-700 overflow-hidden hover:border-gray-600 transition-all duration-200 hover:shadow-lg hover:shadow-blue-500/5">
      {/* Header with thumbnail */}
      <div className="relative h-40 bg-gradient-to-br from-blue-600/20 to-purple-600/20">
        {pack.thumbnailUrl ? (
          <img
            src={pack.thumbnailUrl}
            alt={pack.name}
            className="w-full h-full object-cover"
          />
        ) : (
          <div className="w-full h-full flex items-center justify-center">
            <BarChart2 className="w-16 h-16 text-blue-500/50" />
          </div>
        )}

        {/* Free trial badge */}
        {pack.hasFreeTrial && (
          <div className="absolute top-3 left-3 px-2 py-1 bg-green-500 text-white text-xs font-medium rounded-full flex items-center gap-1">
            <Zap className="w-3 h-3" />
            Free Trial
          </div>
        )}

        {/* Risk level badge */}
        <div
          className={`absolute top-3 right-3 px-2 py-1 text-xs font-medium rounded-full border ${
            riskLevelColors[getRiskTag()]
          }`}
        >
          {getRiskTag().charAt(0).toUpperCase() + getRiskTag().slice(1)} Risk
        </div>
      </div>

      {/* Content */}
      <div className="p-4">
        {/* Provider info */}
        <div className="flex items-center gap-2 mb-3">
          {pack.providerAvatar ? (
            <img
              src={pack.providerAvatar}
              alt={pack.providerName}
              className="w-8 h-8 rounded-full"
            />
          ) : (
            <div className="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center text-gray-400 text-sm">
              {pack.providerName.charAt(0)}
            </div>
          )}
          <div className="flex-1 min-w-0">
            <p className="text-sm text-gray-400 truncate flex items-center gap-1">
              {pack.providerName}
              {pack.providerVerified && (
                <CheckCircle className="w-3.5 h-3.5 text-blue-400" />
              )}
            </p>
          </div>
        </div>

        {/* Title */}
        <h3 className="text-lg font-semibold text-white mb-2 line-clamp-1">
          {pack.name}
        </h3>

        {/* Description */}
        <p className="text-sm text-gray-400 mb-4 line-clamp-2">
          {pack.shortDescription || 'Professional trading signals for consistent profits.'}
        </p>

        {/* Stats grid */}
        <div className="grid grid-cols-2 gap-3 mb-4">
          <div className="bg-gray-900/50 rounded-lg p-2.5">
            <div className="flex items-center gap-1.5 text-gray-400 text-xs mb-1">
              <TrendingUp className="w-3.5 h-3.5" />
              Win Rate
            </div>
            <p className="text-green-400 font-semibold">
              {(Math.random() * 20 + 70).toFixed(1)}%
            </p>
          </div>
          <div className="bg-gray-900/50 rounded-lg p-2.5">
            <div className="flex items-center gap-1.5 text-gray-400 text-xs mb-1">
              <Users className="w-3.5 h-3.5" />
              Subscribers
            </div>
            <p className="text-white font-semibold">
              {pack.totalSubscribers?.toLocaleString() || '0'}
            </p>
          </div>
        </div>

        {/* Rating */}
        <div className="flex items-center gap-2 mb-4">
          <div className="flex items-center gap-1">
            {[1, 2, 3, 4, 5].map((star) => (
              <Star
                key={star}
                className={`w-4 h-4 ${
                  star <= Math.round(pack.rating)
                    ? 'text-yellow-400 fill-yellow-400'
                    : 'text-gray-600'
                }`}
              />
            ))}
          </div>
          <span className="text-sm text-gray-400">
            ({pack.totalReviews} reviews)
          </span>
        </div>

        {/* Price and CTA */}
        <div className="flex items-center justify-between pt-3 border-t border-gray-700">
          <div>
            <span className="text-2xl font-bold text-white">
              ${pack.priceUsd}
            </span>
            <span className="text-gray-400 text-sm">/mo</span>
          </div>
          <div className="flex gap-2">
            <Link
              to={`/marketplace/signals/${pack.slug}`}
              className="px-3 py-2 text-gray-400 hover:text-white text-sm font-medium transition-colors"
            >
              Details
            </Link>
            <button
              onClick={() => onSubscribe?.(pack.id)}
              className="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium rounded-lg transition-colors"
            >
              Subscribe
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SignalPackCard;
