// ================================================================
// frontend/src/components/dashboard/ExecutionProgressTracker.tsx
// ================================================================
/**
 * Execution Progress Tracker - Plan vs Actual
 *
 * Shows how today's execution is progressing vs the plan.
 * Helps identify bottlenecks early (e.g., deliveries running late).
 *
 * Features:
 * - Production progress (plan vs actual batches)
 * - Delivery status (received, pending, overdue)
 * - Approval tracking
 * - "What's next" preview
 * - Status indicators (on_track, at_risk, completed)
 */

import React from 'react';
import {
  Package,
  Truck,
  CheckCircle,
  Clock,
  AlertCircle,
  TrendingUp,
  Calendar,
} from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { formatTime as formatTimeUtil } from '../../utils/date';

// ============================================================
// Types
// ============================================================

export interface ProductionProgress {
  status: 'no_plan' | 'completed' | 'on_track' | 'at_risk';
  total: number;
  completed: number;
  inProgress: number;
  pending: number;
  inProgressBatches?: Array<{
    id: string;
    batchNumber: string;
    productName: string;
    quantity: number;
    actualStartTime: string;
    estimatedCompletion: string;
  }>;
  nextBatch?: {
    productName: string;
    plannedStart: string; // ISO datetime
    batchNumber: string;
  };
}

export interface DeliveryProgress {
  status: 'no_deliveries' | 'completed' | 'on_track' | 'at_risk';
  total: number;
  received: number;
  pending: number;
  overdue: number;
}

export interface ApprovalProgress {
  status: 'completed' | 'on_track' | 'at_risk';
  pending: number;
}

export interface ExecutionProgress {
  production: ProductionProgress;
  deliveries: DeliveryProgress;
  approvals: ApprovalProgress;
}

interface ExecutionProgressTrackerProps {
  progress: ExecutionProgress | null | undefined;
  loading?: boolean;
}

// ============================================================
// Helper Functions
// ============================================================

function getStatusColor(status: string): {
  bg: string;
  border: string;
  text: string;
  icon: string;
} {
  switch (status) {
    case 'completed':
      return {
        bg: 'var(--color-success-50)',
        border: 'var(--color-success-300)',
        text: 'var(--color-success-900)',
        icon: 'var(--color-success-600)',
      };
    case 'on_track':
      return {
        bg: 'var(--color-info-50)',
        border: 'var(--color-info-300)',
        text: 'var(--color-info-900)',
        icon: 'var(--color-info-600)',
      };
    case 'at_risk':
      return {
        bg: 'var(--color-error-50)',
        border: 'var(--color-error-300)',
        text: 'var(--color-error-900)',
        icon: 'var(--color-error-600)',
      };
    case 'no_plan':
    case 'no_deliveries':
      return {
        bg: 'var(--bg-secondary)',
        border: 'var(--border-secondary)',
        text: 'var(--text-secondary)',
        icon: 'var(--text-tertiary)',
      };
    default:
      return {
        bg: 'var(--bg-secondary)',
        border: 'var(--border-secondary)',
        text: 'var(--text-primary)',
        icon: 'var(--text-secondary)',
      };
  }
}

function formatTime(isoDate: string): string {
  return formatTimeUtil(isoDate, 'HH:mm');
}

// ============================================================
// Sub-Components
// ============================================================

interface SectionProps {
  title: string;
  icon: React.ElementType;
  status: string;
  statusLabel: string;
  children: React.ReactNode;
}

function Section({ title, icon: Icon, status, statusLabel, children }: SectionProps) {
  const colors = getStatusColor(status);

  return (
    <div
      className="rounded-lg border-2 p-4"
      style={{
        backgroundColor: colors.bg,
        borderColor: colors.border,
      }}
    >
      {/* Section Header */}
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-2">
          <Icon className="w-5 h-5" style={{ color: colors.icon }} />
          <h3 className="font-bold" style={{ color: colors.text }}>
            {title}
          </h3>
        </div>
        <span
          className="px-3 py-1 rounded-full text-xs font-semibold"
          style={{
            backgroundColor: colors.border,
            color: 'white',
          }}
        >
          {statusLabel}
        </span>
      </div>

      {/* Section Content */}
      {children}
    </div>
  );
}

// ============================================================
// Main Component
// ============================================================

