import React from 'react';
import { X, Brain, TrendingUp, Clock, AlertCircle } from 'lucide-react';
import { useTranslation } from 'react-i18next';

interface ReasoningModalProps {
  isOpen: boolean;
  onClose: () => void;
  reasoning: {
    action_id?: string;
    po_id?: string;
    batch_id?: string;
    reasoning?: string;
    title?: string;
    ai_reasoning_summary?: string;
    business_impact?: {
      financial_impact_eur?: number;
      affected_orders?: number;
    };
    urgency_context?: {
      deadline?: string;
      time_until_consequence_hours?: number;
    };
  };
}

export function ReasoningModal({ isOpen, onClose, reasoning }: ReasoningModalProps) {
  const { t } = useTranslation(['alerts', 'common']);

  if (!isOpen) return null;

  const displayText = reasoning.ai_reasoning_summary || reasoning.reasoning || t('alerts:no_reasoning_available');

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
      <div
        className="bg-white rounded-xl shadow-2xl max-w-2xl w-full max-h-[80vh] overflow-y-auto"
        style={{ backgroundColor: 'var(--bg-primary)' }}
      >
        {/* Header */}
        <div className="sticky top-0 flex items-center justify-between p-6 border-b" style={{ backgroundColor: 'var(--bg-primary)', borderColor: 'var(--border-primary)' }}>
          <div className="flex items-center gap-3">
            <div className="w-12 h-12 rounded-full flex items-center justify-center" style={{ backgroundColor: 'var(--color-info-100)' }}>
              <Brain className="w-6 h-6" style={{ color: 'var(--color-info-600)' }} />
            </div>
            <div>
              <h2 className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>
                {reasoning.title || t('alerts:orchestration.reasoning_title')}
              </h2>
              <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
                {t('common:ai_reasoning')}
              </p>
            </div>
          </div>
          <button
            onClick={onClose}
            className="p-2 rounded-lg hover:bg-black/5 transition-colors"
          >
            <X className="w-6 h-6" style={{ color: 'var(--text-secondary)' }} />
          </button>
        </div>

        {/* Content */}
        <div className="p-6 space-y-4">
          {/* AI Reasoning Summary */}
          <div className="rounded-lg p-4 border-l-4" style={{ backgroundColor: 'var(--bg-secondary)', borderColor: 'var(--color-info-600)' }}>
            <p className="text-base leading-relaxed" style={{ color: 'var(--text-primary)' }}>
              {displayText}
            </p>
          </div>

          {/* Business Impact (if available) */}
          {reasoning.business_impact && (
            <div className="space-y-2">
              <h3 className="text-lg font-semibold" style={{ color: 'var(--text-primary)' }}>
                {t('alerts:business_impact')}
              </h3>
              <div className="grid grid-cols-2 gap-3">
                {reasoning.business_impact.financial_impact_eur !== undefined && (
                  <div className="rounded-lg p-3" style={{ backgroundColor: 'var(--color-warning-50)' }}>
                    <div className="flex items-center gap-2 mb-1">
                      <TrendingUp className="w-4 h-4" style={{ color: 'var(--color-warning-600)' }} />
                      <span className="text-xs font-semibold" style={{ color: 'var(--color-warning-800)' }}>
                        {t('alerts:context.financial_impact', { amount: reasoning.business_impact.financial_impact_eur.toFixed(0) })}
                      </span>
                    </div>
                  </div>
                )}
                {reasoning.business_impact.affected_orders !== undefined && (
                  <div className="rounded-lg p-3" style={{ backgroundColor: 'var(--color-info-50)' }}>
                    <div className="flex items-center gap-2 mb-1">
                      <AlertCircle className="w-4 h-4" style={{ color: 'var(--color-info-600)' }} />
                      <span className="text-xs font-semibold" style={{ color: 'var(--color-info-800)' }}>
                        {reasoning.business_impact.affected_orders} {t('common:orders_affected')}
                      </span>
                    </div>
                  </div>
                )}
              </div>
            </div>
          )}

          {/* Urgency Context (if available) */}
          {reasoning.urgency_context?.time_until_consequence_hours !== undefined && (
            <div className="rounded-lg p-4" style={{ backgroundColor: 'var(--color-error-50)', borderLeft: '4px solid var(--color-error-600)' }}>
              <div className="flex items-center gap-2">
                <Clock className="w-5 h-5" style={{ color: 'var(--color-error-600)' }} />
                <span className="font-semibold" style={{ color: 'var(--color-error-800)' }}>
                  {Math.round(reasoning.urgency_context.time_until_consequence_hours)}h {t('common:remaining')}
                </span>
              </div>
            </div>
          )}
        </div>

        {/* Footer */}
        <div className="sticky bottom-0 p-6 border-t" style={{ backgroundColor: 'var(--bg-primary)', borderColor: 'var(--border-primary)' }}>
          <button
            onClick={onClose}
            className="w-full px-6 py-3 rounded-lg font-semibold transition-colors"
            style={{ backgroundColor: 'var(--color-primary)', color: 'white' }}
          >
            {t('common:close')}
          </button>
        </div>
      </div>
    </div>
  );
}
