import { useEffect, useState } from 'react';

import type { CustomWorldAgentOperationRecord } from '../../../packages/shared/src/contracts/customWorldAgent';

type CustomWorldAgentOperationBannerProps = {
  operation: CustomWorldAgentOperationRecord | null;
};

export function CustomWorldAgentOperationBanner({
  operation,
}: CustomWorldAgentOperationBannerProps) {
  const [visibleOperation, setVisibleOperation] =
    useState<CustomWorldAgentOperationRecord | null>(operation);

  useEffect(() => {
    setVisibleOperation(operation);

    if (operation?.status !== 'completed') {
      return;
    }

    const timeoutId = window.setTimeout(() => {
      setVisibleOperation((current) =>
        current?.operationId === operation.operationId ? null : current,
      );
    }, 1200);

    return () => window.clearTimeout(timeoutId);
  }, [operation]);

  if (!visibleOperation) {
    return null;
  }

  const isFailed = visibleOperation.status === 'failed';
  const isRunning =
    visibleOperation.status === 'running' || visibleOperation.status === 'queued';
  // 操作横幅直接复用平台状态横幅，亮暗主题都从同一套 token 取色。
  const bannerToneClass = isFailed
    ? 'platform-banner--danger'
    : isRunning
      ? 'platform-banner--info'
      : 'platform-banner--success';
  const progressFillStyle = isFailed
    ? { background: 'linear-gradient(90deg, #fb7185 0%, #f43f5e 100%)' }
    : isRunning
      ? { background: 'var(--platform-button-primary-fill)' }
      : { background: 'linear-gradient(90deg, #86efac 0%, #34d399 100%)' };

  return (
    <div
      className={`platform-remap-surface platform-banner rounded-[1.4rem] px-4 py-4 ${bannerToneClass}`}
    >
      <div className="flex items-center justify-between gap-3">
        <div className="text-sm font-semibold">
          {visibleOperation.phaseLabel}
        </div>
        <div className="text-xs opacity-80">
          {Math.max(0, Math.min(100, Math.round(visibleOperation.progress)))}%
        </div>
      </div>
      {visibleOperation.error ? (
        <div className="mt-2 text-sm opacity-90">
          {visibleOperation.error}
        </div>
      ) : null}
      <div className="platform-progress-track mt-3 h-2 overflow-hidden rounded-full">
        <div
          className="h-full rounded-full transition-[width] duration-300"
          style={{
            width: `${Math.max(8, Math.min(100, visibleOperation.progress))}%`,
            ...progressFillStyle,
          }}
        />
      </div>
    </div>
  );
}