tfm_ainventory/frontend/components/SearchLoadingModal.tsx

'use client';

import { useEffect, useState } from 'react';

interface SearchLoadingModalProps {
  isOpen: boolean;
  onTimeout?: () => void;
  maxSeconds?: number;
}

export function SearchLoadingModal({ isOpen, onTimeout, maxSeconds = 30 }: SearchLoadingModalProps) {
  const [seconds, setSeconds] = useState(maxSeconds);

  useEffect(() => {
    if (!isOpen) {
      setSeconds(maxSeconds);
      return;
    }

    const interval = setInterval(() => {
      setSeconds(prev => {
        if (prev <= 1) {
          clearInterval(interval);
          onTimeout?.();
          return maxSeconds;
        }
        return prev - 1;
      });
    }, 1000);

    return () => clearInterval(interval);
  }, [isOpen, maxSeconds, onTimeout]);

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-surface-container-lowest/50 flex items-center justify-center z-50">
      <div className="bg-primary/10 rounded-none p-6 max-w-md shadow-none">
        <h2 className="text-xl font-normal mb-4">Searching for specs...</h2>
        <p className="text-sm text-slate-600 mb-4">This may take up to {maxSeconds} seconds</p>

        <div className="mb-4">
          <div className="relative h-2 bg-surface-200 rounded-none overflow-hidden">
            <div
              className="h-full bg-primary transition-all duration-1000"
              style={{ width: `${(seconds / maxSeconds) * 100}%` }}
            />
          </div>
        </div>

        <p className="text-center text-sm font-normal">
          <span className="text-primary text-lg">{seconds}</span> seconds remaining
        </p>
      </div>
    </div>
  );
}