import { GrowthStage } from '../../lib/vertical-farming/types';

interface GrowthStageIndicatorProps {
  stages: GrowthStage[];
  currentStage: string;
  currentDay: number;
}

export default function GrowthStageIndicator({ stages, currentStage, currentDay }: GrowthStageIndicatorProps) {
  const currentStageIndex = stages.findIndex(s => s.name === currentStage);

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        {stages.map((stage, idx) => {
          const isCompleted = idx < currentStageIndex;
          const isCurrent = idx === currentStageIndex;
          const isFuture = idx > currentStageIndex;

          return (
            <div key={stage.name} className="flex-1 flex flex-col items-center relative">
              {/* Connector line */}
              {idx > 0 && (
                <div
                  className={`absolute top-4 -left-1/2 w-full h-0.5 ${
                    isCompleted || isCurrent ? 'bg-green-500' : 'bg-gray-200'
                  }`}
                  style={{ zIndex: 0 }}
                />
              )}

              {/* Stage dot */}
              <div
                className={`relative z-10 w-8 h-8 rounded-full flex items-center justify-center font-semibold text-sm ${
                  isCompleted
                    ? 'bg-green-500 text-white'
                    : isCurrent
                    ? 'bg-green-500 text-white ring-4 ring-green-200'
                    : 'bg-gray-200 text-gray-500'
                }`}
              >
                {isCompleted ? '\\u2713' : idx + 1}
              </div>

              {/* Stage name */}
              <p
                className={`mt-2 text-xs text-center font-medium ${
                  isCurrent ? 'text-green-700' : isCompleted ? 'text-gray-700' : 'text-gray-400'
                }`}
              >
                {stage.name}
              </p>

              {/* Days range */}
              <p className="text-xs text-gray-400">
                Day {stage.daysStart}-{stage.daysEnd}
              </p>
            </div>
          );
        })}
      </div>

      {/* Current stage details */}
      {currentStageIndex >= 0 && (
        <div className="mt-6 bg-green-50 rounded-lg p-4">
          <h4 className="font-semibold text-green-800 mb-2">
            Current: {stages[currentStageIndex].name} (Day {currentDay})
          </h4>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
            <div>
              <p className="text-gray-600">Temperature</p>
              <p className="font-medium">
                {stages[currentStageIndex].temperature.day}°C / {stages[currentStageIndex].temperature.night}°C
              </p>
            </div>
            <div>
              <p className="text-gray-600">Humidity</p>
              <p className="font-medium">
                {stages[currentStageIndex].humidity.day}% / {stages[currentStageIndex].humidity.night}%
              </p>
            </div>
            <div>
              <p className="text-gray-600">Light</p>
              <p className="font-medium">
                {stages[currentStageIndex].lightHours}h @ {stages[currentStageIndex].lightPpfd} PPFD
              </p>
            </div>
            <div>
              <p className="text-gray-600">Nutrients</p>
              <p className="font-medium">
                EC {stages[currentStageIndex].targetEc} / pH {stages[currentStageIndex].targetPh}
              </p>
            </div>
          </div>

          {stages[currentStageIndex].actions.length > 0 && (
            <div className="mt-3 pt-3 border-t border-green-200">
              <p className="text-sm font-medium text-green-700">Scheduled Actions:</p>
              {stages[currentStageIndex].actions.map((action, idx) => (
                <p key={idx} className="text-sm text-gray-600">
                  Day {action.day}: {action.action} - {action.description}
                  {action.automated && <span className="text-green-600 ml-1">(automated)</span>}
                </p>
              ))}
            </div>
          )}
        </div>
      )}
    </div>
  );
}
