interface AvatarMaterial {
  id: string;
  name: string;
  duration: number;
  path: string;
}

interface AvatarMaterialSelectorProps {
  selectedAvatarMaterial: AvatarMaterial | null;
  onSelectLocalVideo: () => void;
}

/**
 * 人物素材选择卡片
 * - 已选择时展示素材信息 + 更换按钮
 * - 未选择时展示空状态 + 选择按钮
 */
const AvatarMaterialSelector: React.FC<AvatarMaterialSelectorProps> = ({
  selectedAvatarMaterial,
  onSelectLocalVideo,
}) => {
  return (
    <div className="panel-section">
      <label className="panel-label">形象选择</label>
      {selectedAvatarMaterial ? (
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            padding: 'var(--spacing-sm) var(--spacing-md)',
            border: '1px solid var(--border-color)',
            borderRadius: '8px',
            background: 'var(--bg-secondary)',
          }}
        >
          <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)' }}>
            <div
              style={{
                width: '36px',
                height: '36px',
                borderRadius: '50%',
                background: 'var(--primary-light)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                color: 'var(--primary)',
              }}
            >
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
                <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
                <circle cx="12" cy="7" r="4" />
              </svg>
            </div>
            <div>
              <div style={{ fontSize: 'var(--font-sm)', fontWeight: 500 }}>{selectedAvatarMaterial.name}</div>
              <div style={{ fontSize: 'var(--font-xs)', color: 'var(--text-secondary)' }}>
                {selectedAvatarMaterial.duration.toFixed(1)}s
              </div>
            </div>
          </div>
          <button className="btn btn-ghost btn-sm" onClick={onSelectLocalVideo}>
            更换
          </button>
        </div>
      ) : (
        <div
          style={{
            padding: 'var(--spacing-md)',
            border: '1px dashed var(--border-color)',
            borderRadius: '8px',
            textAlign: 'center',
            color: 'var(--text-secondary)',
            fontSize: 'var(--font-sm)',
          }}
        >
          <p>未选择形象素材</p>
          <p style={{ marginTop: '4px', fontSize: 'var(--font-xs)', opacity: 0.7 }}>
            请选择人物出镜视频用于生成
          </p>
          <p style={{ marginTop: '4px', fontSize: 'var(--font-xs)', color: 'var(--text-tertiary)' }}>
            格式：MP4 / MOV · 时长：5-60秒 · 比例：9:16（720×1280 或 1080×1920）
          </p>
          <button
            className="btn btn-primary btn-sm"
            style={{ marginTop: 'var(--spacing-sm)' }}
            onClick={onSelectLocalVideo}
          >
            选择素材
          </button>
        </div>
      )}
    </div>
  );
};

export default AvatarMaterialSelector;