export function ExecutionProgressTracker({
  progress,
  loading,
}: ExecutionProgressTrackerProps) {
  const { t } = useTranslation(['dashboard', 'common']);

  if (loading) {
    return (
      <div
        className="rounded-xl shadow-lg p-6 border"
        style={{
          backgroundColor: 'var(--bg-primary)',
          borderColor: 'var(--border-primary)',
        }}
      >
        <div className="animate-pulse space-y-4">
          <div className="h-6 rounded w-1/3" 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 className="h-32 rounded" style={{ backgroundColor: 'var(--bg-tertiary)' }}></div>
        </div>
      </div>
    );
  }

  if (!progress) {
    return null;
  }

  return (
    <div
      className="rounded-xl shadow-xl p-6 border-2 transition-all duration-300 hover:shadow-2xl"
      style={{
        backgroundColor: 'var(--bg-primary)',
        borderColor: 'var(--border-primary)',
      }}
    >
      {/* Header with Hero Icon */}
      <div className="flex items-center gap-4 mb-6">
        {/* Hero Icon */}
        <div
          className="flex-shrink-0 w-16 h-16 md:w-20 md:h-20 rounded-full flex items-center justify-center shadow-md"
          style={{ backgroundColor: 'var(--color-primary-100)' }}
        >
          <TrendingUp className="w-8 h-8 md:w-10 md:h-10" strokeWidth={2.5} style={{ color: 'var(--color-primary-600)' }} />
        </div>

        {/* Title */}
        <div className="flex-1 min-w-0">
          <h2 className="text-2xl md:text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
            {t('dashboard:execution_progress.title')}
          </h2>
          <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
            {t('dashboard:execution_progress.subtitle')}
          </p>
        </div>
      </div>

      <div className="space-y-4">
        {/* Production Section */}
        <Section
          title={t('dashboard:execution_progress.production')}
          icon={Package}
          status={progress.production.status}
          statusLabel={t(`dashboard:execution_progress.status.${progress.production.status}`)}
        >
          {progress.production.status === 'no_plan' ? (
            <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
              {t('dashboard:execution_progress.no_production_plan')}
            </p>
          ) : (
            <>
              {/* Progress Bar */}
              <div className="mb-3">
                <div className="flex items-center justify-between text-sm mb-2">
                  <span style={{ color: 'var(--text-secondary)' }}>
                    {progress.production.completed} / {progress.production.total} {t('dashboard:execution_progress.batches_complete')}
                  </span>
                  <span className="font-semibold" style={{ color: 'var(--text-primary)' }}>
                    {Math.round((progress.production.completed / progress.production.total) * 100)}%
                  </span>
                </div>
                <div
                  className="h-3 rounded-full overflow-hidden"
                  style={{ backgroundColor: 'var(--bg-tertiary)' }}
                >
                  <div
                    className="h-full transition-all duration-500"
                    style={{
                      width: `${(progress.production.completed / progress.production.total) * 100}%`,
                      backgroundColor:
                        progress.production.status === 'at_risk'
                          ? 'var(--color-error-500)'
                          : progress.production.status === 'completed'
                          ? 'var(--color-success-500)'
                          : 'var(--color-info-500)',
                    }}
                  />
                </div>
              </div>

              {/* Status Breakdown */}
              <div className="grid grid-cols-3 gap-2 text-sm">
                <div>
                  <span style={{ color: 'var(--text-secondary)' }}>{t('dashboard:execution_progress.completed')}:</span>
                  <span className="ml-2 font-semibold" style={{ color: 'var(--color-success-700)' }}>
                    {progress.production.completed}
                  </span>
                </div>
                <div>
                  <span style={{ color: 'var(--text-secondary)' }}>{t('dashboard:execution_progress.in_progress')}:</span>
                  <span className="ml-2 font-semibold" style={{ color: 'var(--color-info-700)' }}>
                    {progress.production.inProgress}
                  </span>
                  {progress.production.inProgressBatches && progress.production.inProgressBatches.length > 0 && (
                    <div className="ml-6 mt-1 text-xs" style={{ color: 'var(--text-tertiary)' }}>
                      {progress.production.inProgressBatches.map((batch) => (
                        <div key={batch.id} className="flex items-center gap-2">
                          <span>• {batch.productName}</span>
                          <span className="opacity-60">({batch.batchNumber})</span>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
                <div>
                  <span style={{ color: 'var(--text-secondary)' }}>{t('dashboard:execution_progress.pending')}:</span>
                  <span className="ml-2 font-semibold" style={{ color: 'var(--text-tertiary)' }}>
                    {progress.production.pending}
                  </span>
                </div>
              </div>

              {/* Next Batch */}
              {progress.production.nextBatch && (
                <div
                  className="mt-3 p-3 rounded-lg border"
                  style={{
                    backgroundColor: 'var(--bg-primary)',
                    borderColor: 'var(--border-secondary)',
                  }}
                >
                  <div className="flex items-center gap-2 mb-1">
                    <Clock className="w-4 h-4" style={{ color: 'var(--color-info)' }} />
                    <span className="text-xs font-semibold" style={{ color: 'var(--text-secondary)' }}>
                      {t('dashboard:execution_progress.whats_next')}
                    </span>
                  </div>
                  <p className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>
                    {progress.production.nextBatch.productName}
                  </p>
                  <p className="text-xs" style={{ color: 'var(--text-secondary)' }}>
                    {progress.production.nextBatch.batchNumber} · {t('dashboard:execution_progress.starts_at')}{' '}
                    {formatTime(progress.production.nextBatch.plannedStart)}
                  </p>
                </div>
              )}
            </>
          )}
        </Section>

        {/* Deliveries Section */}
        <Section
          title={t('dashboard:execution_progress.deliveries')}
          icon={Truck}
          status={progress.deliveries.status}
          statusLabel={t(`dashboard:execution_progress.status.${progress.deliveries.status}`)}
        >
          {progress.deliveries.status === 'no_deliveries' ? (
            <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
              {t('dashboard:execution_progress.no_deliveries_today')}
            </p>
          ) : (
            <div className="grid grid-cols-3 gap-3">
              <div className="text-center">
                <div className="flex items-center justify-center mb-1">
                  <CheckCircle className="w-4 h-4" style={{ color: 'var(--color-success-600)' }} />
                </div>
                <div className="text-2xl font-bold" style={{ color: 'var(--color-success-700)' }}>
                  {progress.deliveries.received}
                </div>
                <div className="text-xs" style={{ color: 'var(--text-secondary)' }}>
                  {t('dashboard:execution_progress.received')}
                </div>
              </div>

              <div className="text-center">
                <div className="flex items-center justify-center mb-1">
                  <Clock className="w-4 h-4" style={{ color: 'var(--color-info-600)' }} />
                </div>
                <div className="text-2xl font-bold" style={{ color: 'var(--color-info-700)' }}>
                  {progress.deliveries.pending}
                </div>
                <div className="text-xs" style={{ color: 'var(--text-secondary)' }}>
                  {t('dashboard:execution_progress.pending')}
                </div>
              </div>

              <div className="text-center">
                <div className="flex items-center justify-center mb-1">
                  <AlertCircle className="w-4 h-4" style={{ color: 'var(--color-error-600)' }} />
                </div>
                <div className="text-2xl font-bold" style={{ color: 'var(--color-error-700)' }}>
                  {progress.deliveries.overdue}
                </div>
                <div className="text-xs" style={{ color: 'var(--text-secondary)' }}>
                  {t('dashboard:execution_progress.overdue')}
                </div>
              </div>
            </div>
          )}
        </Section>

        {/* Approvals Section */}
        <Section
          title={t('dashboard:execution_progress.approvals')}
          icon={Calendar}
          status={progress.approvals.status}
          statusLabel={t(`dashboard:execution_progress.status.${progress.approvals.status}`)}
        >
          <div className="flex items-center justify-between">
            <span style={{ color: 'var(--text-secondary)' }}>
              {t('dashboard:execution_progress.pending_approvals')}
            </span>
            <span
              className="text-3xl font-bold"
              style={{
                color:
                  progress.approvals.status === 'at_risk'
                    ? 'var(--color-error-700)'
                    : progress.approvals.status === 'completed'
                    ? 'var(--color-success-700)'
                    : 'var(--color-info-700)',
              }}
            >
              {progress.approvals.pending}
            </span>
          </div>
        </Section>
      </div>
    </div>
  );
}