/**
 * PendingDeliveriesBlock - Block 3: "Entregas Pendientes"
 *
 * Displays today's delivery status:
 * - Overdue deliveries with alert styling
 * - Pending deliveries expected today
 * - Actions: Call Supplier, Mark Received
 */

import React from 'react';
import { useTranslation } from 'react-i18next';
import {
  AlertTriangle,
  CheckCircle2,
  Clock,
  Package,
  Phone,
  Truck,
} from 'lucide-react';

interface PendingDeliveriesBlockProps {
  overdueDeliveries?: any[];
  pendingDeliveries?: any[];
  onCallSupplier?: (delivery: any) => void;
  onMarkReceived?: (poId: string) => void;
  loading?: boolean;
}

export function PendingDeliveriesBlock({
  overdueDeliveries = [],
  pendingDeliveries = [],
  onCallSupplier,
  onMarkReceived,
  loading,
}: PendingDeliveriesBlockProps) {
  const { t } = useTranslation(['dashboard', 'common']);

  if (loading) {
    return (
      <div className="rounded-xl shadow-lg p-6 border border-[var(--border-primary)] bg-[var(--bg-primary)] animate-pulse">
        <div className="flex items-center gap-4 mb-4">
          <div className="w-12 h-12 bg-[var(--bg-secondary)] rounded-full"></div>
          <div className="flex-1 space-y-2">
            <div className="h-5 bg-[var(--bg-secondary)] rounded w-1/3"></div>
            <div className="h-4 bg-[var(--bg-secondary)] rounded w-1/4"></div>
          </div>
        </div>
        <div className="space-y-3">
          <div className="h-16 bg-[var(--bg-secondary)] rounded"></div>
          <div className="h-16 bg-[var(--bg-secondary)] rounded"></div>
        </div>
      </div>
    );
  }

  const hasOverdue = overdueDeliveries.length > 0;
  const hasPending = pendingDeliveries.length > 0;
  const hasAnyDeliveries = hasOverdue || hasPending;
  const totalCount = overdueDeliveries.length + pendingDeliveries.length;

  // Determine header status
  const status = hasOverdue ? 'error' : hasPending ? 'warning' : 'success';

  const statusStyles = {
    success: {
      iconBg: 'bg-[var(--color-success-100)]',
      iconColor: 'text-[var(--color-success-600)]',
    },
    warning: {
      iconBg: 'bg-[var(--color-warning-100)]',
      iconColor: 'text-[var(--color-warning-600)]',
    },
    error: {
      iconBg: 'bg-[var(--color-error-100)]',
      iconColor: 'text-[var(--color-error-600)]',
    },
  };

  const styles = statusStyles[status];

  // Format hours display
  const formatHours = (hours: number) => {
    if (hours < 1) return t('common:time.less_than_hour', '< 1h');
    if (hours === 1) return t('common:time.one_hour', '1h');
    return `${hours}h`;
  };

  return (
    <div className="rounded-xl shadow-lg border border-[var(--border-primary)] bg-[var(--bg-primary)] overflow-hidden">
      {/* Header */}
      <div className="p-6 pb-4">
        <div className="flex items-center gap-4">
          {/* Icon */}
          <div className={`w-12 h-12 rounded-full flex items-center justify-center flex-shrink-0 ${styles.iconBg}`}>
            {hasOverdue ? (
              <AlertTriangle className={`w-6 h-6 ${styles.iconColor}`} />
            ) : hasAnyDeliveries ? (
              <Truck className={`w-6 h-6 ${styles.iconColor}`} />
            ) : (
              <CheckCircle2 className={`w-6 h-6 ${styles.iconColor}`} />
            )}
          </div>

          {/* Title & Count */}
          <div className="flex-1">
            <h2 className="text-xl font-bold text-[var(--text-primary)]">
              {t('dashboard:new_dashboard.pending_deliveries.title')}
            </h2>
            <p className="text-sm text-[var(--text-secondary)]">
              {hasAnyDeliveries
                ? t('dashboard:new_dashboard.pending_deliveries.count', { count: totalCount })
                : t('dashboard:new_dashboard.pending_deliveries.no_deliveries')}
            </p>
          </div>

          {/* Count Badges */}
          <div className="flex items-center gap-2">
            {hasOverdue && (
              <div className="px-3 py-1 rounded-full bg-[var(--color-error-100)] text-[var(--color-error-700)] font-semibold text-sm">
                {overdueDeliveries.length} {t('dashboard:new_dashboard.pending_deliveries.overdue_badge')}
              </div>
            )}
            {hasPending && (
              <div className="px-3 py-1 rounded-full bg-[var(--color-warning-100)] text-[var(--color-warning-700)] font-semibold text-sm">
                {pendingDeliveries.length}
              </div>
            )}
          </div>
        </div>
      </div>

      {/* Content */}
      {hasAnyDeliveries ? (
        <div className="border-t border-[var(--border-primary)]">
          {/* Overdue Section */}
          {hasOverdue && (
            <div className="bg-[var(--color-error-50)]">
              <div className="px-6 py-3 border-b border-[var(--color-error-100)]">
                <h3 className="text-sm font-semibold text-[var(--color-error-700)] flex items-center gap-2">
                  <AlertTriangle className="w-4 h-4" />
                  {t('dashboard:new_dashboard.pending_deliveries.overdue_section')}
                </h3>
              </div>

              {overdueDeliveries.map((delivery, index) => (
                <div
                  key={delivery.po_id || index}
                  className={`p-4 ${
                    index < overdueDeliveries.length - 1 ? 'border-b border-[var(--color-error-100)]' : ''
                  }`}
                >
                  <div className="flex items-start gap-4">
                    {/* Delivery Info */}
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2 mb-1">
                        <Package className="w-4 h-4 text-[var(--color-error-600)]" />
                        <span className="font-semibold text-[var(--text-primary)]">
                          {delivery.supplier_name || 'Unknown Supplier'}
                        </span>
                      </div>

                      <p className="text-sm text-[var(--text-secondary)] mb-1">
                        {t('dashboard:new_dashboard.pending_deliveries.po_ref', {
                          number: delivery.po_number || delivery.po_id?.slice(0, 8),
                        })}
                      </p>

                      {/* Overdue Badge */}
                      <div className="inline-flex items-center gap-1 px-2 py-1 rounded bg-[var(--color-error-100)] text-[var(--color-error-700)] text-xs font-medium">
                        <Clock className="w-3 h-3" />
                        {t('dashboard:new_dashboard.pending_deliveries.overdue_by', {
                          hours: formatHours(delivery.hoursOverdue || 0),
                        })}
                      </div>
                    </div>

                    {/* Actions */}
                    <div className="flex items-center gap-2 flex-shrink-0">
                      {delivery.supplier_phone && onCallSupplier && (
                        <button
                          onClick={() => onCallSupplier(delivery)}
                          className="flex items-center gap-2 px-3 py-2 rounded-lg border border-[var(--border-primary)] text-[var(--text-primary)] hover:bg-[var(--bg-secondary)] transition-colors"
                        >
                          <Phone className="w-4 h-4" />
                          <span className="text-sm font-medium hidden sm:inline">
                            {t('dashboard:new_dashboard.pending_deliveries.call_supplier')}
                          </span>
                        </button>
                      )}

                      {onMarkReceived && (
                        <button
                          onClick={() => onMarkReceived(delivery.po_id)}
                          className="flex items-center gap-2 px-3 py-2 rounded-lg bg-[var(--color-success-600)] text-white hover:bg-[var(--color-success-700)] transition-colors"
                        >
                          <CheckCircle2 className="w-4 h-4" />
                          <span className="text-sm font-medium">
                            {t('dashboard:new_dashboard.pending_deliveries.mark_received')}
                          </span>
                        </button>
                      )}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}

          {/* Pending Today Section */}
          {hasPending && (
            <div>
              <div className="px-6 py-3 border-b border-[var(--border-primary)] bg-[var(--bg-secondary)]">
                <h3 className="text-sm font-semibold text-[var(--text-secondary)] flex items-center gap-2">
                  <Truck className="w-4 h-4" />
                  {t('dashboard:new_dashboard.pending_deliveries.today_section')}
                </h3>
              </div>

              {pendingDeliveries.map((delivery, index) => (
                <div
                  key={delivery.po_id || index}
                  className={`p-4 ${
                    index < pendingDeliveries.length - 1 ? 'border-b border-[var(--border-primary)]' : ''
                  }`}
                >
                  <div className="flex items-start gap-4">
                    {/* Delivery Info */}
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2 mb-1">
                        <Package className="w-4 h-4 text-[var(--text-tertiary)]" />
                        <span className="font-semibold text-[var(--text-primary)]">
                          {delivery.supplier_name || 'Unknown Supplier'}
                        </span>
                      </div>

                      <p className="text-sm text-[var(--text-secondary)] mb-1">
                        {t('dashboard:new_dashboard.pending_deliveries.po_ref', {
                          number: delivery.po_number || delivery.po_id?.slice(0, 8),
                        })}
                      </p>

                      {/* Arriving Badge */}
                      <div className="inline-flex items-center gap-1 px-2 py-1 rounded bg-[var(--color-info-50)] text-[var(--color-info-700)] text-xs font-medium">
                        <Clock className="w-3 h-3" />
                        {t('dashboard:new_dashboard.pending_deliveries.arriving_in', {
                          hours: formatHours(delivery.hoursUntil || 0),
                        })}
                      </div>
                    </div>

                    {/* Actions */}
                    <div className="flex items-center gap-2 flex-shrink-0">
                      {onMarkReceived && (
                        <button
                          onClick={() => onMarkReceived(delivery.po_id)}
                          className="flex items-center gap-2 px-3 py-2 rounded-lg bg-[var(--color-success-600)] text-white hover:bg-[var(--color-success-700)] transition-colors"
                        >
                          <CheckCircle2 className="w-4 h-4" />
                          <span className="text-sm font-medium">
                            {t('dashboard:new_dashboard.pending_deliveries.mark_received')}
                          </span>
                        </button>
                      )}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      ) : (
        /* Empty State */
        <div className="px-6 pb-6">
          <div className="flex items-center gap-3 p-4 rounded-lg bg-[var(--color-success-50)] border border-[var(--color-success-100)]">
            <CheckCircle2 className="w-6 h-6 text-[var(--color-success-600)]" />
            <p className="text-sm text-[var(--color-success-700)]">
              {t('dashboard:new_dashboard.pending_deliveries.all_clear')}
            </p>
          </div>
        </div>
      )}
    </div>
  );
}

export default PendingDeliveriesBlock;
