respira/src/components/ProgressMonitor.tsx

import { useRef, useEffect, useState, useMemo } from "react";
import { useShallow } from "zustand/react/shallow";
import { useMachineStore } from "../stores/useMachineStore";
import { usePatternStore } from "../stores/usePatternStore";
import {
  CheckCircleIcon,
  ArrowRightIcon,
  CircleStackIcon,
  PlayIcon,
  ChartBarIcon,
  ArrowPathIcon,
} from "@heroicons/react/24/solid";
import { MachineStatus } from "../types/machine";
import {
  canStartSewing,
  canStartMaskTrace,
  canResumeSewing,
} from "../utils/machineStateHelpers";
import { calculatePatternTime } from "../utils/timeCalculation";
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Progress } from "@/components/ui/progress";

export function ProgressMonitor() {
  // Machine store
  const {
    machineStatus,
    patternInfo,
    sewingProgress,
    isDeleting,
    startMaskTrace,
    startSewing,
    resumeSewing,
  } = useMachineStore(
    useShallow((state) => ({
      machineStatus: state.machineStatus,
      patternInfo: state.patternInfo,
      sewingProgress: state.sewingProgress,
      isDeleting: state.isDeleting,
      startMaskTrace: state.startMaskTrace,
      startSewing: state.startSewing,
      resumeSewing: state.resumeSewing,
    })),
  );

  // Pattern store
  const pesData = usePatternStore((state) => state.pesData);
  const currentBlockRef = useRef<HTMLDivElement>(null);
  const colorBlocksScrollRef = useRef<HTMLDivElement>(null);
  const [showGradient, setShowGradient] = useState(true);

  // State indicators
  const isMaskTraceComplete =
    machineStatus === MachineStatus.MASK_TRACE_COMPLETE;

  // Use PEN stitch count as fallback when machine reports 0 total stitches
  const totalStitches = patternInfo
    ? patternInfo.totalStitches === 0 && pesData?.penStitches
      ? pesData.penStitches.stitches.length
      : patternInfo.totalStitches
    : 0;

  const progressPercent =
    totalStitches > 0
      ? ((sewingProgress?.currentStitch || 0) / totalStitches) * 100
      : 0;

  // Calculate color block information from decoded penStitches
  const colorBlocks = useMemo(() => {
    if (!pesData || !pesData.penStitches) return [];

    const blocks: Array<{
      colorIndex: number;
      threadHex: string;
      startStitch: number;
      endStitch: number;
      stitchCount: number;
      threadCatalogNumber: string | null;
      threadBrand: string | null;
      threadDescription: string | null;
      threadChart: string | null;
    }> = [];

    // Use the pre-computed color blocks from decoded PEN data
    for (const penBlock of pesData.penStitches.colorBlocks) {
      const thread = pesData.threads[penBlock.colorIndex];
      blocks.push({
        colorIndex: penBlock.colorIndex,
        threadHex: thread?.hex || "#000000",
        threadCatalogNumber: thread?.catalogNumber ?? null,
        threadBrand: thread?.brand ?? null,
        threadDescription: thread?.description ?? null,
        threadChart: thread?.chart ?? null,
        startStitch: penBlock.startStitchIndex,
        endStitch: penBlock.endStitchIndex,
        stitchCount: penBlock.endStitchIndex - penBlock.startStitchIndex,
      });
    }

    return blocks;
  }, [pesData]);

  // Determine current color block based on current stitch
  const currentStitch = sewingProgress?.currentStitch || 0;
  const currentBlockIndex = colorBlocks.findIndex(
    (block) =>
      currentStitch >= block.startStitch && currentStitch < block.endStitch,
  );

  // Calculate time based on color blocks (matches Brother app calculation)
  const { totalMinutes, elapsedMinutes } = useMemo(() => {
    if (colorBlocks.length === 0) {
      return { totalMinutes: 0, elapsedMinutes: 0 };
    }
    const result = calculatePatternTime(colorBlocks, currentStitch);
    return {
      totalMinutes: result.totalMinutes,
      elapsedMinutes: result.elapsedMinutes,
    };
  }, [colorBlocks, currentStitch]);

  // Auto-scroll to current block
  useEffect(() => {
    if (currentBlockRef.current) {
      currentBlockRef.current.scrollIntoView({
        behavior: "smooth",
        block: "nearest",
      });
    }
  }, [currentBlockIndex]);

  // Handle scroll to detect if at bottom
  const handleColorBlocksScroll = () => {
    if (colorBlocksScrollRef.current) {
      const { scrollTop, scrollHeight, clientHeight } =
        colorBlocksScrollRef.current;
      const isAtBottom = scrollTop + clientHeight >= scrollHeight - 5; // 5px threshold
      setShowGradient(!isAtBottom);
    }
  };

  // Check initial scroll state and update on resize
  useEffect(() => {
    const checkScrollable = () => {
      if (colorBlocksScrollRef.current) {
        const { scrollHeight, clientHeight } = colorBlocksScrollRef.current;
        const isScrollable = scrollHeight > clientHeight;
        setShowGradient(isScrollable);
      }
    };

    checkScrollable();
    window.addEventListener("resize", checkScrollable);
    return () => window.removeEventListener("resize", checkScrollable);
  }, [colorBlocks]);

  return (
    <Card className="p-0 gap-0 lg:h-full border-l-4 border-accent-600 dark:border-accent-500 flex flex-col lg:overflow-hidden">
      <CardHeader className="p-4 pb-3">
        <div className="flex items-start gap-3">
          <ChartBarIcon className="w-6 h-6 text-accent-600 dark:text-accent-400 flex-shrink-0 mt-0.5" />
          <div className="flex-1 min-w-0">
            <CardTitle className="text-sm">Sewing Progress</CardTitle>
            {sewingProgress && (
              <CardDescription className="text-xs">
                {progressPercent.toFixed(1)}% complete
              </CardDescription>
            )}
          </div>
        </div>
      </CardHeader>
      <CardContent className="px-4 pt-0 pb-4 flex-1 flex flex-col lg:overflow-hidden">
        {/* Pattern Info */}
        {patternInfo && (
          <div className="grid grid-cols-3 gap-2 text-xs mb-3">
            <div className="bg-gray-200 dark:bg-gray-700/50 p-2 rounded">
              <span className="text-gray-600 dark:text-gray-400 block">
                Total Stitches
              </span>
              <span className="font-semibold text-gray-900 dark:text-gray-100">
                {totalStitches.toLocaleString()}
              </span>
            </div>
            <div className="bg-gray-200 dark:bg-gray-700/50 p-2 rounded">
              <span className="text-gray-600 dark:text-gray-400 block">
                Total Time
              </span>
              <span className="font-semibold text-gray-900 dark:text-gray-100">
                {totalMinutes} min
              </span>
            </div>
            <div className="bg-gray-200 dark:bg-gray-700/50 p-2 rounded">
              <span className="text-gray-600 dark:text-gray-400 block">
                Speed
              </span>
              <span className="font-semibold text-gray-900 dark:text-gray-100">
                {patternInfo.speed} spm
              </span>
            </div>
          </div>
        )}

        {/* Progress Bar */}
        {sewingProgress && (
          <div className="mb-3">
            <Progress
              value={progressPercent}
              className="h-3 mb-2 [&>div]:bg-gradient-to-r [&>div]:from-accent-600 [&>div]:to-accent-700 dark:[&>div]:from-accent-600 dark:[&>div]:to-accent-800"
            />

            <div className="grid grid-cols-2 gap-2 text-xs mb-3">
              <div className="bg-gray-200 dark:bg-gray-700/50 p-2 rounded">
                <span className="text-gray-600 dark:text-gray-400 block">
                  Current Stitch
                </span>
                <span className="font-semibold text-gray-900 dark:text-gray-100">
                  {sewingProgress.currentStitch.toLocaleString()} /{" "}
                  {totalStitches.toLocaleString()}
                </span>
              </div>
              <div className="bg-gray-200 dark:bg-gray-700/50 p-2 rounded">
                <span className="text-gray-600 dark:text-gray-400 block">
                  Time
                </span>
                <span className="font-semibold text-gray-900 dark:text-gray-100">
                  {elapsedMinutes} / {totalMinutes} min
                </span>
              </div>
            </div>
          </div>
        )}

        {/* Color Blocks */}
        {colorBlocks.length > 0 && (
          <div className="mb-3 lg:flex-1 lg:min-h-0 flex flex-col">
            <h4 className="text-xs font-semibold mb-2 text-gray-700 dark:text-gray-300 flex-shrink-0">
              Color Blocks
            </h4>
            <div className="relative lg:flex-1 lg:min-h-0">
              <div
                ref={colorBlocksScrollRef}
                onScroll={handleColorBlocksScroll}
                className="lg:absolute lg:inset-0 flex flex-col gap-2 lg:overflow-y-auto scroll-smooth pr-1 [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-track]:bg-gray-100 dark:[&::-webkit-scrollbar-track]:bg-gray-700 [&::-webkit-scrollbar-thumb]:bg-primary-600 dark:[&::-webkit-scrollbar-thumb]:bg-primary-500 [&::-webkit-scrollbar-thumb]:rounded-full"
              >
                {colorBlocks.map((block, index) => {
                  const isCompleted = currentStitch >= block.endStitch;
                  const isCurrent = index === currentBlockIndex;

                  // Calculate progress within current block
                  let blockProgress = 0;
                  if (isCurrent) {
                    blockProgress =
                      ((currentStitch - block.startStitch) /
                        block.stitchCount) *
                      100;
                  } else if (isCompleted) {
                    blockProgress = 100;
                  }

                  return (
                    <div
                      key={index}
                      ref={isCurrent ? currentBlockRef : null}
                      className={`p-2.5 rounded-lg border-2 transition-all duration-300 ${
                        isCompleted
                          ? "border-success-600 bg-success-50 dark:bg-success-900/20"
                          : isCurrent
                            ? "border-gray-400 dark:border-gray-500 bg-white dark:bg-gray-700"
                            : "border-gray-200 dark:border-gray-600 bg-gray-100 dark:bg-gray-800/50 opacity-70"
                      }`}
                      role="listitem"
                      aria-label={`Thread ${block.colorIndex + 1}, ${block.stitchCount} stitches, ${isCompleted ? "completed" : isCurrent ? "in progress" : "pending"}`}
                    >
                      <div className="flex items-center gap-2.5">
                        {/* Color swatch */}
                        <div
                          className="w-7 h-7 rounded-lg border-2 border-gray-300 dark:border-gray-600 shadow-md flex-shrink-0"
                          style={{
                            backgroundColor: block.threadHex,
                          }}
                          title={`Thread color: ${block.threadHex}`}
                          aria-label={`Thread color ${block.threadHex}`}
                        />

                        {/* Thread info */}
                        <div className="flex-1 min-w-0">
                          <div className="font-semibold text-xs text-gray-900 dark:text-gray-100">
                            Thread {block.colorIndex + 1}
                            {(block.threadBrand ||
                              block.threadChart ||
                              block.threadDescription ||
                              block.threadCatalogNumber) && (
                              <span className="font-normal text-gray-600 dark:text-gray-400">
                                {" "}
                                (
                                {(() => {
                                  // Primary metadata: brand and catalog number
                                  const primaryMetadata = [
                                    block.threadBrand,
                                    block.threadCatalogNumber
                                      ? `#${block.threadCatalogNumber}`
                                      : null,
                                  ]
                                    .filter(Boolean)
                                    .join(" ");

                                  // Secondary metadata: chart and description
                                  const secondaryMetadata = [
                                    block.threadChart,
                                    block.threadDescription,
                                  ]
                                    .filter(Boolean)
                                    .join(" ");

                                  return [primaryMetadata, secondaryMetadata]
                                    .filter(Boolean)
                                    .join(" • ");
                                })()}
                                )
                              </span>
                            )}
                          </div>
                          <div className="text-xs text-gray-600 dark:text-gray-400 mt-0.5">
                            {block.stitchCount.toLocaleString()} stitches
                          </div>
                        </div>

                        {/* Status icon */}
                        {isCompleted ? (
                          <CheckCircleIcon
                            className="w-5 h-5 text-success-600 flex-shrink-0"
                            aria-label="Completed"
                          />
                        ) : isCurrent ? (
                          <ArrowRightIcon
                            className="w-5 h-5 text-gray-600 dark:text-gray-400 flex-shrink-0 animate-pulse"
                            aria-label="In progress"
                          />
                        ) : (
                          <CircleStackIcon
                            className="w-5 h-5 text-gray-400 flex-shrink-0"
                            aria-label="Pending"
                          />
                        )}
                      </div>

                      {/* Progress bar for current block */}
                      {isCurrent && (
                        <Progress
                          value={blockProgress}
                          className="mt-2 h-1.5 [&>div]:bg-gray-600 dark:[&>div]:bg-gray-500"
                          aria-label={`${Math.round(blockProgress)}% complete`}
                        />
                      )}
                    </div>
                  );
                })}
              </div>
              {/* Gradient overlay to indicate more content below - only on desktop and when not at bottom */}
              {showGradient && (
                <div className="hidden lg:block absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-white dark:from-gray-800 to-transparent pointer-events-none" />
              )}
            </div>
          </div>
        )}

        {/* Action buttons */}
        <div className="flex gap-2 flex-shrink-0">
          {/* Resume has highest priority when available */}
          {canResumeSewing(machineStatus) && (
            <Button
              onClick={resumeSewing}
              disabled={isDeleting}
              className="flex-1"
              aria-label="Resume sewing the current pattern"
            >
              <PlayIcon className="w-3.5 h-3.5" />
              Resume Sewing
            </Button>
          )}

          {/* Start Sewing - primary action, takes more space */}
          {canStartSewing(machineStatus) && !canResumeSewing(machineStatus) && (
            <Button
              onClick={startSewing}
              disabled={isDeleting}
              className="flex-[2]"
              aria-label="Start sewing the pattern"
            >
              <PlayIcon className="w-3.5 h-3.5" />
              Start Sewing
            </Button>
          )}

          {/* Start Mask Trace - secondary action */}
          {canStartMaskTrace(machineStatus) && (
            <Button
              onClick={startMaskTrace}
              disabled={isDeleting}
              variant="outline"
              className="flex-1"
              aria-label={
                isMaskTraceComplete
                  ? "Start mask trace again"
                  : "Start mask trace"
              }
            >
              <ArrowPathIcon className="w-3.5 h-3.5" />
              {isMaskTraceComplete ? "Trace Again" : "Start Mask Trace"}
            </Button>
          )}
        </div>
      </CardContent>
    </Card>
  );
}