// ================================================================
// frontend/src/components/domain/dashboard/SmartActionConsequencePreview.tsx
// ================================================================
/**
 * Smart Action Consequence Preview
 *
 * Shows "What happens if I click this?" before user takes action.
 * Displays expected outcomes, affected systems, and financial impact.
 *
 * Design: Tooltip/popover style preview with clear consequences
 */

import React, { useState } from 'react';
import { Info, CheckCircle, AlertTriangle, DollarSign, Clock, ArrowRight } from 'lucide-react';
import { Badge } from '../../ui/Badge';
import { useTranslation } from 'react-i18next';

export interface ActionConsequence {
  outcome: string;
  affectedSystems?: string[];
  financialImpact?: {
    amount: number;
    currency: string;
    type: 'cost' | 'savings' | 'revenue';
  };
  timeImpact?: string;
  reversible: boolean;
  confidence?: number;
  warnings?: string[];
}

export interface SmartActionConsequencePreviewProps {
  action: {
    label: string;
    actionType: string;
  };
  consequences: ActionConsequence;
  onConfirm: () => void;
  onCancel: () => void;
  isOpen: boolean;
  triggerElement?: React.ReactNode;
}

export function SmartActionConsequencePreview({
  action,
  consequences,
  onConfirm,
  onCancel,
  isOpen,
  triggerElement,
}: SmartActionConsequencePreviewProps) {
  const { t } = useTranslation('alerts');
  const [showPreview, setShowPreview] = useState(isOpen);

  const handleConfirm = () => {
    setShowPreview(false);
    onConfirm();
  };

  const handleCancel = () => {
    setShowPreview(false);
    onCancel();
  };

  if (!showPreview) {
    return (
      <div onClick={() => setShowPreview(true)}>
        {triggerElement}
      </div>
    );
  }

  return (
    <>
      {/* Backdrop */}
      <div
        className="fixed inset-0 z-40 bg-black/20 backdrop-blur-sm animate-in fade-in duration-200"
        onClick={handleCancel}
      />

      {/* Preview Card */}
      <div
        className="fixed z-50 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-md animate-in zoom-in-95 duration-200"
        onClick={(e) => e.stopPropagation()}
      >
        <div
          className="rounded-xl shadow-2xl border-2"
          style={{
            backgroundColor: 'var(--bg-primary)',
            borderColor: 'var(--color-primary-300)',
          }}
        >
          {/* Header */}
          <div
            className="p-4 border-b"
            style={{
              backgroundColor: 'var(--color-primary-50)',
              borderColor: 'var(--border-primary)',
            }}
          >
            <div className="flex items-center gap-3">
              <div
                className="p-2 rounded-lg"
                style={{ backgroundColor: 'var(--color-primary-100)' }}
              >
                <Info className="w-5 h-5" style={{ color: 'var(--color-primary-600)' }} />
              </div>
              <div>
                <h3 className="font-bold text-lg" style={{ color: 'var(--text-primary)' }}>
                  {t('action_preview.title', 'Action Preview')}
                </h3>
                <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
                  {action.label}
                </p>
              </div>
            </div>
          </div>

          {/* Content */}
          <div className="p-4 space-y-4">
            {/* Expected Outcome */}
            <div>
              <div className="flex items-center gap-2 mb-2">
                <ArrowRight className="w-4 h-4" style={{ color: 'var(--color-primary)' }} />
                <h4 className="font-semibold text-sm" style={{ color: 'var(--text-primary)' }}>
                  {t('action_preview.outcome', 'What will happen')}
                </h4>
              </div>
              <p className="text-sm pl-6" style={{ color: 'var(--text-secondary)' }}>
                {consequences.outcome}
              </p>
            </div>

            {/* Financial Impact */}
            {consequences.financialImpact && (
              <div
                className="rounded-lg p-3 border"
                style={{
                  backgroundColor:
                    consequences.financialImpact.type === 'cost'
                      ? 'var(--color-error-50)'
                      : 'var(--color-success-50)',
                  borderColor:
                    consequences.financialImpact.type === 'cost'
                      ? 'var(--color-error-200)'
                      : 'var(--color-success-200)',
                }}
              >
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <DollarSign
                      className="w-4 h-4"
                      style={{
                        color:
                          consequences.financialImpact.type === 'cost'
                            ? 'var(--color-error-600)'
                            : 'var(--color-success-600)',
                      }}
                    />
                    <span className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
                      {t('action_preview.financial_impact', 'Financial Impact')}
                    </span>
                  </div>
                  <span
                    className="text-lg font-bold"
                    style={{
                      color:
                        consequences.financialImpact.type === 'cost'
                          ? 'var(--color-error-600)'
                          : 'var(--color-success-600)',
                    }}
                  >
                    {consequences.financialImpact.type === 'cost' ? '-' : '+'}
                    {consequences.financialImpact.currency}
                    {consequences.financialImpact.amount.toFixed(2)}
                  </span>
                </div>
              </div>
            )}

            {/* Affected Systems */}
            {consequences.affectedSystems && consequences.affectedSystems.length > 0 && (
              <div>
                <h4 className="font-semibold text-sm mb-2" style={{ color: 'var(--text-primary)' }}>
                  {t('action_preview.affected_systems', 'Affected Systems')}
                </h4>
                <div className="flex flex-wrap gap-2">
                  {consequences.affectedSystems.map((system, idx) => (
                    <Badge key={idx} variant="secondary" size="sm">
                      {system}
                    </Badge>
                  ))}
                </div>
              </div>
            )}

            {/* Time Impact */}
            {consequences.timeImpact && (
              <div className="flex items-center gap-2 text-sm">
                <Clock className="w-4 h-4" style={{ color: 'var(--text-tertiary)' }} />
                <span style={{ color: 'var(--text-secondary)' }}>{consequences.timeImpact}</span>
              </div>
            )}

            {/* Reversibility */}
            <div
              className="flex items-center gap-2 text-sm p-2 rounded"
              style={{ backgroundColor: 'var(--bg-secondary)' }}
            >
              <CheckCircle
                className="w-4 h-4"
                style={{ color: consequences.reversible ? 'var(--color-success-500)' : 'var(--color-warning-500)' }}
              />
              <span style={{ color: 'var(--text-secondary)' }}>
                {consequences.reversible
                  ? t('action_preview.reversible', 'This action can be undone')
                  : t('action_preview.not_reversible', 'This action cannot be undone')}
              </span>
            </div>

            {/* Warnings */}
            {consequences.warnings && consequences.warnings.length > 0 && (
              <div
                className="rounded-lg p-3 border"
                style={{
                  backgroundColor: 'var(--color-warning-50)',
                  borderColor: 'var(--color-warning-300)',
                }}
              >
                <div className="flex items-start gap-2">
                  <AlertTriangle className="w-4 h-4 mt-0.5 flex-shrink-0" style={{ color: 'var(--color-warning-600)' }} />
                  <div className="space-y-1">
                    {consequences.warnings.map((warning, idx) => (
                      <p key={idx} className="text-sm" style={{ color: 'var(--color-warning-700)' }}>
                        {warning}
                      </p>
                    ))}
                  </div>
                </div>
              </div>
            )}

            {/* Confidence Score */}
            {consequences.confidence !== undefined && (
              <div className="text-xs text-center" style={{ color: 'var(--text-tertiary)' }}>
                {t('action_preview.confidence', 'AI Confidence: {{confidence}}%', {
                  confidence: consequences.confidence,
                })}
              </div>
            )}
          </div>

          {/* Actions */}
          <div
            className="flex items-center gap-3 p-4 border-t"
            style={{ borderColor: 'var(--border-primary)' }}
          >
            <button
              onClick={handleCancel}
              className="flex-1 px-4 py-2 rounded-lg font-medium transition-colors"
              style={{
                backgroundColor: 'var(--bg-secondary)',
                color: 'var(--text-primary)',
                border: '1px solid var(--border-primary)',
              }}
            >
              {t('action_preview.cancel', 'Cancel')}
            </button>
            <button
              onClick={handleConfirm}
              className="flex-1 px-4 py-2 rounded-lg font-semibold transition-colors"
              style={{
                backgroundColor: 'var(--color-primary)',
                color: 'white',
              }}
            >
              {t('action_preview.confirm', 'Confirm Action')}
            </button>
          </div>
        </div>
      </div>
    </>
  );
}
