/**
 * Goal Card Component
 * Displays a financial goal with progress
 */

import React from 'react';
import {
  CalendarIcon,
  BanknotesIcon,
  TrashIcon,
  CheckCircleIcon,
  ExclamationTriangleIcon,
  ClockIcon,
} from '@heroicons/react/24/solid';
import type { PortfolioGoal } from '../../../services/portfolio.service';

interface GoalCardProps {
  goal: PortfolioGoal;
  onDelete?: (goalId: string) => void;
  onUpdateProgress?: (goalId: string) => void;
}

export const GoalCard: React.FC<GoalCardProps> = ({
  goal,
  onDelete,
  onUpdateProgress,
}) => {
  const progressPercent = Math.min(100, goal.progress);
  const daysRemaining = Math.ceil(
    (new Date(goal.targetDate).getTime() - Date.now()) / (1000 * 60 * 60 * 24)
  );
  const monthsRemaining = Math.ceil(daysRemaining / 30);

  const statusConfig = {
    on_track: {
      icon: CheckCircleIcon,
      color: 'text-green-500',
      bgColor: 'bg-green-100 dark:bg-green-900/30',
      label: 'En camino',
    },
    at_risk: {
      icon: ClockIcon,
      color: 'text-yellow-500',
      bgColor: 'bg-yellow-100 dark:bg-yellow-900/30',
      label: 'En riesgo',
    },
    behind: {
      icon: ExclamationTriangleIcon,
      color: 'text-red-500',
      bgColor: 'bg-red-100 dark:bg-red-900/30',
      label: 'Atrasado',
    },
  };

  const status = statusConfig[goal.status];
  const StatusIcon = status.icon;

  return (
    <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
      {/* Header */}
      <div className="flex items-start justify-between mb-4">
        <div className="flex items-center gap-3">
          <div className={`p-2 rounded-lg ${status.bgColor}`}>
            <StatusIcon className={`w-5 h-5 ${status.color}`} />
          </div>
          <div>
            <h3 className="font-bold text-gray-900 dark:text-white">{goal.name}</h3>
            <span className={`text-sm ${status.color}`}>{status.label}</span>
          </div>
        </div>
        {onDelete && (
          <button
            onClick={() => onDelete(goal.id)}
            className="p-2 text-gray-400 hover:text-red-500 transition-colors"
          >
            <TrashIcon className="w-5 h-5" />
          </button>
        )}
      </div>

      {/* Progress bar */}
      <div className="mb-4">
        <div className="flex justify-between text-sm mb-1">
          <span className="text-gray-500 dark:text-gray-400">Progreso</span>
          <span className="font-medium text-gray-900 dark:text-white">
            {progressPercent.toFixed(1)}%
          </span>
        </div>
        <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
          <div
            className={`h-full rounded-full transition-all ${
              goal.status === 'on_track'
                ? 'bg-green-500'
                : goal.status === 'at_risk'
                ? 'bg-yellow-500'
                : 'bg-red-500'
            }`}
            style={{ width: `${progressPercent}%` }}
          />
        </div>
      </div>

      {/* Stats */}
      <div className="grid grid-cols-2 gap-4 mb-4">
        <div className="flex items-center gap-2">
          <BanknotesIcon className="w-5 h-5 text-gray-400" />
          <div>
            <p className="text-xs text-gray-500 dark:text-gray-400">Actual</p>
            <p className="font-medium text-gray-900 dark:text-white">
              ${goal.currentAmount.toLocaleString()}
            </p>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <CalendarIcon className="w-5 h-5 text-gray-400" />
          <div>
            <p className="text-xs text-gray-500 dark:text-gray-400">Meta</p>
            <p className="font-medium text-gray-900 dark:text-white">
              ${goal.targetAmount.toLocaleString()}
            </p>
          </div>
        </div>
      </div>

      {/* Footer info */}
      <div className="pt-4 border-t border-gray-200 dark:border-gray-700 space-y-2">
        <div className="flex justify-between text-sm">
          <span className="text-gray-500 dark:text-gray-400">Fecha objetivo</span>
          <span className="text-gray-900 dark:text-white">
            {new Date(goal.targetDate).toLocaleDateString()}
          </span>
        </div>
        <div className="flex justify-between text-sm">
          <span className="text-gray-500 dark:text-gray-400">Tiempo restante</span>
          <span className="text-gray-900 dark:text-white">
            {monthsRemaining > 0 ? `${monthsRemaining} meses` : 'Vencido'}
          </span>
        </div>
        <div className="flex justify-between text-sm">
          <span className="text-gray-500 dark:text-gray-400">Aporte mensual</span>
          <span className="text-gray-900 dark:text-white">
            ${goal.monthlyContribution.toLocaleString()}
          </span>
        </div>
        {goal.projectedCompletion && (
          <div className="flex justify-between text-sm">
            <span className="text-gray-500 dark:text-gray-400">Proyección</span>
            <span className="text-green-500">
              {new Date(goal.projectedCompletion).toLocaleDateString()}
            </span>
          </div>
        )}
      </div>

      {/* Action button */}
      {onUpdateProgress && (
        <button
          onClick={() => onUpdateProgress(goal.id)}
          className="mt-4 w-full py-2 bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 font-medium rounded-lg hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-colors"
        >
          Actualizar Progreso
        </button>
      )}
    </div>
  );
};

export default GoalCard;
