import { useConversation } from '../context/ConversationContext';

export default function ModelLoader() {
  const { state } = useConversation();

  if (state.modelLoadStatus !== 'loading') return null;

  return (
    <div className="model-loader-overlay">
      <div className="model-loader-card">
        <div className="model-loader-icon">🧠</div>
        <h2>Loading AI Model</h2>
        <p>
          Downloading and initializing Qwen2.5-0.5B directly in your browser
          via WebGPU. No data leaves your device.
        </p>

        <div className="progress-percent">{state.modelLoadProgress}%</div>

        <div className="progress-bar-track">
          <div
            className="progress-bar-fill"
            style={{ width: `${state.modelLoadProgress}%` }}
          />
        </div>

        {state.modelLoadSteps.length > 0 && (
          <div className="model-loader-steps">
            {state.modelLoadSteps.map((step, i) => (
              <div key={i} className="model-loader-step">
                {step}
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}