/**
 * ProductionStatusBlock - Block 4: "Estado de Produccion"
 *
 * Displays today's production overview:
 * - Late to start batches (should have started but haven't)
 * - Currently running batches (IN_PROGRESS)
 * - Pending batches for today
 * - AI reasoning for batch scheduling
 */

import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
  AlertTriangle,
  Brain,
  CheckCircle2,
  ChevronDown,
  ChevronUp,
  Clock,
  Factory,
  Play,
  Timer,
} from 'lucide-react';

interface ProductionStatusBlockProps {
  lateToStartBatches?: any[];
  runningBatches?: any[];
  pendingBatches?: any[];
  onStartBatch?: (batchId: string) => Promise<void>;
  onViewBatch?: (batchId: string) => void;
  loading?: boolean;
}

export function ProductionStatusBlock({
  lateToStartBatches = [],
  runningBatches = [],
  pendingBatches = [],
  onStartBatch,
  onViewBatch,
  loading,
}: ProductionStatusBlockProps) {
  const { t } = useTranslation(['dashboard', 'common', 'production']);
  const [expandedReasoningId, setExpandedReasoningId] = useState<string | null>(null);
  const [processingId, setProcessingId] = useState<string | null>(null);

  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-20 bg-[var(--bg-secondary)] rounded"></div>
          <div className="h-20 bg-[var(--bg-secondary)] rounded"></div>
        </div>
      </div>
    );
  }

  const hasLate = lateToStartBatches.length > 0;
  const hasRunning = runningBatches.length > 0;
  const hasPending = pendingBatches.length > 0;
  const hasAnyProduction = hasLate || hasRunning || hasPending;
  const totalCount = lateToStartBatches.length + runningBatches.length + pendingBatches.length;

  // Determine header status
  const status = hasLate ? 'error' : hasRunning ? 'info' : 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)]',
    },
    info: {
      iconBg: 'bg-[var(--color-info-100)]',
      iconColor: 'text-[var(--color-info-600)]',
    },
    error: {
      iconBg: 'bg-[var(--color-error-100)]',
      iconColor: 'text-[var(--color-error-600)]',
    },
  };

  const styles = statusStyles[status];

  // Handle start batch
  const handleStartBatch = async (batchId: string) => {
    if (!onStartBatch || processingId) return;
    setProcessingId(batchId);
    try {
      await onStartBatch(batchId);
    } finally {
      setProcessingId(null);
    }
  };

  // Toggle reasoning expansion
  const toggleReasoning = (batchId: string) => {
    setExpandedReasoningId(expandedReasoningId === batchId ? null : batchId);
  };

  // Format AI reasoning
  const formatReasoning = (batch: any): string | null => {
    const reasoningData = batch.reasoning_data;
    if (!reasoningData) return null;

    if (typeof reasoningData === 'string') return reasoningData;

    if (reasoningData.type === 'forecast_demand') {
      return t('dashboard:new_dashboard.production_status.reasoning.forecast_demand', {
        product: reasoningData.parameters?.product_name || batch.product_name,
        demand: reasoningData.parameters?.predicted_demand || batch.planned_quantity,
      });
    }

    if (reasoningData.type === 'customer_order') {
      return t('dashboard:new_dashboard.production_status.reasoning.customer_order', {
        customer: reasoningData.parameters?.customer_name || 'customer',
      });
    }

    if (reasoningData.summary) return reasoningData.summary;

    return null;
  };

  // Format time
  const formatTime = (isoString: string | null | undefined) => {
    if (!isoString) return '--:--';
    const date = new Date(isoString);
    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
  };

  // Calculate progress percentage for running batches
  const calculateProgress = (batch: any): number => {
    if (!batch.actual_start_time || !batch.planned_end_time) return 0;

    const start = new Date(batch.actual_start_time).getTime();
    const end = new Date(batch.planned_end_time).getTime();
    const now = Date.now();

    if (now >= end) return 100;
    if (now <= start) return 0;

    return Math.round(((now - start) / (end - start)) * 100);
  };

  // Render a batch item
  const renderBatchItem = (batch: any, type: 'late' | 'running' | 'pending', index: number, total: number) => {
    const batchId = batch.id || batch.batch_id;
    const isProcessing = processingId === batchId;
    const isExpanded = expandedReasoningId === batchId;
    const reasoning = formatReasoning(batch);
    const progress = type === 'running' ? calculateProgress(batch) : 0;

    const typeStyles = {
      late: {
        timeBg: 'bg-[var(--color-error-100)]',
        timeColor: 'text-[var(--color-error-700)]',
        icon: <AlertTriangle className="w-4 h-4 text-[var(--color-error-600)]" />,
      },
      running: {
        timeBg: 'bg-[var(--color-info-100)]',
        timeColor: 'text-[var(--color-info-700)]',
        icon: <Timer className="w-4 h-4 text-[var(--color-info-600)]" />,
      },
      pending: {
        timeBg: 'bg-[var(--color-warning-100)]',
        timeColor: 'text-[var(--color-warning-700)]',
        icon: <Clock className="w-4 h-4 text-[var(--text-tertiary)]" />,
      },
    };

    const batchStyles = typeStyles[type];

    return (
      <div
        key={batchId || index}
        className={`p-4 ${index < total - 1 ? 'border-b border-[var(--border-primary)]' : ''}`}
      >
        <div className="flex items-start gap-4">
          {/* Batch Info */}
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2 mb-1">
              {batchStyles.icon}
              <span className="font-semibold text-[var(--text-primary)]">
                {batch.product_name || 'Unknown Product'}
              </span>
              {reasoning && (
                <button
                  onClick={() => toggleReasoning(batchId)}
                  className="flex items-center gap-1 px-2 py-0.5 rounded-full text-xs bg-[var(--color-primary-50)] text-[var(--color-primary-700)] hover:bg-[var(--color-primary-100)] transition-colors"
                >
                  <Brain className="w-3 h-3" />
                  AI
                  {isExpanded ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />}
                </button>
              )}
            </div>

            <p className="text-sm text-[var(--text-secondary)] mb-2">
              {t('dashboard:new_dashboard.production_status.batch_info', {
                number: batch.batch_number || batchId?.slice(0, 8),
                quantity: batch.planned_quantity || 0,
              })}
            </p>

            {/* Time/Status Badge */}
            <div className="flex items-center gap-2">
              {type === 'late' && (
                <div className={`inline-flex items-center gap-1 px-2 py-1 rounded ${batchStyles.timeBg} ${batchStyles.timeColor} text-xs font-medium`}>
                  <Clock className="w-3 h-3" />
                  {t('dashboard:new_dashboard.production_status.should_have_started', {
                    time: formatTime(batch.planned_start_time),
                  })}
                </div>
              )}

              {type === 'running' && (
                <>
                  <div className={`inline-flex items-center gap-1 px-2 py-1 rounded ${batchStyles.timeBg} ${batchStyles.timeColor} text-xs font-medium`}>
                    <Timer className="w-3 h-3" />
                    {t('dashboard:new_dashboard.production_status.started_at', {
                      time: formatTime(batch.actual_start_time),
                    })}
                  </div>
                  {/* Progress Bar */}
                  <div className="flex-1 max-w-[120px]">
                    <div className="h-2 bg-[var(--bg-tertiary)] rounded-full overflow-hidden">
                      <div
                        className="h-full bg-[var(--color-info-500)] transition-all"
                        style={{ width: `${progress}%` }}
                      />
                    </div>
                    <span className="text-xs text-[var(--text-tertiary)]">{progress}%</span>
                  </div>
                </>
              )}

              {type === 'pending' && batch.planned_start_time && (
                <div className={`inline-flex items-center gap-1 px-2 py-1 rounded ${batchStyles.timeBg} ${batchStyles.timeColor} text-xs font-medium`}>
                  <Clock className="w-3 h-3" />
                  {t('dashboard:new_dashboard.production_status.starts_at', {
                    time: formatTime(batch.planned_start_time),
                  })}
                </div>
              )}
            </div>
          </div>

          {/* Actions */}
          <div className="flex items-center gap-2 flex-shrink-0">
            {(type === 'late' || type === 'pending') && onStartBatch && (
              <button
                onClick={() => handleStartBatch(batchId)}
                disabled={isProcessing}
                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 disabled:opacity-50"
              >
                <Play className="w-4 h-4" />
                <span className="text-sm font-medium">
                  {t('dashboard:new_dashboard.production_status.start_batch')}
                </span>
              </button>
            )}

            {type === 'running' && onViewBatch && (
              <button
                onClick={() => onViewBatch(batchId)}
                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"
              >
                <span className="text-sm font-medium">
                  {t('dashboard:new_dashboard.production_status.view_details')}
                </span>
              </button>
            )}
          </div>
        </div>

        {/* AI Reasoning (Expanded) */}
        {isExpanded && reasoning && (
          <div className="mt-3 p-3 rounded-lg bg-[var(--color-primary-50)] border border-[var(--color-primary-100)]">
            <div className="flex items-start gap-2">
              <Brain className="w-4 h-4 text-[var(--color-primary-600)] mt-0.5 flex-shrink-0" />
              <div>
                <p className="text-sm font-medium text-[var(--color-primary-700)] mb-1">
                  {t('dashboard:new_dashboard.production_status.ai_reasoning')}
                </p>
                <p className="text-sm text-[var(--color-primary-600)]">{reasoning}</p>
              </div>
            </div>
          </div>
        )}
      </div>
    );
  };

  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}`}>
            {hasLate ? (
              <AlertTriangle className={`w-6 h-6 ${styles.iconColor}`} />
            ) : hasAnyProduction ? (
              <Factory 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.production_status.title')}
            </h2>
            <p className="text-sm text-[var(--text-secondary)]">
              {hasAnyProduction
                ? t('dashboard:new_dashboard.production_status.count', { count: totalCount })
                : t('dashboard:new_dashboard.production_status.no_production')}
            </p>
          </div>

          {/* Count Badges */}
          <div className="flex items-center gap-2">
            {hasLate && (
              <div className="px-3 py-1 rounded-full bg-[var(--color-error-100)] text-[var(--color-error-700)] font-semibold text-sm">
                {lateToStartBatches.length} {t('dashboard:new_dashboard.production_status.late_badge')}
              </div>
            )}
            {hasRunning && (
              <div className="px-3 py-1 rounded-full bg-[var(--color-info-100)] text-[var(--color-info-700)] font-semibold text-sm">
                {runningBatches.length} {t('dashboard:new_dashboard.production_status.running_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">
                {pendingBatches.length}
              </div>
            )}
          </div>
        </div>
      </div>

      {/* Content */}
      {hasAnyProduction ? (
        <div className="border-t border-[var(--border-primary)]">
          {/* Late to Start Section */}
          {hasLate && (
            <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.production_status.late_section')}
                </h3>
              </div>
              {lateToStartBatches.map((batch, index) =>
                renderBatchItem(batch, 'late', index, lateToStartBatches.length)
              )}
            </div>
          )}

          {/* Running Section */}
          {hasRunning && (
            <div className="bg-[var(--color-info-50)]">
              <div className="px-6 py-3 border-b border-[var(--color-info-100)]">
                <h3 className="text-sm font-semibold text-[var(--color-info-700)] flex items-center gap-2">
                  <Timer className="w-4 h-4" />
                  {t('dashboard:new_dashboard.production_status.running_section')}
                </h3>
              </div>
              {runningBatches.map((batch, index) =>
                renderBatchItem(batch, 'running', index, runningBatches.length)
              )}
            </div>
          )}

          {/* Pending 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">
                  <Clock className="w-4 h-4" />
                  {t('dashboard:new_dashboard.production_status.pending_section')}
                </h3>
              </div>
              {pendingBatches.map((batch, index) =>
                renderBatchItem(batch, 'pending', index, pendingBatches.length)
              )}
            </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.production_status.all_clear')}
            </p>
          </div>
        </div>
      )}
    </div>
  );
}

export default ProductionStatusBlock;