// ================================================================
// frontend/src/components/dashboard/ActionQueueCard.tsx
// ================================================================
/**
 * Action Queue Card - What needs your attention right now
 *
 * Prioritized list of actions the user needs to take, with context
 * about why each action is needed and what happens if they don't do it.
 */

import React, { useState, useMemo } from 'react';
import {
  FileText,
  AlertCircle,
  CheckCircle2,
  Eye,
  Edit,
  Clock,
  Euro,
  ChevronDown,
  ChevronUp,
  X,
  Package,
  Building2,
  Calendar,
  Truck,
} from 'lucide-react';
import { ActionItem, ActionQueue } from '../../api/hooks/newDashboard';
import { useReasoningFormatter } from '../../hooks/useReasoningTranslation';
import { useTranslation } from 'react-i18next';
import { usePurchaseOrder } from '../../api/hooks/purchase-orders';

interface ActionQueueCardProps {
  actionQueue: ActionQueue;
  loading?: boolean;
  onApprove?: (actionId: string) => void;
  onReject?: (actionId: string, reason: string) => void;
  onViewDetails?: (actionId: string) => void;
  onModify?: (actionId: string) => void;
  tenantId?: string;
}

const urgencyConfig = {
  critical: {
    bgColor: 'var(--color-error-50)',
    borderColor: 'var(--color-error-300)',
    badgeBgColor: 'var(--color-error-100)',
    badgeTextColor: 'var(--color-error-800)',
    icon: AlertCircle,
    iconColor: 'var(--color-error-700)',
  },
  important: {
    bgColor: 'var(--color-warning-50)',
    borderColor: 'var(--color-warning-300)',
    badgeBgColor: 'var(--color-warning-100)',
    badgeTextColor: 'var(--color-warning-900)',
    icon: AlertCircle,
    iconColor: 'var(--color-warning-700)',
  },
  normal: {
    bgColor: 'var(--color-info-50)',
    borderColor: 'var(--color-info-300)',
    badgeBgColor: 'var(--color-info-100)',
    badgeTextColor: 'var(--color-info-800)',
    icon: FileText,
    iconColor: 'var(--color-info-700)',
  },
};

