/**
 * Advisory Card Component
 * Displays advisory service with advisor profile, specializations, and booking options
 */

import React from 'react';
import { Link } from 'react-router-dom';
import {
  Star,
  CheckCircle,
  Calendar,
  Clock,
  MessageCircle,
  Award,
} from 'lucide-react';
import type { MarketplaceProductListItem } from '../../../types/marketplace.types';

interface AdvisoryCardProps {
  advisory: MarketplaceProductListItem;
  onBook?: (advisoryId: string) => void;
}

export const AdvisoryCard: React.FC<AdvisoryCardProps> = ({ advisory, onBook }) => {
  const availabilityColors: Record<string, { bg: string; text: string; dot: string }> = {
    available: { bg: 'bg-green-500/10', text: 'text-green-400', dot: 'bg-green-400' },
    busy: { bg: 'bg-yellow-500/10', text: 'text-yellow-400', dot: 'bg-yellow-400' },
    away: { bg: 'bg-orange-500/10', text: 'text-orange-400', dot: 'bg-orange-400' },
    offline: { bg: 'bg-gray-500/10', text: 'text-gray-400', dot: 'bg-gray-400' },
  };

  // Determine availability from tags (mock implementation)
  const getAvailability = () => {
    if (advisory.tags.includes('available')) return 'available';
    if (advisory.tags.includes('busy')) return 'busy';
    return 'available';
  };

  const availability = getAvailability();
  const colors = availabilityColors[availability];

  // Extract specializations from tags
  const specializations = advisory.tags.filter(
    (t) => !['available', 'busy', 'away', 'offline'].includes(t)
  ).slice(0, 4);

  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-purple-500/5">
      {/* Advisor Header */}
      <div className="p-5 border-b border-gray-700">
        <div className="flex items-start gap-4">
          {/* Avatar */}
          <div className="relative">
            {advisory.providerAvatar ? (
              <img
                src={advisory.providerAvatar}
                alt={advisory.providerName}
                className="w-16 h-16 rounded-full object-cover"
              />
            ) : (
              <div className="w-16 h-16 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center text-white text-xl font-bold">
                {advisory.providerName.charAt(0)}
              </div>
            )}
            {/* Availability indicator */}
            <div
              className={`absolute -bottom-1 -right-1 w-5 h-5 rounded-full border-2 border-gray-800 ${colors.dot}`}
            />
          </div>

          {/* Advisor Info */}
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2 mb-1">
              <h3 className="text-lg font-semibold text-white truncate">
                {advisory.providerName}
              </h3>
              {advisory.providerVerified && (
                <CheckCircle className="w-4 h-4 text-blue-400 flex-shrink-0" />
              )}
            </div>
            <p className="text-sm text-gray-400 mb-2">{advisory.name}</p>
            <div
              className={`inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-xs ${colors.bg} ${colors.text}`}
            >
              <span className={`w-1.5 h-1.5 rounded-full ${colors.dot}`} />
              {availability.charAt(0).toUpperCase() + availability.slice(1)}
            </div>
          </div>
        </div>
      </div>

      {/* Content */}
      <div className="p-5">
        {/* Description */}
        <p className="text-sm text-gray-400 mb-4 line-clamp-2">
          {advisory.shortDescription || 'Expert trading advisor with years of market experience.'}
        </p>

        {/* Specializations */}
        <div className="mb-4">
          <p className="text-xs text-gray-500 mb-2">Specializations</p>
          <div className="flex flex-wrap gap-2">
            {specializations.length > 0 ? (
              specializations.map((spec, idx) => (
                <span
                  key={idx}
                  className="px-2 py-1 bg-purple-500/10 text-purple-400 text-xs rounded-full"
                >
                  {spec}
                </span>
              ))
            ) : (
              <>
                <span className="px-2 py-1 bg-purple-500/10 text-purple-400 text-xs rounded-full">
                  Technical Analysis
                </span>
                <span className="px-2 py-1 bg-purple-500/10 text-purple-400 text-xs rounded-full">
                  Risk Management
                </span>
              </>
            )}
          </div>
        </div>

        {/* Stats */}
        <div className="grid grid-cols-3 gap-3 mb-4">
          <div className="text-center">
            <div className="flex items-center justify-center gap-1 mb-1">
              <Star className="w-4 h-4 text-yellow-400" />
              <span className="font-semibold text-white">{advisory.rating.toFixed(1)}</span>
            </div>
            <p className="text-xs text-gray-500">Rating</p>
          </div>
          <div className="text-center border-x border-gray-700">
            <div className="flex items-center justify-center gap-1 mb-1">
              <MessageCircle className="w-4 h-4 text-blue-400" />
              <span className="font-semibold text-white">{advisory.totalReviews}</span>
            </div>
            <p className="text-xs text-gray-500">Reviews</p>
          </div>
          <div className="text-center">
            <div className="flex items-center justify-center gap-1 mb-1">
              <Award className="w-4 h-4 text-green-400" />
              <span className="font-semibold text-white">
                {advisory.totalSubscribers || 0}
              </span>
            </div>
            <p className="text-xs text-gray-500">Sessions</p>
          </div>
        </div>

        {/* Response Time */}
        <div className="flex items-center gap-2 mb-4 p-2 bg-gray-900/50 rounded-lg">
          <Clock className="w-4 h-4 text-gray-400" />
          <span className="text-sm text-gray-400">
            Typically responds in <span className="text-white">2 hours</span>
          </span>
        </div>

        {/* Price and CTA */}
        <div className="flex items-center justify-between pt-3 border-t border-gray-700">
          <div>
            <span className="text-lg font-bold text-white">${advisory.priceUsd}</span>
            <span className="text-gray-400 text-sm">/session</span>
          </div>
          <div className="flex gap-2">
            <Link
              to={`/marketplace/advisory/${advisory.slug}`}
              className="px-3 py-2 text-gray-400 hover:text-white text-sm font-medium transition-colors"
            >
              Profile
            </Link>
            <button
              onClick={() => onBook?.(advisory.id)}
              className="px-4 py-2 bg-purple-600 hover:bg-purple-500 text-white text-sm font-medium rounded-lg transition-colors flex items-center gap-2"
            >
              <Calendar className="w-4 h-4" />
              Book
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default AdvisoryCard;
