/**
 * ContextPanel Component
 * Displays current trading context: watchlist, risk profile, preferences
 */

import React, { useState } from 'react';
import {
  ChevronDownIcon,
  ChevronUpIcon,
  EyeIcon,
  ShieldCheckIcon,
  AdjustmentsHorizontalIcon,
  StarIcon,
} from '@heroicons/react/24/outline';

interface WatchlistItem {
  symbol: string;
  name: string;
  price?: number;
  change?: number;
}

interface ContextPanelProps {
  watchlist?: WatchlistItem[];
  riskProfile?: 'conservative' | 'moderate' | 'aggressive';
  preferredSymbols?: string[];
  onRiskProfileChange?: (profile: 'conservative' | 'moderate' | 'aggressive') => void;
  className?: string;
}

const ContextPanel: React.FC<ContextPanelProps> = ({
  watchlist = [],
  riskProfile = 'moderate',
  preferredSymbols = [],
  onRiskProfileChange,
  className = '',
}) => {
  const [isExpanded, setIsExpanded] = useState(true);
  const [activeSection, setActiveSection] = useState<'watchlist' | 'risk' | 'prefs'>('watchlist');

  const riskProfiles = [
    {
      id: 'conservative' as const,
      label: 'Conservador',
      description: 'Bajo riesgo, retornos estables',
      color: 'text-green-500',
      bg: 'bg-green-100 dark:bg-green-900/30',
    },
    {
      id: 'moderate' as const,
      label: 'Moderado',
      description: 'Balance riesgo/retorno',
      color: 'text-yellow-500',
      bg: 'bg-yellow-100 dark:bg-yellow-900/30',
    },
    {
      id: 'aggressive' as const,
      label: 'Agresivo',
      description: 'Alto riesgo, alto retorno',
      color: 'text-red-500',
      bg: 'bg-red-100 dark:bg-red-900/30',
    },
  ];

  const currentRiskProfile = riskProfiles.find((p) => p.id === riskProfile) || riskProfiles[1];

  return (
    <div className={`bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 ${className}`}>
      {/* Header */}
      <button
        onClick={() => setIsExpanded(!isExpanded)}
        className="w-full flex items-center justify-between p-3 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
      >
        <div className="flex items-center gap-2">
          <AdjustmentsHorizontalIcon className="w-5 h-5 text-blue-500" />
          <span className="font-medium text-sm text-gray-900 dark:text-white">
            Contexto de Trading
          </span>
        </div>
        {isExpanded ? (
          <ChevronUpIcon className="w-4 h-4 text-gray-400" />
        ) : (
          <ChevronDownIcon className="w-4 h-4 text-gray-400" />
        )}
      </button>

      {/* Content */}
      {isExpanded && (
        <div className="px-3 pb-3">
          {/* Section Tabs */}
          <div className="flex items-center gap-1 mb-3 bg-gray-100 dark:bg-gray-700 rounded-lg p-1">
            <button
              onClick={() => setActiveSection('watchlist')}
              className={`flex-1 flex items-center justify-center gap-1 py-1.5 px-2 rounded-md text-xs font-medium transition-colors ${
                activeSection === 'watchlist'
                  ? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-white shadow-sm'
                  : 'text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'
              }`}
            >
              <EyeIcon className="w-3.5 h-3.5" />
              Watchlist
            </button>
            <button
              onClick={() => setActiveSection('risk')}
              className={`flex-1 flex items-center justify-center gap-1 py-1.5 px-2 rounded-md text-xs font-medium transition-colors ${
                activeSection === 'risk'
                  ? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-white shadow-sm'
                  : 'text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'
              }`}
            >
              <ShieldCheckIcon className="w-3.5 h-3.5" />
              Riesgo
            </button>
            <button
              onClick={() => setActiveSection('prefs')}
              className={`flex-1 flex items-center justify-center gap-1 py-1.5 px-2 rounded-md text-xs font-medium transition-colors ${
                activeSection === 'prefs'
                  ? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-white shadow-sm'
                  : 'text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'
              }`}
            >
              <StarIcon className="w-3.5 h-3.5" />
              Favoritos
            </button>
          </div>

          {/* Watchlist Section */}
          {activeSection === 'watchlist' && (
            <div className="space-y-2">
              {watchlist.length === 0 ? (
                <div className="text-center py-4">
                  <p className="text-xs text-gray-500">Sin simbolos en watchlist</p>
                  <p className="text-xs text-gray-400 mt-1">
                    Agrega simbolos desde Trading
                  </p>
                </div>
              ) : (
                watchlist.slice(0, 5).map((item) => (
                  <div
                    key={item.symbol}
                    className="flex items-center justify-between p-2 bg-gray-50 dark:bg-gray-700/50 rounded-lg"
                  >
                    <div>
                      <span className="font-medium text-sm text-gray-900 dark:text-white">
                        {item.symbol}
                      </span>
                      <p className="text-xs text-gray-500">{item.name}</p>
                    </div>
                    {item.price && (
                      <div className="text-right">
                        <span className="text-sm font-medium text-gray-900 dark:text-white">
                          ${item.price.toFixed(2)}
                        </span>
                        {item.change !== undefined && (
                          <p
                            className={`text-xs ${
                              item.change >= 0 ? 'text-green-500' : 'text-red-500'
                            }`}
                          >
                            {item.change >= 0 ? '+' : ''}
                            {item.change.toFixed(2)}%
                          </p>
                        )}
                      </div>
                    )}
                  </div>
                ))
              )}
              {watchlist.length > 5 && (
                <p className="text-xs text-gray-400 text-center">
                  +{watchlist.length - 5} mas
                </p>
              )}
            </div>
          )}

          {/* Risk Profile Section */}
          {activeSection === 'risk' && (
            <div className="space-y-2">
              {riskProfiles.map((profile) => (
                <button
                  key={profile.id}
                  onClick={() => onRiskProfileChange?.(profile.id)}
                  className={`w-full flex items-center gap-3 p-2.5 rounded-lg border transition-all ${
                    riskProfile === profile.id
                      ? `${profile.bg} border-current ${profile.color}`
                      : 'border-gray-200 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700/50'
                  }`}
                >
                  <div
                    className={`w-3 h-3 rounded-full ${
                      profile.id === 'conservative'
                        ? 'bg-green-500'
                        : profile.id === 'moderate'
                        ? 'bg-yellow-500'
                        : 'bg-red-500'
                    }`}
                  />
                  <div className="text-left">
                    <p
                      className={`text-sm font-medium ${
                        riskProfile === profile.id
                          ? profile.color
                          : 'text-gray-900 dark:text-white'
                      }`}
                    >
                      {profile.label}
                    </p>
                    <p className="text-xs text-gray-500">{profile.description}</p>
                  </div>
                  {riskProfile === profile.id && (
                    <ShieldCheckIcon className={`w-4 h-4 ml-auto ${profile.color}`} />
                  )}
                </button>
              ))}
              <p className="text-xs text-gray-400 mt-2">
                El AI ajustara sus recomendaciones segun tu perfil
              </p>
            </div>
          )}

          {/* Preferred Symbols Section */}
          {activeSection === 'prefs' && (
            <div className="space-y-2">
              {preferredSymbols.length === 0 ? (
                <div className="text-center py-4">
                  <p className="text-xs text-gray-500">Sin simbolos favoritos</p>
                  <p className="text-xs text-gray-400 mt-1">
                    Marca simbolos como favoritos para analisis rapido
                  </p>
                </div>
              ) : (
                <div className="flex flex-wrap gap-2">
                  {preferredSymbols.map((symbol) => (
                    <span
                      key={symbol}
                      className="inline-flex items-center gap-1 px-2.5 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full text-xs font-medium"
                    >
                      <StarIcon className="w-3 h-3" />
                      {symbol}
                    </span>
                  ))}
                </div>
              )}
            </div>
          )}

          {/* Quick Info */}
          <div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
            <div className="flex items-center justify-between text-xs">
              <span className="text-gray-500">Perfil actual:</span>
              <span className={`font-medium ${currentRiskProfile.color}`}>
                {currentRiskProfile.label}
              </span>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default ContextPanel;