function ActionItemCard({
  action,
  onApprove,
  onReject,
  onViewDetails,
  onModify,
  tenantId,
}: {
  action: ActionItem;
  onApprove?: (id: string) => void;
  onReject?: (id: string, reason: string) => void;
  onViewDetails?: (id: string) => void;
  onModify?: (id: string) => void;
  tenantId?: string;
}) {
  const [expanded, setExpanded] = useState(false);
  const [showDetails, setShowDetails] = useState(false);
  const [showRejectModal, setShowRejectModal] = useState(false);
  const [rejectionReason, setRejectionReason] = useState('');
  const config = urgencyConfig[action.urgency as keyof typeof urgencyConfig] || urgencyConfig.normal;
  const UrgencyIcon = config.icon;
  const { formatPOAction } = useReasoningFormatter();
  const { t } = useTranslation('reasoning');

  // Fetch PO details if this is a PO action and details are expanded
  const { data: poDetail } = usePurchaseOrder(
    tenantId || '',
    action.id,
    { enabled: !!tenantId && showDetails && action.type === 'po_approval' }
  );

  // Translate reasoning_data (or fallback to deprecated text fields)
  // Memoize to prevent undefined values from being created on each render
  const { reasoning, consequence, severity } = useMemo(() => {
    if (action.reasoning_data) {
      return formatPOAction(action.reasoning_data);
    }
    return {
      reasoning: action.reasoning || '',
      consequence: action.consequence || '',
      severity: ''
    };
  }, [action.reasoning_data, action.reasoning, action.consequence, formatPOAction]);

  return (
    <div
      className="border-2 rounded-lg p-4 md:p-5 transition-all duration-200 hover:shadow-md"
      style={{
        backgroundColor: config.bgColor,
        borderColor: config.borderColor,
      }}
    >
      {/* Header */}
      <div className="flex items-start gap-3 mb-3">
        <UrgencyIcon className="w-6 h-6 flex-shrink-0" style={{ color: config.iconColor }} />
        <div className="flex-1 min-w-0">
          <div className="flex items-start justify-between gap-2 mb-1">
            <h3 className="font-bold text-lg" style={{ color: 'var(--text-primary)' }}>{action.title || 'Action Required'}</h3>
            <span
              className="px-2 py-1 rounded text-xs font-semibold uppercase flex-shrink-0"
              style={{
                backgroundColor: config.badgeBgColor,
                color: config.badgeTextColor,
              }}
            >
              {action.urgency || 'normal'}
            </span>
          </div>
          <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>{action.subtitle || ''}</p>
        </div>
      </div>

      {/* Amount (for POs) */}
      {action.amount && (
        <div className="flex items-center gap-2 mb-3 text-lg font-bold" style={{ color: 'var(--text-primary)' }}>
          <Euro className="w-5 h-5" />
          <span>
            {action.amount.toFixed(2)} {action.currency}
          </span>
        </div>
      )}

      {/* Reasoning (always visible) */}
      <div className="rounded-md p-3 mb-3" style={{ backgroundColor: 'var(--bg-primary)' }}>
        <p className="text-sm font-medium mb-1" style={{ color: 'var(--text-primary)' }}>
          {t('jtbd.action_queue.why_needed')}
        </p>
        <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>{reasoning}</p>
      </div>

      {/* Consequence (expandable) */}
      {consequence && (
        <>
          <button
            onClick={() => setExpanded(!expanded)}
            className="flex items-center gap-2 text-sm transition-colors mb-3 w-full"
            style={{ color: 'var(--text-secondary)' }}
          >
            {expanded ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
            <span className="font-medium">{t('jtbd.action_queue.what_if_not')}</span>
          </button>

          {expanded && (
            <div
              className="border rounded-md p-3 mb-3"
              style={{
                backgroundColor: 'var(--color-warning-50)',
                borderColor: 'var(--color-warning-200)',
              }}
            >
              <p className="text-sm" style={{ color: 'var(--color-warning-900)' }}>{consequence}</p>
              {severity && (
                <span className="text-xs font-semibold mt-1 block" style={{ color: 'var(--color-warning-900)' }}>
                  {severity}
                </span>
              )}
            </div>
          )}
        </>
      )}

      {/* Inline PO Details (expandable) */}
      {action.type === 'po_approval' && (
        <>
          <button
            onClick={() => setShowDetails(!showDetails)}
            className="flex items-center gap-2 text-sm font-medium transition-colors mb-3 w-full"
            style={{ color: 'var(--color-info-700)' }}
          >
            {showDetails ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
            <Package className="w-4 h-4" />
            <span>View Order Details</span>
          </button>

          {showDetails && poDetail && (
            <div
              className="border rounded-md p-4 mb-3 space-y-3"
              style={{
                backgroundColor: 'var(--bg-primary)',
                borderColor: 'var(--border-primary)',
              }}
            >
              {/* Supplier Info */}
              <div className="flex items-start gap-2">
                <Building2 className="w-5 h-5 flex-shrink-0" style={{ color: 'var(--color-info-600)' }} />
                <div className="flex-1">
                  <p className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>
                    {poDetail.supplier?.name || 'Supplier'}
                  </p>
                  {poDetail.supplier?.contact_person && (
                    <p className="text-xs" style={{ color: 'var(--text-secondary)' }}>
                      Contact: {poDetail.supplier.contact_person}
                    </p>
                  )}
                  {poDetail.supplier?.email && (
                    <p className="text-xs" style={{ color: 'var(--text-secondary)' }}>
                      {poDetail.supplier.email}
                    </p>
                  )}
                </div>
              </div>

              {/* Delivery Date & Tracking */}
              {poDetail.required_delivery_date && (
                <div className="space-y-2">
                  <div className="flex items-center gap-2">
                    <Calendar className="w-5 h-5" style={{ color: 'var(--color-warning-600)' }} />
                    <div className="flex-1">
                      <p className="text-xs font-medium" style={{ color: 'var(--text-secondary)' }}>
                        Required Delivery
                      </p>
                      <p className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>
                        {new Date(poDetail.required_delivery_date).toLocaleDateString()}
                      </p>
                    </div>
                  </div>

                  {/* Estimated Delivery Date (shown after approval) */}
                  {poDetail.estimated_delivery_date && (
                    <div className="flex items-center gap-2 ml-7">
                      <Truck className="w-4 h-4" style={{ color: 'var(--color-info-600)' }} />
                      <div className="flex-1">
                        <p className="text-xs font-medium" style={{ color: 'var(--text-secondary)' }}>
                          Expected Arrival
                        </p>
                        <p className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>
                          {new Date(poDetail.estimated_delivery_date).toLocaleDateString()}
                        </p>
                      </div>
                      {(() => {
                        const now = new Date();
                        const estimatedDate = new Date(poDetail.estimated_delivery_date);
                        const daysUntil = Math.ceil((estimatedDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));

                        let statusColor = 'var(--color-success-600)';
                        let statusText = 'On Track';

                        if (daysUntil < 0) {
                          statusColor = 'var(--color-error-600)';
                          statusText = `${Math.abs(daysUntil)}d Overdue`;
                        } else if (daysUntil === 0) {
                          statusColor = 'var(--color-warning-600)';
                          statusText = 'Due Today';
                        } else if (daysUntil <= 2) {
                          statusColor = 'var(--color-warning-600)';
                          statusText = `${daysUntil}d Left`;
                        } else {
                          statusText = `${daysUntil}d Left`;
                        }

                        return (
                          <span
                            className="px-2 py-1 rounded text-xs font-semibold"
                            style={{
                              backgroundColor: statusColor.replace('600', '100'),
                              color: statusColor,
                            }}
                          >
                            {statusText}
                          </span>
                        );
                      })()}
                    </div>
                  )}
                </div>
              )}

              {/* Line Items */}
              {poDetail.items && poDetail.items.length > 0 && (
                <div>
                  <p className="text-xs font-semibold mb-2" style={{ color: 'var(--text-secondary)' }}>
                    Order Items ({poDetail.items.length})
                  </p>
                  <div className="space-y-2 max-h-48 overflow-y-auto">
                    {poDetail.items.map((item, idx) => (
                      <div
                        key={idx}
                        className="flex justify-between items-start p-2 rounded"
                        style={{ backgroundColor: 'var(--bg-secondary)' }}
                      >
                        <div className="flex-1">
                          <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
                            {item.product_name || item.product_code || 'Product'}
                          </p>
                          <p className="text-xs" style={{ color: 'var(--text-secondary)' }}>
                            {item.ordered_quantity} {item.unit_of_measure} × €{parseFloat(item.unit_price).toFixed(2)}
                          </p>
                        </div>
                        <p className="text-sm font-bold" style={{ color: 'var(--text-primary)' }}>
                          €{parseFloat(item.line_total).toFixed(2)}
                        </p>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {/* Total Amount */}
              <div
                className="border-t pt-2 flex justify-between items-center"
                style={{ borderColor: 'var(--border-primary)' }}
              >
                <p className="text-sm font-bold" style={{ color: 'var(--text-primary)' }}>Total Amount</p>
                <p className="text-lg font-bold" style={{ color: 'var(--color-info-700)' }}>
                  €{parseFloat(poDetail.total_amount).toFixed(2)}
                </p>
              </div>
            </div>
          )}
        </>
      )}

      {/* Time Estimate */}
      <div className="flex items-center gap-2 text-xs mb-4" style={{ color: 'var(--text-tertiary)' }}>
        <Clock className="w-4 h-4" />
        <span>
          {t('jtbd.action_queue.estimated_time')}: {action.estimatedTimeMinutes || 5} min
        </span>
      </div>

      {/* Rejection Modal */}
      {showRejectModal && (
        <div
          className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50"
          onClick={() => setShowRejectModal(false)}
        >
          <div
            className="rounded-lg p-6 max-w-md w-full"
            style={{ backgroundColor: 'var(--bg-primary)' }}
            onClick={(e) => e.stopPropagation()}
          >
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-lg font-bold" style={{ color: 'var(--text-primary)' }}>
                Reject Purchase Order
              </h3>
              <button
                onClick={() => setShowRejectModal(false)}
                className="p-1 rounded hover:bg-opacity-10 hover:bg-black"
              >
                <X className="w-5 h-5" style={{ color: 'var(--text-secondary)' }} />
              </button>
            </div>

            <p className="text-sm mb-4" style={{ color: 'var(--text-secondary)' }}>
              Please provide a reason for rejecting this purchase order:
            </p>

            <textarea
              value={rejectionReason}
              onChange={(e) => setRejectionReason(e.target.value)}
              placeholder="Enter rejection reason..."
              className="w-full p-3 border rounded-lg mb-4 min-h-24"
              style={{
                backgroundColor: 'var(--bg-secondary)',
                borderColor: 'var(--border-primary)',
                color: 'var(--text-primary)',
              }}
            />

            <div className="flex gap-3 justify-end">
              <button
                onClick={() => setShowRejectModal(false)}
                className="px-4 py-2 rounded-lg font-semibold transition-colors"
                style={{
                  backgroundColor: 'var(--bg-tertiary)',
                  color: 'var(--text-primary)',
                }}
              >
                Cancel
              </button>
              <button
                onClick={() => {
                  if (onReject && rejectionReason.trim()) {
                    onReject(action.id, rejectionReason);
                    setShowRejectModal(false);
                    setRejectionReason('');
                  }
                }}
                disabled={!rejectionReason.trim()}
                className="px-4 py-2 rounded-lg font-semibold transition-colors"
                style={{
                  backgroundColor: rejectionReason.trim() ? 'var(--color-error-600)' : 'var(--bg-quaternary)',
                  color: rejectionReason.trim() ? 'white' : 'var(--text-tertiary)',
                  cursor: rejectionReason.trim() ? 'pointer' : 'not-allowed',
                }}
              >
                Reject Order
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Action Buttons */}
      <div className="flex flex-wrap gap-2">
        {(action.actions || []).map((button, index) => {
          const buttonStyles: Record<string, React.CSSProperties> = {
            primary: {
              backgroundColor: 'var(--color-info-600)',
              color: 'var(--text-inverse, #ffffff)',
            },
            secondary: {
              backgroundColor: 'var(--bg-tertiary)',
              color: 'var(--text-primary)',
            },
            tertiary: {
              backgroundColor: 'var(--bg-primary)',
              color: 'var(--text-primary)',
              border: '1px solid var(--border-primary)',
            },
          };

          const hoverStyles: Record<string, React.CSSProperties> = {
            primary: {
              backgroundColor: 'var(--color-info-700)',
            },
            secondary: {
              backgroundColor: 'var(--bg-quaternary)',
            },
            tertiary: {
              backgroundColor: 'var(--bg-secondary)',
            },
          };

          const [isHovered, setIsHovered] = useState(false);

          const handleClick = () => {
            if (button.action === 'approve' && onApprove) {
              onApprove(action.id);
            } else if (button.action === 'reject') {
              setShowRejectModal(true);
            } else if (button.action === 'view_details' && onViewDetails) {
              onViewDetails(action.id);
            } else if (button.action === 'modify' && onModify) {
              onModify(action.id);
            }
          };

          const currentStyle = {
            ...buttonStyles[button.type],
            ...(isHovered ? hoverStyles[button.type] : {}),
          };

          return (
            <button
              key={index}
              onClick={handleClick}
              onMouseEnter={() => setIsHovered(true)}
              onMouseLeave={() => setIsHovered(false)}
              className="px-4 py-2 rounded-lg font-semibold text-sm transition-colors duration-200 flex items-center gap-2 min-h-[44px]"
              style={currentStyle}
            >
              {button.action === 'approve' && <CheckCircle2 className="w-4 h-4" />}
              {button.action === 'reject' && <X className="w-4 h-4" />}
              {button.action === 'view_details' && <Eye className="w-4 h-4" />}
              {button.action === 'modify' && <Edit className="w-4 h-4" />}
              {button.label}
            </button>
          );
        })}
      </div>
    </div>
  );
}

export function ActionQueueCard({
  actionQueue,
  loading,
  onApprove,
  onReject,
  onViewDetails,
  onModify,
  tenantId,
}: ActionQueueCardProps) {
  const [showAll, setShowAll] = useState(false);
  const { t } = useTranslation('reasoning');

  if (loading || !actionQueue) {
    return (
      <div className="rounded-xl shadow-md p-6" style={{ backgroundColor: 'var(--bg-primary)' }}>
        <div className="animate-pulse space-y-4">
          <div className="h-6 rounded w-1/2" style={{ backgroundColor: 'var(--bg-tertiary)' }}></div>
          <div className="h-32 rounded" style={{ backgroundColor: 'var(--bg-tertiary)' }}></div>
          <div className="h-32 rounded" style={{ backgroundColor: 'var(--bg-tertiary)' }}></div>
        </div>
      </div>
    );
  }

  if (!actionQueue.actions || actionQueue.actions.length === 0) {
    return (
      <div
        className="border-2 rounded-xl p-8 text-center"
        style={{
          backgroundColor: 'var(--color-success-50)',
          borderColor: 'var(--color-success-200)',
        }}
      >
        <CheckCircle2 className="w-16 h-16 mx-auto mb-4" style={{ color: 'var(--color-success-600)' }} />
        <h3 className="text-xl font-bold mb-2" style={{ color: 'var(--color-success-900)' }}>
          {t('jtbd.action_queue.all_caught_up')}
        </h3>
        <p style={{ color: 'var(--color-success-700)' }}>{t('jtbd.action_queue.no_actions')}</p>
      </div>
    );
  }

  const displayedActions = showAll ? actionQueue.actions : actionQueue.actions.slice(0, 3);

  return (
    <div className="rounded-xl shadow-md p-6" style={{ backgroundColor: 'var(--bg-primary)' }}>
      {/* Header */}
      <div className="flex items-center justify-between mb-6">
        <h2 className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>{t('jtbd.action_queue.title')}</h2>
        {(actionQueue.totalActions || 0) > 3 && (
          <span
            className="px-3 py-1 rounded-full text-sm font-semibold"
            style={{
              backgroundColor: 'var(--color-error-100)',
              color: 'var(--color-error-800)',
            }}
          >
            {actionQueue.totalActions || 0} {t('jtbd.action_queue.total')}
          </span>
        )}
      </div>

      {/* Summary Badges */}
      {((actionQueue.criticalCount || 0) > 0 || (actionQueue.importantCount || 0) > 0) && (
        <div className="flex flex-wrap gap-2 mb-6">
          {(actionQueue.criticalCount || 0) > 0 && (
            <span
              className="px-3 py-1 rounded-full text-sm font-semibold"
              style={{
                backgroundColor: 'var(--color-error-100)',
                color: 'var(--color-error-800)',
              }}
            >
              {actionQueue.criticalCount || 0} {t('jtbd.action_queue.critical')}
            </span>
          )}
          {(actionQueue.importantCount || 0) > 0 && (
            <span
              className="px-3 py-1 rounded-full text-sm font-semibold"
              style={{
                backgroundColor: 'var(--color-warning-100)',
                color: 'var(--color-warning-800)',
              }}
            >
              {actionQueue.importantCount || 0} {t('jtbd.action_queue.important')}
            </span>
          )}
        </div>
      )}

      {/* Action Items */}
      <div className="space-y-4">
        {displayedActions.map((action) => (
          <ActionItemCard
            key={action.id}
            action={action}
            onApprove={onApprove}
            onReject={onReject}
            onViewDetails={onViewDetails}
            onModify={onModify}
            tenantId={tenantId}
          />
        ))}
      </div>

      {/* Show More/Less */}
      {(actionQueue.totalActions || 0) > 3 && (
        <button
          onClick={() => setShowAll(!showAll)}
          className="w-full mt-4 py-3 rounded-lg font-semibold transition-colors duration-200"
          style={{
            backgroundColor: 'var(--bg-tertiary)',
            color: 'var(--text-primary)',
          }}
        >
          {showAll
            ? t('jtbd.action_queue.show_less')
            : t('jtbd.action_queue.show_more', { count: (actionQueue.totalActions || 3) - 3 })}
        </button>
      )}
    </div>
  );
}
